小程序开发设计如何实现跨平台开发与管理满足企业多元化需求
917
2023-03-18
uniapp微信小程序免密支付（uni app 微信小程序）
本篇文章给大家谈谈uniapp微信小程序免密支付，以及uni app 微信小程序对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
今天给各位分享uniapp微信小程序免密支付的知识，其中也会对uni app 微信小程序进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
最近在使用uni-app开发微信小程序，开头偷懒，组件做了全局引入，但是随着组件的增加，微信小程序报main.js超过500KB（实际大小为549KB），后来跟踪发现是因为组件做了全局引入影响，改为按需引入后，main.js缩小至123KB，warning解除。
2、点击允许按钮，获取用户微信绑定的手机号与openId
3、 请求后端接口，实现登录。
微信公众平台---登陆---开发---开发管理---开发设置 查看APPID、secret
在把上面获取的appid session_key encryptedData iv传入以下方法中，得到最后解密的信息
解密后的信息
一： 使用 plus.android.importClass() 调用安卓的类进行原生代码编写，但是经测试效果很不理想，速度很慢！
二：开发原生 Android 插件，运行速度快，但需要一定的安卓开发经验，难度较高。
三：购买其他开发者开发的原生插件，但是一般价格不低。
综上所述，我们必须学会自己开发原生插件！
二、前期准备
1、Android Studio 开发工具。 -：https://developer.android.google-/studio/ 安装教程：https://blog.csdn-/weixin_43883917/article/details/108942788
2、离线SDK-（-最新版）。 -: https://nativesupport.dcloud--/AppDocs/download/android
3、保证 HbuilderX 也是最新版
4、签名证书。 生成方法：https://blog.csdn-/weixin_58605808/article/details/117387435
三、创建一个 Uniapp 案例 （TCP-Plugin）
1、 开发者中心创建一个应用：https://dev.dcloud--/app/index?type=0
2、 点击应用名称进入应用，选择 离线打包Key管理 ，输入如下信息：
签名证书获取：
3、 点击保存会生成 appkey，后面要用到：4、 启动 HbuilderX，左下角登录自己的账户，新建一个和刚刚同名的项目的默认模板项目，查看 manifest.json AppID 是否云端 APPID 对应：
以上 uniapp demo 算是创建完成！
四、Android 原生插件开发
一、导入已-好的离线SDK中的原生插件开发框架项目，UniPlugin-Hello-AS
二、切换成 project模式， 项目结构如下：
三、把我们刚才申请的appkey填写到 app/src/main/AndroidManifest.xml 中，因为开发的是安卓，所以appkey填安卓的：
四、把我们的签名证书放到app目录下，博主的签名证书名叫 uniapp.keystore
五、配置签名证书，在 app/build.gradle 的 signingConfigs 选项中：
六、右键 UniPlugin-Hello-AS，创建 Module
七、填写插件模块信息：
八、配置 TCP-Socket/build.gradle，复制官方案例 uniplugin_module/build.gradle
apply plugin: 'com.android.library'
android {
compileSdkVersion 29
defaultConfig {
minSdkVersion 16
targetSdkVersion 28
versionCode 1
versionName "1.0"
testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
repositories {
flatDir {
dirs 'libs'
}
}
dependencies {
compileOnly fileTree(dir: 'libs', include: ['*.jar'])
compileOnly fileTree(dir: '../app/libs', include: ['uniapp-v8-release.aar'])
compileOnly 'androidx.recyclerview:recyclerview:1.0.0'
compileOnly 'androidx.legacy:legacy-support-v4:1.0.0'
compileOnly 'androidx.appcompat:appcompat:1.0.0'
implementation 'com.alibaba:fastjson:1.1.46.android'
implementation 'com.facebook.fresco:fresco:1.13.0'
/*implementation 'com.android.support:appcompat-v7:28.0.0'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'*/
}
九、删除不必要的官方案例，让项目更加简洁（可选）：
十、在TCP-Socket 模块下的 com/example/tcp/socket 创建类TcpModule
十一、TCP Scocket 通信功能实现，代码如下：
package com.example.tcp.socket;
import com.alibaba.fastjson.JSONObject;
import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.io.PrintWriter;
import java-.Socket;
import io.dcloud.feature.uniapp.annotation.UniJSMethod;
import io.dcloud.feature.uniapp.bridge.UniJSCallback;
import io.dcloud.feature.uniapp.common.UniModule;
public class TcpModule extends UniModule {
int port = 6666;
Socket socket = null;
OutputStreamWriter outputStream = null;
InputStreamReader inputStream = null;
@UniJSMethod
public void send(final JSONObject json, final UniJSCallback callback) {
new Thread(new Runnable() {
@Override
public void run() {
String ip = json.getString("ip");
String userId = json.getString("code");
JSONObject res = new JSONObject();
// 建立与服务器的连接
try {
socket = new Socket(ip, port);
socket.setSoTimeout(1500);
//建立连接后获取输入输出流
outputStream = new OutputStreamWriter(socket.getOutputStream());
inputStream = new InputStreamReader(socket.getInputStream());
} catch (Exception e) {
try {
socket.close();
} catch (IOException ioException) {
ioException.printStackTrace();
}
e.printStackTrace();
res.put("code", 400);
res.put("data", "系统异常, 请重启APP!");
callback.invoke(res);
}
BufferedReader socketReader = new BufferedReader((inputStream));
BufferedWriter bufferedWriter = new BufferedWriter(outputStream);
PrintWriter socketWriter = new PrintWriter(bufferedWriter, true);
socketWriter.println(userId);
try {
String s = socketReader.readLine();
res.put("code", 200);
res.put("data", s);
// 这里关闭连接, 不然回调以后，程序就不执行了，不能再 finally 里面关闭连接
socket.close();
callback.invoke(res);
} catch (IOException e) {
res.put("code", 400);
res.put("data", "系统异常, 请重启APP!");
callback.invoke(res);
}
}
}).start();
}
}
注意：Android4.0 以后不允许在主线程进行网络连接，否则会出现 android.os.NetworkOnMainThreadException。因此，必须另起一个线程进行网络连接方面的操作。
十二、注册插件，在 app/src/main/assets/dcloud_uniplugins.json 文件中写入，如下：
{
"nativePlugins": [
{
"plugins": [
{
"type": "module",
"name": "TCP-Socket",
"class": "com.example.tcp.socket.TcpModule"
}
]
}
]
}
五、HbuilderX 生成本地打包 TCP-Plugin
1、引入原生插件方式如下：
const TCP = uni.requireNativePlugin("TCP-Socket");
index.vue 代码编写如下：
<template
<view class="content"
<image class="logo" src="/static/logo.png"</image
<view class="text-area"
<text class="title"{{title}}</text
</view
<view
<button @click="clickBtn"点击发送消息</button
</view
</view
</template
<script
const TCP = uni.requireNativePlugin("TCP-Socket");
export default {
data() {
return {
title: 'TCP-Socket 插件测试'
}
},
onLoad() {
},
methods: {
clickBtn(){
TCP.send({
ip: '192.168.0.100', // 服务器ip
code: 'd92863370904331f8a19cc116719bcd1' // 需要发送的数据
}, e = {
// 回调函数
uni.showToast({
title: '响应数据：' + JSON.stringify(e),
icon: 'none'
});
})
}
}
}
</script
<style
(...省略)
</style
2、HbuilderX 生成本地打包资源：
六、离线打包apk并进行真机调试
1、把生成的本地打包资源复制到 UniPlugin-Hello-AS 项目的 app/src/main/assets/apps 目录下：
2、配置 appid，在 UniPlugin-Hello-AS 项目的 app/src/main/assets/data/dcloud_control.xml 中配置：
3、在 UniPlugin-Hello-AS 项目的 app/build.gradle 中对 TCP-Socket 插件引用：
4、测试，手机或者虚拟设备连接以后，点击运行进行测试：
七、打包生成原生插件 aar
八、HbuilderX 引入TCP-Socket 打包的 aar 插件：
1、目录结构以及 package.json 编写如下：
2、manifest.json 选择本地插件：
九、制作自定义调试基座
打包自定义基座成功如下：
十、HbuilderX 真机调试测试插件
1、选择自定义调试基座：
注意：如果出现已经制作自定义调试基座，但是没有运行基座选择这一选项的情况。请重新进行自定义基座打包，直到出现运行基座选择为止！
2、选择运行到 Android App 基座进行真机调试：
测试成功！
原生插件开发调试打包全部完成！
十一、开发期间遇到的问题：
1、 [JS Framework] 当前运行的基座不包含原生插件[xxxx]，请在manifest中配置该插件，重新制作包括该原生插件的自定义运行基座。
问题分析：
1、 package.json 配置编写错误 （仔细进行对照）.
2、 是否在manifest中配置 （这种睿智操作一般不会犯）
3、 原生插件是否使用自定义基座 (大部分是这个原因)
4、 自己开发原生插件是否有错误，未成功打包到基座 (原因是这个的概率很小，因为在 Android Studio 离线打包的时候我们调试通过了，说明插件没有问题。)
2、Android Studio 问题：Gradle task list not built during sync.Building the task list can impact Gradlesync performance on large projects.
解决方法如下：
完结~~， 撒花~~
1、veu.config.js 中推荐安装copy-webpack-plugin 5.0.0 版本。uniapp 框架文档有说明 vue-config
打开终端运行 npm 安装版本
npm install copy-webpack-plugin@5.0.0
需要5.0版本，高版本Uniapp不支持
2、创建你自己云函数目录文件。我设置的：
wxcloud/cloudfunctions
3、修改manifest.json
在uni-app根目录下，修改manifest.json中的微信小程序项，结构如下
3、vue-config-js 中配置 编译copy文件到build目录。注意 空目录可能不会拷贝（后续你可用创建函数文件就会拷贝了）。 关于uniapp微信小程序免密支付和uni app 微信小程序的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 uniapp微信小程序免密支付的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于uni app 微信小程序、uniapp微信小程序免密支付的信息别忘了在本站进行查找喔。
本文目录一览：
- 1、怎样评价uni-app？
- 2、uni-k如何连接微信
- 3、uni-app使用时需注意的一些问题
- 4、uni-app 微信小程序获取手机号并解密
- 5、如何破解uniapp写的应用
- 6、uniapp使用微信小程序云开发
怎样评价uni-app？
前端最火热的话题无法就是flutter,不管是刷哪个论坛，必定有探讨flutter的文章。没用过flutter，但是对于跨平台的技术，我一直都在研究。
为什么是uni-app
之前一直在找解决跨平台的方案，尝试了很多方案，比如滴滴的变色龙，但是最终还是选择了uni-app，这里附上uni-app的官网。为什么会选择它呢，第一，vue语法，学习成本低，上手速度快，只要之前你做过vue的项目，那么就能很快上手，其实是vue和微信小程序的结合体，一半vue，一半微信小程序。第二，长期维护，之前做微信小程序的时候，选择了美团的mpvue，但是后面发现长期不维护了，提了Issues也没人理，随之就放弃了，而uni-app长期在维护，这样看出了开发团队的用心。第三，跨平台的能力，uni-app能够跨多个终端，H5，安卓，Ios，微信小程序，百度小程序，头条小程序，支付宝小程序，真正实现了一套代码，多端运行，而且很好适应了我国的市场。第四，日益丰富的插件市场，uni的插件市场也在日益强大，能够基本上满足我们平时的开发需求。
uni-app的组件有原生调用能力，第三方的vue库在调原生接口时跟 5+runtime 不兼容。就像nativescript 有vue版和angular版，类似于react native , 都是起源于phonegap/cordova
实际开发效果遵义小红椒 做了一款app，打包了安卓，Ios,微信小程序3个平台，产出的效果都还是不错，总体还是比较满意。而且打包过程也很方便简单，配套的HBuilderX自动内置了打包功能，所以也省去了打包的烦恼。
遵义小红椒 建议
如果你现在想做一款跨平台的产品，而且有vue和微信小程序的经验，最重要的，你不想学习一门新语言，那么uni-app也许是你的一个选择。
uni-k如何连接微信
uni-k可以通过以下步骤来连接微信：1. 点击“打开客户端”按钮；2. 在出现的页面中输入账户和密码；3. 连接你的微信账号；4. 通过uni-k提供的菜单中进行个人账号管理；5. 查看你在uni-k上的所有账单。
uni-app使用时需注意的一些问题
一、组件做全局引入时要注意最近在使用uni-app开发微信小程序，开头偷懒，组件做了全局引入，但是随着组件的增加，微信小程序报main.js超过500KB（实际大小为549KB），后来跟踪发现是因为组件做了全局引入影响，改为按需引入后，main.js缩小至123KB，warning解除。
uni-app 微信小程序获取手机号并解密
1、 点击某个按钮，弹出请求微信授权界面。2、点击允许按钮，获取用户微信绑定的手机号与openId
3、 请求后端接口，实现登录。
微信公众平台---登陆---开发---开发管理---开发设置 查看APPID、secret
在把上面获取的appid session_key encryptedData iv传入以下方法中，得到最后解密的信息
解密后的信息
如何破解uniapp写的应用
最近uniapp 开发移动app项目遇到一个棘手问题，我想实现 TCPScoket 通信。我们知道 uniapp 开发基本用的是一些前端框架（如：vue, mpvue等）和一些 uni 自身 api。要想 uniapp 使用 Android 原生代码有以下三种常用方法：一： 使用 plus.android.importClass() 调用安卓的类进行原生代码编写，但是经测试效果很不理想，速度很慢！
二：开发原生 Android 插件，运行速度快，但需要一定的安卓开发经验，难度较高。
三：购买其他开发者开发的原生插件，但是一般价格不低。
综上所述，我们必须学会自己开发原生插件！
二、前期准备
1、Android Studio 开发工具。 -：https://developer.android.google-/studio/ 安装教程：https://blog.csdn-/weixin_43883917/article/details/108942788
2、离线SDK-（-最新版）。 -: https://nativesupport.dcloud--/AppDocs/download/android
3、保证 HbuilderX 也是最新版
4、签名证书。 生成方法：https://blog.csdn-/weixin_58605808/article/details/117387435
三、创建一个 Uniapp 案例 （TCP-Plugin）
1、 开发者中心创建一个应用：https://dev.dcloud--/app/index?type=0
2、 点击应用名称进入应用，选择 离线打包Key管理 ，输入如下信息：
签名证书获取：
3、 点击保存会生成 appkey，后面要用到：4、 启动 HbuilderX，左下角登录自己的账户，新建一个和刚刚同名的项目的默认模板项目，查看 manifest.json AppID 是否云端 APPID 对应：
以上 uniapp demo 算是创建完成！
四、Android 原生插件开发
一、导入已-好的离线SDK中的原生插件开发框架项目，UniPlugin-Hello-AS
二、切换成 project模式， 项目结构如下：
三、把我们刚才申请的appkey填写到 app/src/main/AndroidManifest.xml 中，因为开发的是安卓，所以appkey填安卓的：
四、把我们的签名证书放到app目录下，博主的签名证书名叫 uniapp.keystore
五、配置签名证书，在 app/build.gradle 的 signingConfigs 选项中：
六、右键 UniPlugin-Hello-AS，创建 Module
七、填写插件模块信息：
八、配置 TCP-Socket/build.gradle，复制官方案例 uniplugin_module/build.gradle
apply plugin: 'com.android.library'
android {
compileSdkVersion 29
defaultConfig {
minSdkVersion 16
targetSdkVersion 28
versionCode 1
versionName "1.0"
testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
repositories {
flatDir {
dirs 'libs'
}
}
dependencies {
compileOnly fileTree(dir: 'libs', include: ['*.jar'])
compileOnly fileTree(dir: '../app/libs', include: ['uniapp-v8-release.aar'])
compileOnly 'androidx.recyclerview:recyclerview:1.0.0'
compileOnly 'androidx.legacy:legacy-support-v4:1.0.0'
compileOnly 'androidx.appcompat:appcompat:1.0.0'
implementation 'com.alibaba:fastjson:1.1.46.android'
implementation 'com.facebook.fresco:fresco:1.13.0'
/*implementation 'com.android.support:appcompat-v7:28.0.0'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'*/
}
九、删除不必要的官方案例，让项目更加简洁（可选）：
十、在TCP-Socket 模块下的 com/example/tcp/socket 创建类TcpModule
十一、TCP Scocket 通信功能实现，代码如下：
package com.example.tcp.socket;
import com.alibaba.fastjson.JSONObject;
import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.io.PrintWriter;
import java-.Socket;
import io.dcloud.feature.uniapp.annotation.UniJSMethod;
import io.dcloud.feature.uniapp.bridge.UniJSCallback;
import io.dcloud.feature.uniapp.common.UniModule;
public class TcpModule extends UniModule {
int port = 6666;
Socket socket = null;
OutputStreamWriter outputStream = null;
InputStreamReader inputStream = null;
@UniJSMethod
public void send(final JSONObject json, final UniJSCallback callback) {
new Thread(new Runnable() {
@Override
public void run() {
String ip = json.getString("ip");
String userId = json.getString("code");
JSONObject res = new JSONObject();
// 建立与服务器的连接
try {
socket = new Socket(ip, port);
socket.setSoTimeout(1500);
//建立连接后获取输入输出流
outputStream = new OutputStreamWriter(socket.getOutputStream());
inputStream = new InputStreamReader(socket.getInputStream());
} catch (Exception e) {
try {
socket.close();
} catch (IOException ioException) {
ioException.printStackTrace();
}
e.printStackTrace();
res.put("code", 400);
res.put("data", "系统异常, 请重启APP!");
callback.invoke(res);
}
BufferedReader socketReader = new BufferedReader((inputStream));
BufferedWriter bufferedWriter = new BufferedWriter(outputStream);
PrintWriter socketWriter = new PrintWriter(bufferedWriter, true);
socketWriter.println(userId);
try {
String s = socketReader.readLine();
res.put("code", 200);
res.put("data", s);
// 这里关闭连接, 不然回调以后，程序就不执行了，不能再 finally 里面关闭连接
socket.close();
callback.invoke(res);
} catch (IOException e) {
res.put("code", 400);
res.put("data", "系统异常, 请重启APP!");
callback.invoke(res);
}
}
}).start();
}
}
注意：Android4.0 以后不允许在主线程进行网络连接，否则会出现 android.os.NetworkOnMainThreadException。因此，必须另起一个线程进行网络连接方面的操作。
十二、注册插件，在 app/src/main/assets/dcloud_uniplugins.json 文件中写入，如下：
{
"nativePlugins": [
{
"plugins": [
{
"type": "module",
"name": "TCP-Socket",
"class": "com.example.tcp.socket.TcpModule"
}
]
}
]
}
五、HbuilderX 生成本地打包 TCP-Plugin
1、引入原生插件方式如下：
const TCP = uni.requireNativePlugin("TCP-Socket");
index.vue 代码编写如下：
<template
<view class="content"
<image class="logo" src="/static/logo.png"</image
<view class="text-area"
<text class="title"{{title}}</text
</view
<view
<button @click="clickBtn"点击发送消息</button
</view
</view
</template
<script
const TCP = uni.requireNativePlugin("TCP-Socket");
export default {
data() {
return {
title: 'TCP-Socket 插件测试'
}
},
onLoad() {
},
methods: {
clickBtn(){
TCP.send({
ip: '192.168.0.100', // 服务器ip
code: 'd92863370904331f8a19cc116719bcd1' // 需要发送的数据
}, e = {
// 回调函数
uni.showToast({
title: '响应数据：' + JSON.stringify(e),
icon: 'none'
});
})
}
}
}
</script
<style
(...省略)
</style
2、HbuilderX 生成本地打包资源：
六、离线打包apk并进行真机调试
1、把生成的本地打包资源复制到 UniPlugin-Hello-AS 项目的 app/src/main/assets/apps 目录下：
2、配置 appid，在 UniPlugin-Hello-AS 项目的 app/src/main/assets/data/dcloud_control.xml 中配置：
3、在 UniPlugin-Hello-AS 项目的 app/build.gradle 中对 TCP-Socket 插件引用：
4、测试，手机或者虚拟设备连接以后，点击运行进行测试：
七、打包生成原生插件 aar
八、HbuilderX 引入TCP-Socket 打包的 aar 插件：
1、目录结构以及 package.json 编写如下：
2、manifest.json 选择本地插件：
九、制作自定义调试基座
打包自定义基座成功如下：
十、HbuilderX 真机调试测试插件
1、选择自定义调试基座：
注意：如果出现已经制作自定义调试基座，但是没有运行基座选择这一选项的情况。请重新进行自定义基座打包，直到出现运行基座选择为止！
2、选择运行到 Android App 基座进行真机调试：
测试成功！
原生插件开发调试打包全部完成！
十一、开发期间遇到的问题：
1、 [JS Framework] 当前运行的基座不包含原生插件[xxxx]，请在manifest中配置该插件，重新制作包括该原生插件的自定义运行基座。
问题分析：
1、 package.json 配置编写错误 （仔细进行对照）.
2、 是否在manifest中配置 （这种睿智操作一般不会犯）
3、 原生插件是否使用自定义基座 (大部分是这个原因)
4、 自己开发原生插件是否有错误，未成功打包到基座 (原因是这个的概率很小，因为在 Android Studio 离线打包的时候我们调试通过了，说明插件没有问题。)
2、Android Studio 问题：Gradle task list not built during sync.Building the task list can impact Gradlesync performance on large projects.
解决方法如下：
完结~~， 撒花~~
uniapp使用微信小程序云开发
步骤1、veu.config.js 中推荐安装copy-webpack-plugin 5.0.0 版本。uniapp 框架文档有说明 vue-config
打开终端运行 npm 安装版本
npm install copy-webpack-plugin@5.0.0
需要5.0版本，高版本Uniapp不支持
2、创建你自己云函数目录文件。我设置的：
wxcloud/cloudfunctions
3、修改manifest.json
在uni-app根目录下，修改manifest.json中的微信小程序项，结构如下
3、vue-config-js 中配置 编译copy文件到build目录。注意 空目录可能不会拷贝（后续你可用创建函数文件就会拷贝了）。 关于uniapp微信小程序免密支付和uni app 微信小程序的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 uniapp微信小程序免密支付的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于uni app 微信小程序、uniapp微信小程序免密支付的信息别忘了在本站进行查找喔。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~