APP跳转小程序,小程序跳转APP

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

 

 

前置条件:

  1. 开发环境:windows

  2. 开发框架:uni-app , H5+,nativeJS,mpvue

  3. 编辑器: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

相关博文:

https://ask.dcloud.net.cn/question/65322

// app内 
// index页面
onShow() {     
  console.log("接收小程序传递过来的参数1",plus.runtime.arguments);      
},

 

posted @ 2021-03-02 13:58  白墨阳  阅读(3873)  评论(0编辑  收藏  举报