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>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容