Table of contents
1. Matters needing attention
- WeChat version requirements: 7.0.12 and above
- System version requirements: iOS 10.3 and above, Android 5.0 and above
- The certified service account , the service account is bound to the webpage under the "JS interface security domain name", and this label can be used to jump to any legal and compliant applet.
- The certified non-personal Mini Program uses the static website developed by Mini Program Cloud to host webpages under the bound domain name. This tag can be used to jump to any legal and compliant Mini Program.
- For pages with CSP requirements, you need to add a whitelist
frame-src https://*.qq.com webcompt: 引入的版本是1.6.0，如（http://res.wx.qq.com/open/js/jweixin-1.6.0.js (support https) or http://res2.wx.qq.com/open/js/jweixin-1.6.0. js (support https) or downloaded version "weixin-js-sdk": "^1.6.0"）- The content in the <script type="text/wxtag-template"></script> tag cannot be displayed in browsers and development tools, and it needs real machine debugging to be effective
2. Use steps
1. Download or import plug-ins
Because I use h5 written by uniapp, I downloaded the plug-in weixin-js-sdk directly from npm
npm i weixin-js-sdk (be sure to download version 1.6.0)
uniapp needs to be introduced in main.js: Vue.config.ignoredElements.push('wx-open-launch-weapp')
2. Import request
uniapp introduces import wx from 'weixin-js-sdk' in the script tag
3. Request wx.config
Here is the signature authentication returned to me by the backend, and the appID fills in the appID of your official account
wx.config({
// debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '填写自己的的公众号ID', // 必填，企业号的唯一标识，此处填写企业号corpid
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.noncestr, // 必填，生成签名的随机串
signature: res.signature, // 必填，签名
jsApiList: ['wx-open-launch-weapp'], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp']
}),
wx.ready(() => {
console.log('成功')
});
wx.error(function(res1) {
console.log('出错', res1, res1.errMsg)
});Note : The signature must return ok, if the signature reports an error, it will not succeed
4. Use in the page
If you are using a vue framework, such as uniapp, to avoid conflicts, use script in the wx-open-launch-weapp tag (requires real machine debugging to be effective )
Ordinary directly use the template
<wx-open-launch-weapp
id="launch-btn"
username="所需跳转的小程序原始id，即小程序对应的以gh_开头的id(gh_xxxxxxxx)"
path="所需跳转的小程序内页面路径"
>
<script type="text/wxtag-template">
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>When you get here, the button to open the applet will be displayed on the page, click to jump
3. Adjust the style
I believe that many friends need other styles or pictures. At this time, we can position the wx-open-launch-weapp tag and style, and set transparency
The outer box and the inner style can define class
<!-- 给最外面的盒子定义你需要的宽高 相对定位 -->
<view style="width: 200px; height: 200px; position: relative;">
<!-- 你自己的样式，可以添加图片和其他样式，只要绝对定位到位置就好了 -->
<view style="width: 200px; height: 200px;position: absolute;top:0px;left: 0px;"></view>
<!-- 给标签里的内容都绝对定位，宽高100% -->
<!-- 不放心可以设置层级z-index:;需要调试的话可以在style里面添加背景颜色background: 'red'; opacity: 0.3;-->
<wx-open-launch-weapp id="launch-btn" username="所需跳转的小程序原始id，即小程序对应的以gh_开头的id(gh_xxxxxxxx)"
path="所需跳转的小程序内页面路径"
style="position: absolute; top: 0; left: 0; width: 100%; height:100% ; opacity: 0;">
<script type="text/wxtag-template">
<style></style>
<view style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0;">
</view>
</script>
</wx-open-launch-weapp>
</view>it's over here
If you still have questions about the style, you can read this article https://www.jianshu.com/p/262658b8d19c
For some details, you can also check the official documentation
WeChat official documentation 
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html