关于前端:微信内部浏览器唤起小程序

2次阅读

共计 1639 个字符，预计需要花费 5 分钟才能阅读完成。

如需要在微信内心愿可能间接跳转到小程序里，比方从公众号页面跳转到小程序中去实现什么操作。这篇文章简略介绍一下微信给的一个跳转小程序的凋谢标签，从而实现微信内 H5 跳转小程序的性能。

首先须要配置公众号的 JS 平安域名，在“公众号设置”的“性能设置”里填写“JS 接口平安域名”。

另外这个性能须要微信的 JS SDK 1.6.0 版本 以上能力实现，须要引入 https://res.wx.qq.com/open/js…
1.6.0 版本内才减少了对应的开发标签，低于该版本的都无奈显示。

而后通过 config 接口注入权限验证配置并申请所需凋谢标签, 在 wx.config 里减少 openTagList 标签，内置两个凋谢标签 wx-open-launch-app 微信 h5 唤起本地曾经装置的 app，以及 wx-open-launch-weapp 微信 h5 唤起小程序，操作如下：

wx.config({  
        debug: false,  
        appId: data.appid,  
        timestamp: data.timestamp, 
        nonceStr:  data.nonceStr,
        signature: data.signature,
        jsApiList: [],
        openTagList: [
            'wx-open-launch-app',
            'wx-open-launch-weapp'
        ]
 });

而后就能够应用标签 <wx-open-launch-weapp></wx-open-launch-weapp> 在微信中关上对应的小程序了。

如上面的示例：

 <wx-open-launch-weapp username="gh_**********" path="pages/indexpage/indexpage?pageType=1">
       <script type="text/wxtag-template">
           <div class="top-btn" data-key="1">
               <div class="left-icon"><img id="iconImg" src=""alt=""></div>
               <div class="right-text">
                   <div class="tit-name"> 我的设施 </div>
               </div>  
           </div>
       <style>
           .top-btn{height:3.625rem;display: flex;padding:0 0 0 1rem;margin:1rem 0;align-items: center;border-right:1px solid #F5F5F5;}
           .left-icon{width:3rem;height:3rem;}
           #iconImg{width:3rem;height:3rem;}
           .right-text{font-size: 1rem;color: #333333;padding-left:.5rem;}
       </style>
   </script>
</wx-open-launch-weapp>

须要留神的几点：

1、必须是已认证的服务号并且必须是已配置了 js 平安域名

2、wx-open-launch-weapp 标签有两个参数，username 是所需跳转的小程序原始 id，即小程序对应的以 gh_结尾的 id，path 为所需跳转的小程序内页面门路及参数，参数能够用 query 的模式传。

3、插槽模版及款式均须要通过 <script type=”text/wxtag-template”></script> 进行包裹，因为插槽中模版的款式是和页面隔离的，因而须要留神在插槽中定义模版的款式。

4、因为插槽是与页面隔离的，所以应用相对路径拿图片之类的资源不太好使，所以如下面例子中的 img 最初我是给了 src 一个 http 的资源。

5、页面中与布局和定位相干的款式，如 position: fixed; top -100; 等，尽量不要写在插槽模版的节点中，请申明在标签或其父节点上。

以上，就能实现在微信中关上小程序的性能，会在点击具体元素的时候，弹出“是否跳转到 XXX 小程序”的弹框，点击是就可能失常跳转。

正文完