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
相关博文:
https://ask.dcloud.net.cn/question/65322
// app内 // index页面 onShow() { console.log("接收小程序传递过来的参数1",plus.runtime.arguments); },