H5跳转小程序填坑笔记

一、H5跳转小程序必须满足的几个条件

1、开发使用者必须是已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
2、开发使用者必须是已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。
3、必须部署到正式服务器。
4、必须是在已认证的服务号中做JS接口安全域名验证。

注意：1、2两个条件必须满足其中一个；3、4两个条件必须满足，否则标签中的按钮不会显示（微信文档不讲武德，写的不清楚，稍微不注意就会掉坑）。
官方文档入口：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

二、通过config接口注入权限验证配置并申请所需开放标签，否则标签按钮不会显示

function getWxConfig() {
   
        var url = location.href.split('#')[0];//当前的url
        $.ajax({
   
            type: "POST",
            url: prefix + "/config",
            dataType: 'json',
            data : {
   
                "appId" : "微信公众号的APPID",
                "url" : url
            },
            success: function (data) {
   
                wx.config({
   
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.appId, // 必填，公众号的唯一标识
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.nonceStr, // 必填，生成签名的随机串
                    signature: data.signature,// 必填，签名
                    jsApiList:["updateAppMessageShareData", "updateTimelineShareData", "hideMenuItems"], // 必填，需要使用的JS接口列表
                    openTagList: ["wx-open-launch-weapp"] // 这里必修是这个标签，不然网页标签不生效
                });

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

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