本文最后更新于 2019-10-15【1617 天前】,文中所描述的信息可能已发生改变,请谨慎使用。如有问题或建议,欢迎在文章底部留言参与讨论!

最近因为一个小程序被举报违规下架了,然后就折腾了一下小程序。从网上找了点教程,实现了在小程序内跳转到另一个小程序。

先放个成品动画(在开发者工具中):
小程序跳转

具体体验可以扫描下方二维码,打开关于页面查看实际效果:
木函工具箱小程序二维码

小程序跳转前提

微信小程序支持小程序之间进行跳转,但实现还需要进行一些设定,要在小程序全局配置文件中声明将要跳转的小程序名单,限定不超过10个,否则将无法通过审核。该名单可在发布新版时更新,不支持动态修改。

具体为,在 app.json 中修改代码如下:

{
  ...
  "navigateToMiniProgramAppIdList": ["wxaae7a446e8cbcc2d"]
}

其中,...为原先文件内容,只有中间的一行是新增。

如果未配置将要跳转小程序名单,则会弹出navigateToMiniProgram 接口需要配置声明,否则将无法跳转的错误提示。
navigate需要配置声明

配置好全局声明之后,具体实现有两种方式,一个是利用 wx.navigateToMiniProgram 的 API 实现,一般方式为通过按钮点击事件触发,另一个是利用 <navigator> 组件实现,一般方式为通过超链接触发。接下来具体说一下这两种方法的实现。

wx.navigateToMiniProgram API 实现

这是早期的实现方法,基础库 1.3.0 开始支持,低版本需做兼容处理。

首先在微信小程序页面文件中添加一个按钮并绑定:

/* Demo.wxml */
<button bindtap='navigateToMiniProgram'>
点击按钮打开其他小程序
</button>

然后再在 js 文件写具体函数实现:

navigateToMiniProgram(){
  wx.navigateToMiniProgram({
  appId: 'wxaae7a446e8cbcc2d',
  path: 'page/index/index',
  extraData: {
    from: 'Quanyin'
  },
  envVersion: 'develop',
  success(res) {
    // 打开其他小程序成功同步触发
    wx.showToast({
      title: '跳转成功'
      })
    }
  })
}

相关参数列表如下:

属性类型默认值是否必填说明
appIdstring 要打开的小程序 appId
pathstring 打开的页面路径,如果为空则打开首页
extraDataobject需要传递给目标小程序的数据,目标小程序可在App.onLaunch,App.onShow 中获取到这份数据
envVersionstringrelease要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。如果当前小程序是正式版,则打开的小程序必定是正式版
successfunction 接口调用成功的回调函数
failfunction 接口调用失败的回调函数
completefunction 接口调用结束的回调函数(调用成功、失败都会执行)

官方文档说明:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/miniprogram-navigate/wx.navigateToMiniProgram.html

注意:此接口即将废弃,请使用 组件来使用此功能。

组件实现

小程序基础库版本要在基础库 1.0.0 以上才开始支持,低版本需做兼容处理。支持的参数和navigateToMiniProgram 一致。

首先添加组件:

/* Demo.wxml */    
<navigator 
target="miniProgram" 
open-type="navigate" 
app-id="wxaae7a446e8cbcc2d" 
path="page/index/index1"  
extra-data="{{extraData}}"
version="develop" 
bindsuccess="toMiniProgramSuccess">
点击超链接打开绑定的小程序
</navigator>

在 js 文件中可以添加一些处理信息:

data:{
  extraData: {
    from: 'Quanyin'
  }
}
...  
toMiniProgramSuccess(res){
    //从其他小程序返回的时候触发
    wx.showToast({
      title: '通过超链接跳转其他小程序成功返回了'
    })
}

官方文档说明:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

限制与说明

  1. 需要用户触发跳转:从 2.3.0 版本开始,若用户未点击小程序页面任意位置,则开发者将无法调用此接口自动跳转至其他小程序。
  2. 需要用户确认跳转:从 2.3.0 版本开始,在跳转至其他小程序前,将统一增加弹窗,询问是否跳转,用户确认后才可以跳转其他小程序。如果用户点击取消,则回调 fail cancel
  3. 每个小程序可跳转的其他小程序数量限制为不超过 10 个:从 2.4.0 版本以及指定日期(具体待定)开始,开发者提交新版小程序代码时,如使用了跳转其他小程序功能,则需要在代码配置中声明将要跳转的小程序名单,限定不超过 10 个,否则将无法通过审核。该名单可在发布新版时更新,不支持动态修改。配置方法详见 小程序全局配置。调用此接口时,所跳转的 appId 必须在配置列表中,否则回调 fail appId "${appId}" is not in navigateToMiniProgramAppIdList
  4. 关于调试

    • 在开发者工具上调用此 API 并不会真实的跳转到另外的小程序,但是开发者工具会校验本次调用跳转是否成功。
    • 开发者工具上支持被跳转的小程序处理接收参数的调试。

参考

文章目录
文章目录


推荐使用:阿里云 云翼计划学生优惠、ECS、轻量应用等产品与服务【 点击注册

本文作者:Quanyin Tang

本文链接:微信小程序开发之跳转其他小程序 - https://www.imtqy.com/MiniProgram-navigate.html

版权声明:如无特别声明,本文即为原创文章,仅代表个人观点,版权归 Quanyin 所有,未经允许禁止转载,经授权转载请注明出处!