H5 Web 页面跳转小程序实践细则

前言

最近在完成H5跳转小程序需求时， 发现了一些问题，也发现了实现微信小程序开发的时候，微信在这方面，增加了诸多限制与邀请。下面就这些问题，我会一一陈述。

需求背景

本次的需求，主要的功能是

1. 短信短链接，点击跳转到小程序页面
2. 微信浏览器，打开页面，点击页面按钮，然后唤起微信跳转到小程序页面
3. 非微信浏览器（比如搜狗，谷歌，友朋等），打开页面，点击页面按钮，然后唤起微信跳转到小程序页面

需求分析

面对这些问题，第一时间去微信开发社区页面，搜索相关问题，最终找到了相应技术实现

1. URL scheme ：获取小程序scheme码，适用于短信、邮件、外部网页等拉起小程序的业务场景。通过该接口，可以选择生成到期失效和永久有效的小程序码，目前仅针对国内非个人主体的小程序开放
2. 引入微信 JDK （jweixin-1.6.0.js）, 使用里面的跳转小程序：wx-open-launch-weapp 来实现，公众号需要后端接口配合返回鉴权参数
3. 使用开放标签打开小程序时调用，注入wx.config的配置信息,使用小程序云开发静态网站托管的网页可以绕过鉴权

技术实现

引入JDK

在需要改功能的页面上引入

<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

代码实现

微信浏览器

微信页面中需要点击按钮获取其他跳转小程序，下面方法只在微信端访问H5页面打开点击跳转小程序才有效。其他环境下无效。

1、页面入口代码

<wx-open-launch-weapp id="launch-btn" username="gh_saxccc2333" path="/pages/out/main">
   <script type="text/wxtag-template">
   		//格式1 --- 按钮类型
        <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>
        //格式2 --- 图片类型
       <img src="https://www.baidu.com/autoUpload/common/0fd4bf14.png" alt="xxxx" style="min-width:150px;min-height:150px;display: block; margin: 0 auto;max-width:200px;max-height:200px;width:auto;height:auto">
       //格式3 --- 自定义样式
       <style>.btn { padding: 12px }</style>
       <button class="btn">打开小程序</button>
   </script>
</wx-open-launch-weapp>

代码解析：

1. username=“gh_saxccc2333”，gh_saxccc2333是小程序的ID
2. path="/pages/out/main"，/pages/out/main 是小程序的页面访问路径
3. ,里面的代码就是页面需要操作的内容块，内容的样式需要在这里面包裹住，无法引用外面的样式，里面的格式，只需要符合HTML编写接口，类似上述代码的三种格式枚举

2、wx.config 实现

fetch(`对接服务端接口`, {
   method: 'GET',
   credentials: 'include'
}).then(res => res.json()).catch(error => {
   reject(error)
}).then(res => {
   if (res && res.code == 200 && res.data) {
       let containerEl = document.getElementById('wechat-web-container')
       let launchBtn = document.getElementById('launch-btn')
       launchBtn.addEventListener('ready', function (e) {
           console.log('开放标签 ready')
       })
       launchBtn.addEventListener('launch', function (e) {
           console.log('开放标签 success')
       })
       launchBtn.addEventListener('error', function (e) {
           console.log('开放标签 fail', e.detail)
       })
       wx.config({
           // debug: true,
           appId: res.data.appId, // 必填，公众号的唯一标识
           timestamp: res.data.timestamp, // 必填，生成签名的时间戳
           nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
           signature: res.data.signature, // 必填，签名，见附录1
           jsApiList: ['chooseImage'], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
           openTagList: ['wx-open-launch-weapp']
       });
       wx.ready(function () {
           console.log("wx.ready")
       })
       wx.error(function(res) {
           console.log("wx.error",res)
       })
       console.log("res-fetch", res)
   } else {
       console.log("res-error", res) 
   }
});

接口获取微信认证的信息，通过wx.config注入，微信开发工具可以测试结果是否成功，如果调试的时候，出现下面情况就代码成功了。

注：如果log里面返回的openTagList 是空数组的话，那么肯定是你使用的公众号，不是认证过的服务号

非微信浏览器

H5 web 页面，在非微信浏览器打开的情况下，跳转小程序，这个就更加简单，只需要调用服务端接口，返回 url-scheme地址 直接跳转就可以了

1、https 对接获取链接

fetch(`服务端接口`, {
    method: 'GET',
    credentials: 'include'
}).then(res => res.json()).catch(error => {
    reject(error)
}).then(res => {
    if (res && res.code == 200 && res.data) {
        window.location.href = res.data
    } else {
        console.log("res-error", res) 
    }
});

接口数据返回的地址类似 weixin://dl/business/?ticket=xxxxx 这样的，然后直接调整就可以了。

2、云开发

（一）引入云开发 Web SDK

<script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>

（二）初始化云

var c = new cloud.Cloud({
  // 必填，表示是未登录模式
  identityless: true,
  // 资源方 AppID
  resourceAppid: 'AppID',
  // 资源方环境 ID
  resourceEnv: 'ID',
})
await c.init()
window.c = c

（三）云调用

async function openWeapp(onBeforeJump) {
 var c = window.c
 const res = await c.callFunction({
   name: 'public',
   data: {
     action: 'getUrlScheme',
   },
 })
 console.warn(res)
 if (onBeforeJump) {
   onBeforeJump()
 }
 location.href = res.result.openlink
}

具体事例，可以参考参考页面的demo2,也可以参考微信官网的云调用

注意事项

1、系统版本要求：
微信版本要求为：7.0.12及以上
系统版本要求为：iOS 10.3及以上、Android 5.0及以上

2、在Vue中使用
开放标签属于自定义标签，Vue会给予未知标签的警告，可通过配置Vue.config.ignoredElements来忽略Vue对开放标签的检查。

3、开放对象

已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

参考页面

H5如何跳转微信小程序？
H5跳转到小程序开发文档
url-scheme 开发文档
H5跳转微信小程序成功案例
H5跳转小程序页面demo1
H5跳转小程序页面demo2