web页面跳转微信小程序

现在微信开放程度比较宽松了，所以web页面跳转小程序需求很大，先来预览一下：

 

 

接下来咱们看看怎么实现：

1、需要引入微信jssdk：

http://res.wx.qq.com/open/js/jweixin-1.6.0.js(支持https)

需要使用到js-sdk-1.6.0的版本才有支持

2、在页面中配置信息：

   wx.config({

        // debug: true, // 调试时可开启

        appId: '小程序 AppID', // <!-- replace -->

        timestamp: 0, // 必填，填任意数字即可

        nonceStr: 'nonceStr', // 必填，填任意非空字符串即可

        signature: 'signature', // 必填，填任意非空字符串即可

        jsApiList: ['chooseImage'], // 必填，随意一个接口即可 

        openTagList:['wx-open-launch-weapp'], // 填入打开小程序的开放标签名

    })

3、html添加微信支持的开放标签，就是config中openTagList 支持的

<div class="content">

                <wx-open-launch-weapp id="launch-btn"  username="小程序的原始ID（gh_****）" path="落地页">

                    <template>

                        <style>

                            .abtn {

                                width: 100%;

                                height: 381px;

                                display: block;

                                margin: 0 auto;

                            }

                        </style>

                        <button>跳转小程序</button>

                        <div class="abtn"></div>

                    </template> 

                </wx-open-launch-weapp>

        </div>

参考资料：

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

欢迎大家关注公众号：