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

一. 准备工作

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

步骤一：绑定域名

登录微信管理后台， 在开发-开发管理-开发设置-服务域名， 把你 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 签名是需要从开发者服务器上去获取。

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

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

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

官方给的 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'></script>

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

总结

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

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不一致会导致jssdk调用失败，进而导致 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^[4]打开文章或跳转网页，
• 使用official-account组件
  h5返回:
  web-view网页中使用js-sdk提供的接口wx.miniProgram.navigateTo等
  直接手机返回键，让它自动根据层级返回；

3.跳转到

• 使用wx.navigateToMiniProgram接口自动跳转至其他

4.App打开

• ^[5]

5.跳转到APP

• 将 button 组件 open-type 的值设置为 launchApp.(打开App^[6])

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

• 使用 wx-open-launch-app 标签
  

参考资料