正需要H5跳转小程序的时候 前几天还在发愁怎么改产品, 这几天这个能力就来了, 因为很多人写的是Vue或者js中使用, React一直调试不同, 改了又改 终于通了
前提:
阅读微信官方对开放标签的开发文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
- 公众号必须是认证的服务号
- JS接口安全域名绑定在公众号后台
- wx.config 要设置(jsApiList是必填)
- 官方的Demo 代码不要直接复制,代码里 button没有关闭
- 一定要wx.config调用 ready后才能显示出来
- 本地浏览器不能显示,一定要真机才行, 微信开发者工具也不能显示
- 建议真机环境-备案域名-nginx转发到ngrok/花生壳本地地址调试
- 微信到本地Chrome开发者工具, 建议 https://x5.tencent.com/tbs/guide/debug/season1.html
- 微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。
createWeAppHtml() {
return { __html: '<wx-open-launch-weapp id="launch-btn" username="gh_开头的小程序的原始id" path="/pages/index/index.html?userid=taihealthtest&roomid=120"><template><style> .wx-btn { color: #666; width: 100%; height:100%; display: block; text-aligin:center; }</style><button class="wx-btn">跳转小程序</button></template></wx-open-launch-weapp>' }
}
render() {
return (
<div dangerouslySetInnerHTML={this.createWeAppHtml()}>
</div>
)
}
