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

Posted 这个少年有点热丶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信内部浏览器唤起小程序相关的知识,希望对你有一定的参考价值。

如需求在微信内希望能够直接跳转到小程序里,比如从公众号页面跳转到小程序中去完成什么操作。这篇文章简单介绍一下微信给的一个跳转小程序的开放标签,从而实现微信内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小程序”的弹框,点击是就能够正常跳转。

以上是关于微信内部浏览器唤起小程序的主要内容,如果未能解决你的问题,请参考以下文章

详谈外部浏览器如何实现复制公众号一键唤起微信添加关注

App唤起微信小程序和回调

外部H5页面内实现一键唤起微信添加好友OR关注公众号

微信小程序调微信支付

app唤起小程序,获取步数将数据返回app

微信内H5页面唤起小程序&App