H5 跳转 微信小程序的方法

1.微信的开放标签注意事项：

wx-open-launch-weapp
1.引入 微信 js 文件 https://res.wx.qq.com/open/js/jweixin-1.6.0.js
2. wx.config 手动写入 openTagList: ['wx-open-launch-weapp']
3. wx.ready 下 写入监听事件 ‘launch’
4.样式 固定要 用定位来写，不然样式不生效。

2.html 写法

<div class="swiper-slide">
    <img src="{$_W['attachurl']}{$item['picture']}" class="zjm-banner"
      data-src="{$_W['attachurl']}{$item['picture']}">
      <!-- opacity: 0; -->
    <wx-open-launch-weapp class="launch-btn" username="{$item['wechat_id']}"  path="{$item['link']}">
        <script type="text/wxtag-template">
            <style>
                .zjm-banner{
                    width:100%;
                    height:92%;
                    position: absolute;
                    top: 0.12rem;
                    left: 0.1rem;
                    right: 0.1rem;
                    bottom: 0.05rem;
                    border-radius: 0.1rem;
                    opacity:1;
                }
            </style>
                <img src="{$_W['attachurl']}{$item['picture']}" class="zjm-banner"
                  data-src="{$_W['attachurl']}{$item['picture']}">
        </script>
    </wx-open-launch-weapp>
</div>

3.css 如下

.swiper-slide{
    padding:0.15rem 0.1rem 0rem;
    position: relative;
    overflow: hidden;
}
.swiper-slide .launch-btn{
    width:95%;
    height:92%;
    border-radius: 0.1rem;
    position: absolute;
    top: 0.14rem;
    left: 0.1rem;
    right: 0.1rem;
    bottom: 0.05rem;
    opacity: 0;
    overflow: hidden;
}

4.js

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript">
wx.config({
    debug: false, //调试模式
    appId: '{$wechat_config['appId']}', //
    timestamp: '{$wechat_config['timestamp']}', //生成签名的时间戳
    nonceStr: '{$wechat_config['nonceStr']}', //生成签名的随机串
    signature: '{$wechat_config['signature']}',
    openTagList: ['wx-open-launch-weapp']
});

wx.ready(function () {
   $('.launch-btn').addEventListener('launch', function (e) {
        console.log('success');
   });
   $('.launch-btn').addEventListener('error', function (e) {
        console.log('fail', e.detail);
   });
});
</script>