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

如需要在微信内心愿可能间接跳转到小程序里，比方从公众号页面跳转到小程序中去实现什么操作。这篇文章简略介绍一下微信给的一个跳转小程序的凋谢标签，从而实现微信内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小程序”的弹框，点击是就可能失常跳转。