微信开放标签wx-open-launch-app

2023-02-16 本文已影响0人博尔茨杰

一、介绍

微信开放标签地址

微信 JS 接口签名校验工具

参考网址

1 该标签做什么用的？

在微信内置浏览器端打开App，简单说就是在微信端打开某网页，可以在网页中打开App;

注：打开的网页不能是通过链接进入，而是通过分享的卡片等形式。

2 需求

需求是：通过App分享到微信的卡片，用户打开后，可以点击网页中的某个按钮，如果App存在，则打开该App，并进入指定的页面。App不存在，则进入应用市场的下载页面；

3 前期准备

首先本人通过创建一个简单的HTML页面，App分享到微信端。
配置相关：

服务号需要认证！且服务号和移动应用是同主体，或者有关联关系！
绑定JS接口安全域名：在微信号后台操作；绑定的域名是分享到微信端的网页的域名。
在微信开放平台的应用管理--公众号，关联需要跳转的App。
填写的信息包含：安全域名，移动应用名称，Appid；具体信息视实际情况哈！
以上是开发前的配置准备。

本人开发的思路：客户端页面在初始化时请求服务端中的接口，将网页的url及参数传给该接口（之前就因为网址写死导致一直没有调通），服务端获取到url进行签名算法，回传给客户端签名，时间戳等参数，客户端通过config接口进行权限验证，验证成功后，开放标签便生效。

二、网页代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>微信跳转</title>
    <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>

<body>
    <div>
        <wx-open-launch-app id="launch-btn" appid="wx6d206c87ef5e6785" extinfo="liveOpen">
            <script type="text/wxtag-template">
                <style>.btn { padding: 12px }</style>
                <button class="btn">App内查看</button>
            </script>
        </wx-open-launch-app>
    </div>
</body>

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


    wx.ready(function (sender) {
        // alert('成功')
        // config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中
    });

    wx.error(function (res) {
        // alert('失败')
        // config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名
    });

    var btn = document.getElementById('launch-btn');
    btn.addEventListener('launch', function (e) {
        // alert(e)
    });
    btn.addEventListener('error', function (e) {
        // alert(e.detail.errMsg)
    });

</script>
</html>

总结：在页面初始化时，访问接口，获取到的签名等数据。config验证成功后，开放标签才能展示，如果验证失败，标签是不会展示的。当然，如果你去掉了标签中的script脚本，标签都会显示的，但这样做就没有什么意义了。

三、注意事项

1 开发工具调试：

开发工具的调试，不要在开发工具中直接操作，这样即便代码写的没问题也会报错；用手机扫描该页面的二维码进行调试就行；

2 真机调试

在真机微信端测试时，要通过点击卡片等形式进入，不能直接通过url地址进入网页，否则也是会一直报莫名其妙的错误的！

3 开放标签的动态隐藏

对开放标签做v-if或v-show的隐藏要非常注意。因为开放标签和config的验证是同步进行的，不能先config验证是否成功，再判断是否显示开放标签，这样做，即便config验证通过，开放标签页不能显示；

4 在vue相关框架中报警告

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