zoukankan html css js c++ java

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