微信浏览器标签wx-open-launch-weapp的使用

2020年08月21日 10:32 · 阅读 902

最近研究H5跳转小程序偶然发现了wx-open-launch-weapp这个标签，可以在微信浏览器中直接打开小程序，抱着激动的心情试了一下，
按照官方的写法写了之后一运行，want，显示不出来，于是找遍各种文档，终于找到了解决方法。

本方法是在HTML页面中使用的，vue估计也差不多，区别不会太大
首先是要引入微信sdk的，最低都需要1.6.0以上的版本
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script>
其次，我引入了jq，因为需要发送ajax请求
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
下面是js代码
复制代码

	// 首先需要获取签名等信息
    $.ajax({
    	url: "后台给的链接",
        data: {
            local_url: window.location.href.split('#')[0],
            version: '4.1.0',
            appKey: 'QTSHE_WECHAT',
            deviceId: Math.random()
        },
        success(res){
        	let data = JSON.parse(res);
            // 调用微信SDK的功能
            wx.config({
            	debug: true, // 开启这个之后如果成功失败都会有alert打印
            	appId: '公众号的APPId', // 必填，公众号的唯一标识
                // 关于签名的三条数据都是后台返回的
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature, // 必填，签名
                jsApiList: [
                    'checkJsApi',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo',
                    'hideMenuItems',
                    'showMenuItems',
                    'hideAllNonBaseMenuItem',
                    'showAllNonBaseMenuItem',
                    'translateVoice',
                    'startRecord',
                    'stopRecord',
                    'onRecordEnd',
                    'playVoice',
                    'pauseVoice',
                    'stopVoice',
                    'uploadVoice',
                    'downloadVoice',
                    'chooseImage',
                    'previewImage',
                    'uploadImage',
                    'downloadImage',
                    'getNetworkType',
                    'openLocation',
                    'getLocation',
                    'hideOptionMenu',
                    'showOptionMenu',
                    'closeWindow',
                    'scanQRCode',
                    'chooseWXPay',
                    'openProductSpecificView',
                    'addCard',
                    'chooseCard',
                    'openCard'
                ],
                openTagList: [
                    'wx-open-launch-weapp',
                    'wx-open-launch-app'
                ] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
            });
        }
    });
    // 配置完成之后就可以使用wx-open-launch-weapp标签啦
    .btn {
          width: 100%;
          height: 100px;
          padding: 12px;
          font-size: 16px;
      }
    <div style="width: 100%; height: 100px">
        <wx-open-launch-weapp id="launch-btn" username="需要跳转的小程序的原始id" path="/pages/index/index.html">
        	// 官方例子上面是template，但是由于我是在html文件内，所以改成script标签，type="text/wxtag-template"不能漏掉
            <script type="text/wxtag-template">
                <style>
                    .btn {
                        width: 375px;
                        height: 50px;
                        font-size: 16px;
                    }
                </style>
                <button class="btn">打开小程序</button>
            </script>
        </wx-open-launch-weapp>
    </div>
    // 如果上面的js部分都是没有问题的话，那么将写完的代码上传至服务器，这样应该就可以看到有按钮出现了。
    
复制代码