uni-app开发移动应用跳转微信小程序踩过的坑

2,143 阅读2分钟

最近公司项目有个需求,支付时从uni-app移动应用跳转到小程序,做完以后记录下完整的对接流程(该对接流程只适用于uni-app开发的APP)。

image.png

  • 在微信开放平台创建移动应用 image.png

image.png PS:这里需要注意一下两点

  • 如果是未上线的移动应用,跳转小程序的限制是每天100次,这个限制是针对应用,未上线的应用,不用填写IOS的下载地址
  • 已上线的移动应用,需要注意开发者是否跟当前微信开放平台主体是否一致,不一致的话需要在APP运行流程图里边出具相关授权书

image.png

image.png 如APP已上线,就分别填写里边内容即可,安卓的应用签名可手机下载官方签名生成工具,对应链接: developers.weixin.qq.com/doc/oplatfo…

image.png 之后提交给微信平台审核,审核通过以后平台会生成这个移动应用的AppID,如下图:

image.png 分别把AppID于IOS通用平台链接填写到移动应用manifest.json文件中,如下图:

image.png

  • 创建对应跳转的小程序 mp.weixin.qq.com/ 并把小程序绑定到刚才申请的微信开放平台中,如下图:

image.png

image.png

终于把前期工作准备完成,

之后我们开始建立小程序项目啦!!!

首先创建一个小程序项目,微信开发平台绑定的小程序AppID写上去 image.png 在小程序中新建一个页面,用于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跳转小程序是路径传参的方式,我们可以自定义编译方式,自测小程序代码是否正确。 image.png image.png
  • 写上版本号,更新内容后上传我们的模板至小程序 image.png
  • 把我们小程序设置为体验版本(我们就可以再HBuilderX上进行真机跟打包的测试) image.png 以上就是基于uni-APP开发的移动应用跳转小程序的全部流程,如有遗漏的话,大佬们在留言区下边补充,我也会随时修改。

image.png