APP跳转小程序，小程序跳转APP

关注公共号，搜索 "APP跳转小程序，小程序跳转APP",查看原文

前置条件：

开发环境：windows
开发框架：uni-app , H5+，nativeJS，mpvue
编辑器：HbuilderX

4. 兼容版本：安卓已作测试,IOS未测试

App开发用的是uni-app

小程序开发用的是mpvue

1. APP 跳转小程序

文档地址:

https://uniapp.dcloud.io/api/plugins/share

相关错误代码：

https://ask.dcloud.net.cn/article/287

1.1 首先需要在微信开放者平台将APP和微信小程序关联起来

1.2 如果需要APP直接跳转小程序，小程序内无需其他操作和参数传递，建议调用示例代码中 toweChats 方法；如果从APP内跳转到小程序，需要做一些逻辑操作和传递参数，建议使用示例代码中 shareWeChats 方法

1.3 shareWeChats 里面的参数建议从后端获取，这样方便维护

1.4 使用 shareWeChats 方法跳转APP传参，如果小程序内没有接收到传递的参数，可以在miniProgram对象里面添加 query:"" 的属性，小程序那边成功接收到参数以后，就可删除 query 属性了

2. 在APP内：需要跳转到小程序的页面调用如下代码:

2.1 此处跳转到小程序的index页面，传递的参数是 pid=49&name=云上的日子

// APP 跳转小程序

var appToWtchats={

  // 直接跳转跳转到微信小程序(直接跳转，小程序无法返回到APP)

  toweChats:function(appId){

    if(appId==undefined){

      appId="gh_123456";

    }

    //获取当前显示的webview

    var pages = getCurrentPages()

    var page = pages[pages.length - 1]

    var currentWebview = page.$getAppWebview()

    //调用H5+APP的扩展API

    var shares=null;

    // let that = this

    var pusher = plus.share.getServices(function(s){

      shares={};

      for(var i in s){

        var t=s[i];

        shares[t.id]=t;

      }

      var sweixin=shares['weixin'];

      // 此处appId为小程序的原始id

      sweixin.launchMiniProgram({

        id:appId //要跳转小程序的原始ID

      })

    }, function(e){

      console.log("获取分享服务列表失败："+e.message);

    });

    //放入当前的webview

    currentWebview.append(pusher);

  },

  // app 分享到小程序（小程序可以返回到APP）

  shareWeChats:function(obj){

    obj = obj || {}

    uni.share({

        provider:'weixin',

        // 分享出去的场景 WXSceneSession、WXSenceTimeline

        scene:obj.scene || "WXSceneSession",

        /*

         分享形式 0 图文 5小程序

         仅支持分享微信小程序到微信聊天界面，想进入朋友圈需改为分享图片方式，在图片中包含小程序码。一般通过canvas绘制图片，插件市场有很多生成图片的插件

         https://uniapp.dcloud.io/api/plugins/share

         */

        type:obj.type || 5,

        // 缩略图，小于20Kb的图片

        imageUrl:obj.imageUrl || 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/962fc340-4f2c-11eb-bdc1-8bd33eb6adaa.png',

        // 分享标题

        title:obj.title || '欢迎体验地毯汇小程序',

        miniProgram: {

            // 小程序原始ID

            id:obj.miniProgram.id || 'gh_2bcfe97e74d5',

            /*

            小程序打开的页面，路径以pages/index开头

            */

            path:obj.miniProgram.path || 'pages/index/main?pid=49&name=云上的日子',

            // 微信小程序版本类型，可取值：0-正式版；1-测试版；2-体验版。默认值为0。

            type:obj.miniProgram.type || 2,

            query:"",

            /*

             兼容低版本的网页链接

             微信公众平台里面配置的域名或者接口，webUrl必传，可以为空

             webUrl 属性不存在，会无法分享

             */

            webUrl:obj.miniProgram.webUrl || 'https://www.123456.net'

        },

        success: ret => {

            console.log("分享到小程序成功",ret);

        },

        fail: err => {

          console.log("分享到小程序失败",err);

        }

    });

  }

}

3. 小程序跳转APP

3.1 在小程序页面周期函数，onLoad里面接收app内传递过来的参数

3.2 小程序跳转APP，必须是从APP分享出来的小程序页面，小程序无法直接跳转APP

文档地址：
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html

在小程序内：需要跳转到APP使用如下代码：

// 在小程序内

// index页面

 <button open-type="launchApp" app-parameter="小程序传递过来的参数" @error="launchAppError">跳转APP</button>

 // js

 onLoad(e) {

      console.log("app内传递到小程序的参数的参数", e)

  },

  methods: {

        // 监听小程序跳转APP发生错误

        launchAppError(e) {

            console.log("打开APP", e)

        }

  }

4. app内获取小程序传递的参数，在onShow里面执行如下代码：

4.1 通过 plus.runtime.arguments 获取小程序内传递来的参数

文档地址：
https://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.arguments

秒客网

APP跳转小程序，小程序跳转APP

相关文章