h5跳转小程序指北

跳转小程序指北

随着小程序用户越来越多，围绕小程序展开的一系列开发需求已经是绕不开的话题，今天来小说一下小程序跳转

小程序跳转分类

虽然用户看到的场景都是嗖一下跳转到了指定微信小程序的指定页面，但是这其中实现的方式可谓是天差地别，我们业务里主要分为4种场景，分别是

app调用微信sdk -> 小程序
小程序 -> 小程序
微信环环境的h5 -> 小程序
外部环境后 -> 小程序

1. 小程序 -> 小程序

这个相对简单，直接条用微信的方法即可

javascript 复制代码

// index.js中跳转第三方小程序
bind_redirect_third_party: function () {

  wx.navigateToMiniProgram({
    appId: '' // 目标小程序id, 
    path: '' // 要跳转的小程序路径,
    extraData: {
      // 可选：传递给目标小程序的额外数据
    },
    success(res) {
      console.log('调起成功')
    },
    fail(res) {
      console.log('失败', res)
    },
  })
}

2. 微信环境的h5 -> 小程序

剩下两种就要麻烦一些，可以先看一眼微信静态网站 H5 跳小程序，剩下两种均需要使用到云托管静态页面

首先下载官方模板，你主要修改的就是index.html和 cloudfunctions/public/index.js俩个文件

开通方式为微信小程序后台开发 -> 云服务 -> 云开发

微信环境h5跳小程序相对简单，只要配好了开放标签上的参数就成

ps: 小程序原始账号可以从小程序后台，设置 -> 原始ID 找到

xml 复制代码

 <!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
        <wx-open-launch-weapp id="launch-btn" username="小程序原始账号 ID（gh_ 开头的）" path="要跳转到的页面路径"> <!-- replace -->
          <template>
            <button style="width: 200px; height: 45px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color:#fff;">打开小程序</button>
          </template>
        </wx-open-launch-weapp>

3. 外部环境的h5 -> 小程序

这个相对麻烦一些，不仅要用到上面说的静态托管，下载了云函数也要上传

1. 根据文档替换想要用的云函数环境

2. 传给云函数的参数可以自定义，比如我得就是这样的

bash 复制代码

let data = {
    action: 'getUrlScheme',
    path: '/page/index/index',
    query: 'name=111&id=2'
}

这个传个云函数以后，在云函数中用event.就可以使用

3. 需要在cloudfunctions/public/config.json中注册要用的函数，这个官方文档没有说，我开始就是卡在这里

4. 右键cloudfunctions/public，上传并部署：云安装依赖（不上传 node modules）

5. 云开发-更多-静态网站-上传文件-上传index.html

6. 云开发-设置-权限设置-未登录用户访问云资源权限设置 -> 开启

7. 云开发-云函数-云函数权限-修改

8. 云开发-云函数-云函数列表

看public函数是否在列表上

ps.这个也可以点日志看每次调用函数的返回，如果返回中有openlink则为成功

9. 如果还是没有返回openlink，可以尝试在cloud.init中指定你的云环境id

10. 云开发-更多-静态网站-点击index.html-> 下载地址就可以访问你的小程序啦

当然如果你想动态配置跳转的目标小程序，可以参考下面的github下面，只要在url上面加query就可以实现

4. github示例地址

github项目示例

5. 参考

跳转小程序