微信H5页面跳转小程序，wx-open-launch-weapp总结_h5使用wx-open-launch-weapp标签字体大小调整

官方文档：微信网页开发-开放标签说明文档

示例代码

#launch-btn {
    width: 50%;
    background: transparent;
}
1
2
3
4

<wx-open-launch-weapp id="launch-btn"
                      username="gh_xxxxxxxxxxxx"
                      path="pages/home/home.html">
    <template>
        <style>.btn{
            display: inline-block;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            touch-action: manipulation;
            box-sizing: border-box;
            height: 44px;
            line-height: 44px;
            font-size: 16px;
            width: 100%;
            background: #d84e43;
            border-color: #d84e43;
            border-radius: 4px;
        }</style>
        <button class="btn">打开小程序</button>
    </template>
</wx-open-launch-weapp>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

	/* cfg从后端接口获取 */
    function weixinJsConfig(cfg) {
        wx.config({
            debug: true,
            appId: cfg.appId,
            timestamp: cfg.timestamp,
            nonceStr: cfg.nonceStr,
            signature: cfg.signature,
            jsApiList: [],
            openTagList: ['wx-open-launch-weapp']
        });
        wx.checkJsApi({
            jsApiList: [],
            success: function (res) {

            }
        });
        wx.error(function (res) {

        });
    };
    weixinJsConfig();
    var btn = document.getElementById('launch-btn');
    btn.addEventListener('launch', function (e) {
        console.log('success');
    });
    btn.addEventListener('error', function (e) {
        console.log('fail', e.detail);
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

注意事项

1. <wx-open-launch-weapp>作为普通标签使用，建议设置一个宽度。

最佳实践：
将<wx-open-launch-weapp>的外观调整为你需要的按钮的样式（不必设置高度），即除了高度之外，所有样式在此标签上设置好。
template内部的<button>只根据需要设置height，并将background设置成transparent即可。
这样做，是因为<wx-open-launch-weapp>的样式可以很容易从外部进行控制，页面的中的一些class可以很好地复用。

3. username属性指定需要跳转小程序的原始Id（一般是以gh_打头），而不是appId。

4. path属性指定跳转到小程序内部哪个页面，需要加.html后缀。

5. 引入weixin.js

   <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
   1

6. wx.config()的时候指定openTagList

   wx.config({
       ...
       openTagList: ['wx-open-launch-weapp']
   });
   1
   2
   3
   4