H5跳转小程序实现

H5 跳转小程序

在小程序云开发功能上线之前，我们只能通过鉴权功能跳转小程序，但是云开发功能上线后，增加了一种跳转的方式

云开发托管静态页面

非个人主体并且已认证的(微信认证)小程序，使用云开发静态网站托管的网页，可以免鉴权跳转任意合法合规的小程序。即可以在微信内部浏览器的 H5 跳转小程序，也可以在微信外部浏览器或其他部分 App （如企业微信、QQ 等）跳转微信小程序。
静态网站网页在微信客户端打开时，wx.config 可以传入小程序 AppID 并且不需计算签名，也就是免鉴权即可使用跳转小程序的能力。
此时进行wx.config设置不需要计算签名信息

自己开发

小程序 APPID 实现

目前有两种方式进行跳转分别为 URL Schema 和 URL Link

通过服务端鉴权获取链接后，通过<a>标签跳转即可

注意：以上两个功能针对非个人主体小程序

公众号 APPID 实现

自己开发实现跳转小程序需要前后端配合并且需要配置业务域名，申请一个公众号（非订阅号）后，通过公众号的开放能力使用 jssdk 实现跳转
只能在微信内网页使用，示例如下

wx.config({
  appId: data.appId, // 必填，公众号的唯一标识
  timestamp: data.timestamp, // 必填，生成签名的时间戳
  nonceStr: data.nonceStr, // 必填，生成签名的随机串
  signature: data.signature, // 必填，签名
  jsApiList: ['closeWindow'], // 必填，需要使用的JS接口列表
  openTagList: ['wx-open-launch-weapp'],
  debug: false // 必填，签名
})

<wx-open-launch-weapp id="launch-btn" username={appId} path="pages/index/index?url=${encodeURIComponent(url)}">
  <template>
    <style>
      .btn {
        width: 100%;
        height: 100px;
      }
    </style>
    <button class="btn"></button>
  </template>
</wx-open-launch-weapp>

注意：

1. wx-open-launch-weapp 为公众号开放能力，使用前请确认权限是否正确，可以通过配置debug: true来验证权限是否正确

2. wx-open-launch-weapp 为 shadow DOM，样式不可在全局定义

3. 请确认config中的配置项是否正确，如 jsApiList 数组不能为空