第一次写文章，还有点紧张，写的不好，还希望多多指正～
前期准备：
1、绑定js的安全域名 登陆微信公众平台，进入公众号设置的功能设置，里面填写安全域名
2、添加白名单
3、引入js文件 在需要调用JS接口的页面引入如下JS文件： res.wx.qq.com/open/js/jweixin-1.6.0.js 支持https
4、已认证的服务号，已认证的非个人主体的小程序
开发
1、通过config接口注入权限验证配置并申请开放标签
return new Promise((resolve): void => {
const script = document.createElement('script');
const body = document.getElementsByTagName('body')[0];
script.type = 'text/javascript';
script.async = true;
script.src = '//res.wx.qq.com/open/js/jweixin-1.6.0.js';
body.append(script);
script.onload = () => {
wxsdk(encodeURI(window.location.href)).then((res) => {
console.log(res.data, "124")
window.wx.config({
beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.data.data.appId, // 必填，企业微信的corpID
timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
signature: res.data.data.signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法
jsApiList: res.data.data.jsApiList,, // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
openTagList: ['wx-open-launch-weapp', 'wx-open-launch-app']
});
window.wx.ready(function(){
resolve();
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
window.wx.error(function(res:any){
console.log(res)
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
});
};
})
}
2、使用微信开放标签 wx-open-launch-weap 页面中
<wx-open-launch-weapp
id="launch-btn"
style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
username="gh_xxxxxx"
path="pages/index/index.html">
<script type="text/wxtag-template">
<div style={{
padding: "0 30px",
display:"flex",
alignItems: "center",
backgroundColor: "#3bc48b",
color: "#fff",
borderRadius: "10px"
}}>找ta了解更多</div>
</div>
</script>
</wx-open-launch-weapp>
这个标签可以让H5跳转到小程序,在微信浏览器上才会有效果，如果你想要实现按钮固定定位，需要在wx-open-launch-weapp 外面包一层盒子给上定位，给标签里面的固定定位是没用的。
有时候会发现这样写即使验签通过了，在微信浏览器上也没有显示按钮，这是因为放在type=”text/x-template”中的内容将不会被浏览器解析，不被执行，不被显示，它只是默默地隐身在那里。放在哪里有什么用呢，就是等页面加载完成后在获取到它对齐进行渲染，这个渲染的过程通常是使用各种模版引擎来完成的。
我这里有个点现在也没弄明白〈script type="text/wxtag-template"〉里面包裹的内容始终没有显示出来，于是就换用另一种思路。
container为唤起小程序的区域（相对定位），而content则是该区域的展示，wx-open-launch-weapp 则是占满了唤起的区域（绝对定位），此处省略代码
这里有几个特别注意的点：
1、username：必须是小程序的原始Id
2、为了得到微信的标签script需要加上type="text/wxtag-template"里面的样式必须是行内样式
3、path路径有些需要在后面加.html,有些不需要，这个要根据自己跳转的小程序确认好
好了，先到这里吧。
