H5跳转小程序解决方案

H5 跳转小程序的一些方法

H5 跳转小程序可以使用以下方法：

• url Schema 跳转小程序(任意 H5 跳转)参考文档

• 开放标签跳转小程序(该方法只能在微信环境内跳转) 参考文档

另：

• 短信打开小程序参考：参考文档
• NFC 打开小程序参考：参考文档

使用开放标签跳转小程序

在微信环境内可以使用 wx-open-launch-app跳转到小程序：

1.配置 JS 接口安全域名

使用标签之前需要在公众号需要配置安全域名，也就是 H5 部署的域名，需要将微信的验证文件后添加到服务器上，验证成功后才可添加域名，而只有添加的域名才能渲染微信开放标签，否则不会渲染开放标签

2.配置必要参数

在配置好安全域名之后，还需引入 SDK，请求必要参数进行权限验证，验证失败同样不会渲染标签

2.1 引入 SDK

在 index.html 引入如下 JS 文件: http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持 https）,如果无法访问可以使用这个链接：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持 https），还可以下载 weixin-js-sdk 之类的 npm 包

2.2 请求与配置权限验证参数参数

使用 wx.config 配置需要验证的参数：

• signature(必填): 签名
  signature 又由 ticket、nonceStr、timestamp、url 加密而成，是一个加密的字符串

  • ticket: 是公众号用于调用微信 JS 接口的临时票据，一般是由后端使用access_token调用微信接口获取再返回前端
  • timestamp：当前时间的时间戳
  • noncestr：随机字符串
  • url: 使用到开放标签的域名，可以使用 alert(location.href.split(‘#’)[0]) 确认
  • openTagList: 接收一个数组，此处传入我们使用的开放标签 [‘wx-open-launch-weapp’]，注意，官方文档此标识的开放标签名是错误的，参考我给出的开放标签名
  • jsApiList: 接收一个数组，需要使用的 JSAPI，此处随便填一个即可，js api 列表
  • debug: 非必填，为 true 时会给出一个参数验证状态说明的弹框

  字符串拼接： 之后再以下面的形式拼接成字符串: jsapi_ticket=[ticket]&noncestr=[nonceStr]&timestamp=[timestamp]&url=[url]

  加密：字符串拼接完成时候可以使用 js-sha1 的 sha1 方法进行加密 得到 signature

  配置参数：使用 wx.config 配置上面的参数

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

2.3 添加开放标签

这里我时再 Vue 中使用开放标签

<van-dialog v-model:show="model">
    <template #title>提示</template>
    <template #default>
        <div class="content">恭喜您，已成功领取优惠劵！</div>
    </template>
    <template #footer>
        <div class="footer-con">
            <wx-open-launch-weapp
                id="launch-btn"
                path="pages/index/index"
                appid="wx03d2acf865327b67"
                @launch="launch"
                style="width: 100%; height: 50px; display: flex"
            >
                <component :is="'script'" type="text/wxtag-template">
                    <button
                        class="btn"
                        style="
                width: 100%;
                height: 40px;
                border: none;
                background-color: #38bfab;
                border-radius: 10px;
                color: #fff;
              "
                        @launch="launch"
                    >
                        确认
                    </button>
                </component>
            </wx-open-launch-weapp>
        </div>
    </template>
</van-dialog>

在wx-open-launch-weapp中我们需要添加:

<script type="text/wxtag-template">
    ... 点击的标签
</script>

在 Vue 中直接添加 script 标签会报错，我们使用 <component :is="'script'"></component> 标签形式避免这个报错

在上面的代码中可以看到我使用了 Vant UI 组件中的弹框，这是因为 微信开放标签跳转小程序必须发生点击事件才能跳转，这里我将标签伪装成弹框的确认按钮来引导用户点击

以上就是使用 开放标签从 H5 跳转小程序，另外从 APP 跳转小程序同样也可以使用开放标签实现，现在我暂时并未研究，待我学成归来另开文章讲解 (>.<)