微信H5跳轉到小程式
阿新 • • 發佈:2020-11-13
需求
- 需要從微信的H5網頁進入我們自己的小程式。
實現
- 步驟,參見
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
官方文件去載入對應的開放標籤。 - 由於框架的問題,會導致在vue和react中,載入不出來該開放標籤,所以需要做特殊處理。
react處理
- 將開放標籤的程式碼寫成字串,然後傳給一個空的
div
的dangerouslySetInnerHTML
屬性。
const createWeAppHtml = () => { return { __html: `<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" // 這個是小程式的原始ID,直接去小程式的基本設定頁面翻到最下面就能看到 path="pages/index/index.html" > <template> <style> .btn { padding: 18px } </style> <button class="btn">開啟小程式</button> </template> </wx-open-launch-weapp>` } } <div className="btn" dangerouslySetInnerHTML={createWeAppHtml()}></div>
vue
- 由於這個開放標籤是支援動態載入的,所以只需要寫成字串然後動態的插入在對應的標籤裡面就可以了。
react
裡面這樣寫應該也是可以的,不過既然官方提供了原生的插入html
的api
就沒必要用dom
操作。
Mounted() { const html = ` <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" // 這個是小程式的原始ID,直接去小程式的基本設定頁面翻到最下面就能看到 path="pages/index/index.html" > <template> <style> .btn { padding: 18px } </style> <button class="btn">開啟小程式</button> </template> </wx-open-launch-weapp> `; document.getElementById('slot-demo').innerHTML = html; }