公众号/h5 跳转到小程序填坑指南

本文介绍的是使用微信开放标签 wx-open-launch-weapp 实现微信浏览器内网页跳转到任意合法合规的小程序里，官方要求微信版本为：7.0.12 及以上，系统版本要求为：iOS 10.3 及以上、Android 5.0 及以上。 话不多说，先贴官方文档：开放标签说明文档

一. 准备工作

写代码前，一定要先把配置处理好,避免后续操作的不愉快。

步骤一：绑定域名

登录微信管理后台，在开发-开发管理-开发设置-服务域名，把你 js 请求的接口域名添加进去。

步骤二：引入 js 文件

在你的项目里面引入 js 文件，可以有两种方式。
方式 1：在 html 里面使用 script 标签引入

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js "></script>

方式 2： npm 安装

npm install weixin-js-sdk-ts

使用： import wx from ''weixin-js-sdk-ts'; Vue.prototype.wx = wx

步骤三：通过 config 接口注入权限验证配置并申请所需开放标签

这一步是非常关键的，调用微信 js 接口前要先拿到 config 信息，同一个 url 只需要调用一次。

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表，如['onMenuShareTimeline','onMenuShareAppMessage']
  openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
})

其中 signature 签名是需要从开发者服务器上去获取。

获取 signature 签名的四个步骤：
步骤一：使用appId和appSecret获取 access_token (通常是由开发者服务器全局缓存，有效期为 7200 秒，获取 accessToken)
步骤二：使用 access_token 获取jsapi_ticket临时票据
步骤三：用时间戳、随机数、jsapi_ticket 和要访问的 url 按照签名算法拼接字符串；
步骤四：对第三步的字符串进行 SHA1 加密，得到签名。
注意事项：
1.签名用的 noncestr 和 timestamp 必须与 wx.config 中的 nonceStr 和 timestamp 相同。
2.签名用的 url 必须是调用 JS 接口页面的完整 URL，但不包含#后面的。
详情请移步这里（微信 js-sdk 获取签名）

步骤四：使用 ready/error 验证成功与否

上面处理好之后，可以通过 wx.ready 方法处理成功后的结果，wx.error 处理失败后的结果。通常，如果打开了 debug，此时应该会出现 alert 弹窗，如果出现 config:ok 则说明配置成功。

小提示：如果还没有账号，在微信公众后台可申请微信测试账号，可以调用大部分的 js 接口。

使用 wx-open-launch-weapp 分享到小程序

在需要跳转的地方使用 wx-open-launch-weapp 标签，首先该标签需要在 wx.config 的 openTagList 中进行注册。
其中 username 是需要跳转到的小程序原始 Id, 是以gh开头的，非 wx 开头的，（APP 分享到小程序也是使用 gh 开头的 appId）。
path 是需要跳转到小程序的指定页面，非必填，默认跳转到小程序的首页。
需要注意的是，path必须带有html，如小程序路径：/pages/list, 这里应该写成/pages/list.html, 后面可以用?拼接参数，参数可以在 app.js,指定页面的 onLoad, onShow 里面拿到。

官方给的 demo 是下面这样的，其中跳转按钮是用 template 标签包裹，以插槽的形式存在。

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_XXXX"
  :path="path"
  >
  <template>
    <img src="/images/live/mini-icon@2x.png" alt="">
    <span>微信小程序</span>
  </template>
</wx-open-launch-weapp>
<!-- path: `/packages/live/watch.html?liveId=XXX`-->

为了在浏览器上调试时能看到 wx-open-launch-weapp， vue 项目中可以在 main 中加入下面这行代码：

Vue.config.ignoredElements = ['wx-open-launch-weapp']

然而上面这段代码在真机上并没有效果，可能是与 Vue 中的 template 标签冲突的原因，于是将 template 改用 script 标签的形式。

<script type='text/wxtag-template'>
  .icon{
    width: 55px;
    display: block;
    margin: 10px 0 10px 10px;
  }
  .title {
    font-size: 14px;
    margin-left: 14px;
  }
  <image class='icon' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAC+lBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8SkOAUkeEWkuEYkeEakuEck+EglOIjlOIlleImluInleIpluIql+Iql+Msl+MsmOMumOMwmOMxmeMzmuQ0m+Q1muQ2m+Q3nOQ5nOQ6neU8neU/nuU/n+VCoOVFoeZGouZIouZJo+ZJo+dKo+dKpOdMpOdNpOdOpeZQpuZRpudRp+dSp+dTqOdUp+dVqOdWqedYqehZquhbq+herOlfrelgrelgruljr+llsOpmseposeppsuprs+tts+tvtetxtux0t+x1t+x1uOx3ue15ue16uu17u+x8u+59vO2Ave2Cvu6Fv+6IwO6Lwu+Mw++PxPCQxfCRxfCSxvCTxvGWx/GXyPGYyfGZyfGbyvKcy/KdzPKfzPKhzfOjzvKq0vOr0/Ox1vWz1/W02PW42va52/a62va72/a83PbA3vbB3vbB3/bB3/fC3/fC4PfD4PfE4ffF4PfG4ffH4ffH4vfI4vjJ4/jK5PjL5PjM5fjN5PjP5vnQ5/nR5/nT6PrU6frV6frV6vrY6vrZ6/ra7Pvb6/vc7Pre7frf7vvg7/vl8fzm8fzn8vzo8/zp8/3r9f3v9v3v9v7w9/7x9/7x+P7y+P70+f/1+v72+v73+/74/P75+/77/f/8/f/9/v/+//////+CTNvLAAAAXnRSTlMAAQYHCBITFBUWFxgZGhwgIiMkJicoKSwtMzQ3OD5DREVcXWNkZWtsbnByc4SJiouQkZSVlpmam5ykpaansLGyvr/AyMnKy9fY29zd3+Dh4uPk7e7v8PHy8/T29/v9fke2jAAABPZJREFUGBm1wQ18zHUcB/DvGbspzJ4ybJhsppFpbZYba2ZbG9bV3c7Z7r5Reey5RHqgltGDp5Ke9KRnokTPzyIRJaIopedFT1pF0ef1yv3udnfj/7u7393/3m8KVVy37NzBpVUWO2C3VJUOzs3uFkd6SswyVUNDtSkrkXSR0rcSAVT2TaEIteldiqBKe7eh8CXn1yEkdfnJFJ6kM5wImXNQEqkz5jmgxJFnJDWGk61QZu1lIAXxJQhLSTyFLMOGMNkyKDQxAxGBgTEUghPLEJGydhRUp2pEqLoTBZFmQcQsaRRQuh06sKdTAF3t0MWoriSVWgOd1KSSRHszdGPuQJpalUJHpa1Iy0DoqpA0ZEBnGXSceBt0ZounYxjOhO5KDNRSL0RBJrUQey6iwBJL/k5DVOSRnyQHosKRRD6DECUm8kp2QtmuVfdef9UV0xctW9sEOWcKNSuAqjfnsNekp7+HVAF5GGuhZvuN3NJzkKk1ktspUPMSH2fe75DIIbcKKFnFGq45AG0VJHSGkvWs6SZIdCaXflDx9xj2OY99noe2fuRSCRXPssely9bt3f/T7jVT2eMPaKqkoxKg4sgkdnu8CW6HlrDbK9CWQERZUPEJuy2FTz0LC6Ati4iKoGI1CxfDz14WxkNbERGdDRUPsbAc/maxAG1mojgouYOFd+FvOQuQiKNuUHIbCzvgbyULkOhB2VByCws74G8uu5wPiWzKhZI5LGyHn49YmAmJXBoCJbNZ2Aaf7y5k4SlIFFM5lDSwsBVe6y5gt08hUU4jENyv3zbBYxYLH8KjcSl7XAuZkWRFMOvvG8eTX4dbPQtb4PbyWG72PmSsNAqBbZzLwjYIM1nYDOEZ9loMKTshoD8fYY9bIcxgYRNctrDX5QchRwhkz9XsdQQuM1jYAJf7udlljQiARkFuJ/vMhzCThQ1wWcEe835GAHayQqqRfeb/AqGehY1wOXAJu1z5KgKy0ghIzeBm89+BxywWNkHY/2h9w2NvH0JgI6kcMmvZY/p78Gpg4QMoKKchkFnIbov+gc9sFjZDQTHlQmY8C9fB3xwWPoaCAZQNGXbbCH+3s7ATCrKpO2TGsMu4g/A3l4XPoaAHxUFmMrtcdBj+bmZhDxScQGSGxA0s/AA/hyey8A1CZyaiIkgsYWE1/OxkYWwTQldERFmQeI2Fif/BZyELDVDQm4gSINHIbg/A60V2ewEKEuioKkgsYLcn/oWw70n2+A2hqyKXUyGxiz2mrdr25e43HhzLHiuhoB+5dIbMPaxpKlR0IaECEn9NZC0/QsFZ5JYDma9Yw2dQkUNuxlrI7JrAx5jyBVTUGsmjAFL77uIWHm6CkgJqluKE3FsN7LV4K9Q4TyIvEwLZvuLOKeMnTLt7zddQZSKfJAeiwpFMfvIQFaeTv1gLosAaSy1kIgoyqSVDCXRXYqBjxNugM1s8HScDOutJGgqhq0LSEjMMOiqPIU0dzNCNuQNJpNZAJzWpJJVmhy7saRRAuh06sKdTQGlWRMyaRkGkViNC1akUVLsyRKSsPYWgdSEiUNiaQpNhQ5hsPSlkHYciLEM7kgJDphXKrJkGUmPMc0CJI89I6pIHOREypymZwpOcX4eQ1OWnUPjicioQVEVOHEWoS/9KBFDZvwvpIjHLZIaGc0xZiaSntt37DCgeNtwyGhhtGT6seECf7m0pRP8DNlHuGV5JPV0AAAAASUVORK5CYII='></image>
  <view class='title'>小程序</view>
</script>

注意：在 script 标签里面，与页面是隔离的，并且要按照小程序的写法来写，如上面使用的 view 标签，同时图片文件需要用 base64 的形式。另外样式也要写在 script 标签里面，以 style 的形式写。如果是在弹窗里面写的，还需要注意层级问题。

如果出现下面的弹窗，说明成功啦。但也要确保是否为所指定页面。

总结

使用wx-open-launch-weapp标签跳转到小程序，与使用微信JS-SDK是类似的，需要配置config信息，并引入wx-open-launch-weapp标签。
只有已认证的服务号且绑定域名或者已认证的小程序云开发静态托管的域名下的网页才可以跳转，订阅号目前不支持。

问题排查：没效果/报错？

1.打开wx.config的debug, 根据报错信息一步步处理，直到出现config:ok；

2.出现组件未注册的报错，在app.js里面配置Vue.config.ignoredElements = ['wx-open-launch-weapp'];
3.真机上按钮不显示？wx.config中是否有注入？template标签冲突？层级样式问题？

4.样式问题？如果是vue项目，style也要写在script标签内，如果是其他，用template包裹的，样式写在html标签上

5.跳转失败？使用wx-open-launch-weapp标签中的lanch或error方法判断跳转成功与否

6.兼容问题？vue项目使用history路由，在ios上不生效？
原因：ios下微信会缓存第一次进入的页面地址，如果从微信一级页面跳转到二级页面，由于vue是单页应用，不会刷新页面，vue路由地址变了，和微信缓存的地址不一致，所以在进行wxConfig时传入的url和微信缓存的url不一致会导致jsdk调起失败，进而导致 wx-open-launch-weapp 无法生效。
解决：

// 刷新一下当前页面
reloadPage() {
  if(!this.isIos) return;
  const currUrl = location.href;
  const isReload = currUrl.indexOf("?reload=1") > -1 ? true : false;
  if (!isReload) {
    location.replace(currUrl + "?reload=1");
  }
},

扩展

1.公众号跳转小程序的其他方式

公众号自定义菜单栏设置小程序链接
通过客服消息、订阅消息、模版消息跳转到小程序
在公众号文章中通过小程序码或小程序卡片跳转到小程序
通过卡劵跳转到小程序

2.小程序跳转到公众号文章/内嵌h5

使用web-view打开公众号文章或跳转网页，
使用official-account公众号关注组件
h5返回小程序:
web-view网页中使用js-sdk提供的接口wx.miniProgram.navigateTo等
直接点击手机返回键，让它自动根据层级返回；

3.小程序跳转到小程序

使用wx.navigateToMiniProgram接口自动跳转至其他小程序

4.App打开小程序

移动应用（APP）拉起小程序功能

5.小程序跳转到APP

将 button 组件 open-type 的值设置为 launchApp.(打开App)

6.公众号/微信网页h5跳转到APP

使用 wx-open-launch-app 标签

公众号/h5 跳转到小程序填坑指南