微信内部浏览器唤起小程序

Posted 2021-09-12 这个少年有点热丶

如需求在微信内希望能够直接跳转到小程序里，比如从公众号页面跳转到小程序中去完成什么操作。这篇文章简单介绍一下微信给的一个跳转小程序的开放标签，从而实现微信内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="" ></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;等，尽量不要写在插槽模版的节点中，请声明在标签或其父节点上。

6、只有移动端此功能好使，PC微信打开页面不显示wx-open-launch-weapp，只能通过其他方式实现跳转小程序的功能。

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