微信浏览器跳转到UNIAPP打包的App

提醒：本文最后更新于 952 天前，文中所描述的信息可能已发生改变，请谨慎使用。

前几天有朋友问我怎么从微信浏览器中跳转到UNIAPP打包的APP，我也有点好奇；折腾了两天踩了几个小坑后算是成功了，那就顺便记录下，说不定还能帮到别人。

准备工作

首先需要一个公众号(服务号)类型，这个在微信公众平台进行注册； 其次还需要在微信开放平台注册一个移动应用，公众号和移动应用主体必须是同一家公司。

在公众号管理后台配置JS接口安全域名，设置接口IP白名单，生成AppId和AppSecret。 然后在移动应用管理后台绑定公众号，并绑定对应的移动应用，这里可以看微信的文档。

网页代码部分

这里其实并不复杂，首先在head引入微信的js资源文件：

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

html部分核心就是这个wx-open-launch-app标签，里面的text/wxtag-template插槽部分可以自己改写和调整样式。

<wx-open-launch-app id="launch-btn" appid="wx11111111111" extinfo="{}">
    <script type="text/wxtag-template">
        <style>
            .btn { 
                width: 253px;
                height:73px;
                border: none;
                border-radius: 10px;
                background: red;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;

            }
        </style>
        <button class="btn">
            前往App查看
        </button>
    </script>
</wx-open-launch-app>

这里的AppId填写所需跳转的移动应用的AppID，extinfo可以携带参数传递给App，我用的是JSON字符串。

JS部分，边看代码边说吧。

let path = location.href;
const hashIdx = location.href.indexOf('#');
if (hashIdx !== -1) {
    path = location.href.slice(0, hashIdx);
}
path = encodeURIComponent(path);
// 这里就是获取当前网页的完整路径，hash号部分不要
// 路径需要转义，这里视你和后端接口交互的方式而定

fetch(`/api/js_config?url=${path}`)
    .then(res => res.json())
    .then(res => {
        // 向后端接口获取配置信息

        wx.config({
            ...res.data,
            debug: false,
            jsApiList: ["scanQRCode"],
            openTagList: ['wx-open-launch-app']
        });
        // 配置相关信息


        wx.ready(() => {
            const params = {
                id: 123,
                uid: 123,
                from: "balal"
            };
            // 要传递给App的相关参数

            const btn = document.querySelector("#launch-btn");
            btn.setAttribute("extinfo", JSON.stringify(params));
            // 序列化后赋值给标签

            btn.addEventListener('error', function (e) {
                // 注意这里有坑，我当时用手机测试的，alert(JSON.stringify(e))会提示{isTrusted:false}
                // 错误信息一直拿不到，直到看见下面这个帖子我才知道这个参数不能直接序列化
                // 所以可以自己写个函数把e.detail转成字符串形式来查看错误信息
                // https://developers.weixin.qq.com/community/develop/doc/000a20e8884ab074cb8b6ef1b5b800

                alert('未安装App');
            });
        });

    })

UNIAPP 打包APP

按照UNIAPP文档的说法，获取启动时的参数可以使用uni.getLaunchOptionsSync或者uni.getEnterOptionsSync接口，然而实际应用时这两个接口提供的参数中并没有微信网页中传递的参数；App.vue中onLaunch提供的options参数中也找不到。

经过一番搜索看到了这个帖子，使用plus.runtime.arguments就可以获取到传递的参数，实验一番后果然可以，相关文档见此。

代码比较简单：

// App.vue

export default {
    onLaunch() {
        if(plus.runtime.arguments != ""){
            try{
                const data = JSON.parse(plus.runtime.arguments);
                // 将传递过来的JSON字符串反序列化为对象
            } catch(e) {

            }
        }
    }
}