H5跳转小程序填坑笔记

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

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

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

一般会在这里遇到的问题： 1、63002 签名错误，只要检查授权传入的参数，一般是url的问题 解决办法：

var url = location.href.split(#)[0];//当前的url

2、40048,invalid url domain [20210205 09:51:59][] 的问题是因为没有做服务号中做JS接口安全域名验证，在公共验证即可； 3、用vue框架开发template不生效问题，可以替换为以下代码：

<wx-open-launch-weapp data-v-7d0e6bf0="" id="launch-btn" username="小程序原始id" path="小程序路径.html?id=XXX(可以带参数，在小程序的onload()接收)"><script type="text/wxtag-template"><div style="width: 210.43199999999996px; height: 110.69599999999998px;"></div></script></wx-open-launch-weapp>

4、使用单页面的H5可以使用内联样式：

<wx-open-launch-weapp id="launch-btn" username="小程序原始id" path="小程序路径.html?id=XXX(可以带参数，在小程序的onload()接收)" style="padding: 12px;width: 100%;height: 50px;">
        <template>
            <button class="btn" style="padding: 12px;width: 100%;height: 50px;">打开小程序</button>
        </template>
</wx-open-launch-weapp>

5、必须引入jweixin-1.6.0.js

注意：只有config认证成功，按钮才会生效，功能才会生效。

三、效果展示

四、完整代码