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