总结一个微信小程序跳转到另一个微信小程序

目录

需求

目前有两个微信小程序,小程序A和小程序B,小程序B是不能分享页面的,因为该小程序是给内部人员使用的,但是呢,需要实现B分享A的某一页面,并且该页面的数据由B控制。

解决

思路

目前B要做的事情是在跳转到A的同时将B获取到的数据传递给A,A拿到数据后,将该数据展示到A的某一页面中,然后分享A的这一个页面。

注意事项

1、首先两个小程序需要绑定同一个公众号,以免跳转不成功或是被封号。

2、两个小程序的功能不能太单一。

3、跳转引导的面积不要太大。

实现

页面跳转

小程序之间跳转的方式有两种,需要先获取A小程序的appid,该appid需要在app.json中设置一下。还可以使用 shortLink,及小程序链接,当传递该参数后,可以不传 appId 和 path。建议使用appId。

javascript 复制代码
  "window": {
    "navigateToMiniProgramAppIdList": [
      "A小程序的appId"   
    ]
  },

跳转的相关代码

javascript 复制代码
  shareOrder(){
    wx.navigateToMiniProgram({
      appId: 'A小程序的appId',
      path: 'p_order/order_share/order_share',
      envVersion: 'release',//上线版,开发版develop
      success(res) {
      console.log('跳转成功')
      }
    })
  }
传递数据

小程序跳转的传参方式有两种,一种是路径上传参,一种是利用extraData。

使用extraData传参,目标小程序可在 App.onLaunch,App.onShow 中获取到这份数据。如果跳转的是小游戏,可以在 wx.onShow、wx.getLaunchOptionsSync 中可以获取到这份数据数据。

javascript 复制代码
  extraData: {
    foo: 'bar'
  }

使用路径上拼接传参可在页面的onLoad中拿到,及options内,由于路径传参可以放的数据是有限的,所以可以将数据以JSON格式传过去。

javascript 复制代码
    let detail = JSON.stringify(orderDetail)
    wx.navigateToMiniProgram({
      appId: 'A小程序的appId',
      path: 'p_order/order_share/order_share?detailinfo='+detail,
      envVersion: 'release',
      success(res) {
      }
    })

使用JSON.stringify将数据转换为json格式时会出现很多问题,因为我们的数据可能会很乱,所以我建议将需要的数据都整合到另一个对象的同一层中,再进行转换。

JSON.stringify的转换规则可以参考转换规则

接收参数

在小程序A的目标页面的onLoad拿到传过来的数据,再将json数据转换成对象。

javascript 复制代码
let data = JSON.parse(options.detailinfo)

拿到数据后,就可以在页面上运用。

转发功能

小程序的页面转发也是需要传递数据的,即在该页面的onShareAppMessage中传递数据,这里要传的数据和在小程序B中要传的数据一样即可,仍然使用路径拼接传递参数。

javascript 复制代码
  onShareAppMessage() {
    let detailinfo = JSON.stringify(this.data.detailInfo)
    return {
      title: '转发页面的标签名',
      path: 'p_order/order_share/order_share?detailinfo=' + detailinfo
    }
  }

按正常情况下的分享,我们需要在onLoad中拿到数据进行如下操作,但是刚刚已经处理过了,所以不用再处理。

javascript 复制代码
let data = JSON.parse(options.detailinfo)

需要注意的是,小程序跳转传的参数是跳转时当时的数据,所以无论小程序B的数据在跳转之后有没有发生变化,那一页的数据都不会改变。
另一个需要注意的点就是跳转到小程序A之后就不能使用小程序B的接口了哈,虽然这是一个常识,但也免不了会有人忘记。

相关推荐
游戏开发爱好者81 小时前
H5 混合应用加密 Web 资源暴露到 IPA 层防护的完整技术方案
android·前端·ios·小程序·uni-app·iphone·webview
wangpq1 小时前
记录曾经打开半屏小程序遇到的事
前端·微信小程序
2501_915106321 小时前
最新版本iOS系统设备管理功能全面指南
android·macos·ios·小程序·uni-app·cocoa·iphone
游戏开发爱好者82 小时前
HTTPS DDoS 排查 异常流量到抓包分析
网络协议·ios·小程序·https·uni-app·iphone·ddos
jay神2 小时前
【原创】基于小程序的图书馆座位预约系统
微信小程序·小程序·毕业设计·图书馆自习室座位预约系统·座位预约系统
计算机徐师兄2 小时前
Java基于微信小程序的物流管理系统【附源码、文档说明】
java·微信小程序·物流管理系统·java物流管理系统小程序·物流管理系统小程序·物流管理系统微信小程序·java物流管理系统微信小程序
一点晖光2 小时前
小程序中web-view加载uni-app H5如何使用postMessage方法的解决方案
前端·小程序·uni-app
2501_915918413 小时前
iOS 性能监控 运行时指标与系统行为的多工具协同方案
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张3 小时前
IPA 混淆技术全解,从成品包结构出发的 iOS 应用安全实践与工具组合
android·安全·ios·小程序·uni-app·cocoa·iphone
veteranJayBrother4 小时前
适配小程序的下滑上滑播放视频组件
小程序·apache·音视频