H5 跳转小程序

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

云开发托管静态页面

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

自己开发

小程序 APPID 实现

目前有两种方式进行跳转分别为 URL SchemaURL 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-weappshadow DOM,样式不可在全局定义
  3. 请确认config中的配置项是否正确,如 jsApiList 数组不能为空