React开发-公众号H5跳转小程序

正需要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>
    )
}