最近公司项目有个需求,支付时从uni-app移动应用跳转到小程序,做完以后记录下完整的对接流程(该对接流程只适用于uni-app开发的APP)。
- 以公司为主体注册微信开发平台账户 open.weixin.qq.com/
- 在微信开放平台创建移动应用
PS:这里需要注意一下两点
- 如果是未上线的移动应用,跳转小程序的限制是每天100次,这个限制是针对应用,未上线的应用,不用填写IOS的下载地址
- 已上线的移动应用,需要注意开发者是否跟当前微信开放平台主体是否一致,不一致的话需要在APP运行流程图里边出具相关授权书
如APP已上线,就分别填写里边内容即可,安卓的应用签名可手机下载官方签名生成工具,对应链接:
developers.weixin.qq.com/doc/oplatfo…
之后提交给微信平台审核,审核通过以后平台会生成这个移动应用的AppID,如下图:
分别把AppID于IOS通用平台链接填写到移动应用manifest.json文件中,如下图:
- 创建对应跳转的小程序 mp.weixin.qq.com/ 并把小程序绑定到刚才申请的微信开放平台中,如下图:
终于把前期工作准备完成,
之后我们开始建立小程序项目啦!!!
首先创建一个小程序项目,微信开发平台绑定的小程序AppID写上去
在小程序中新建一个页面,用于APP跳转,接下来我们回到代码层面。
APP是通过分享跳转小程序的,代码如下
//APP端
plus.share.getServices(function(res) {
var sweixin = null;
for (var i = 0; i < res.length; i++) {
var t = res[i];
if (t.id == 'weixin') {
sweixin = t;
}
}
if (sweixin) {
sweixin.launchMiniProgram({
id: config.base.originalAPPID,//填写我们已经申请的小程序的原始ID
type: 0, //0 正式 1 测试 2 体验 小程序的版本
path: `pages/index/index?ouId=${ouId}`//这里你要跳的路径,可以传值
});
}
}, function(res) {
});
//小程序端
onLoad: function (options) {
//通过onLoad获取从APP端传递的参数
this.setData({
ouId:options.ouId,
});
},
小程序如何向APP端传递参数app-parameter携带参数,APP通过onShow中plus.runtime.arguments获取外部传递过来的数据
//小程序
<button class="button-item-confim" open-type="launchApp" app-parameter="{{payStatus}}"
binderror="launchAppError">返回商家</button>
//APP
onShow(){
this.getArguments()
},
getArguments(){
let param = plus.runtime.arguments;
if(param==1){
this.createdBills()
}
},
更多的需求及场景,请访问 uniapp.dcloud.io/api/plugins… 那我们如何小程序开发环境测试我们的跳转功能呢?
- 因为APP跳转小程序是路径传参的方式,我们可以自定义编译方式,自测小程序代码是否正确。
- 写上版本号,更新内容后上传我们的模板至小程序
- 把我们小程序设置为体验版本(我们就可以再HBuilderX上进行真机跟打包的测试)
以上就是基于uni-APP开发的移动应用跳转小程序的全部流程,如有遗漏的话,大佬们在留言区下边补充,我也会随时修改。