這里給大家分享我在網(wǎng)上總結出來的一些知識，希望對大家有所幫助
背景
我司有智慧功成家APP和對應的小程序，現(xiàn)在已經(jīng)實現(xiàn)APP分享到微信，微信點擊分享鏈接直接進入小程序。
目前有一個問題就是我們APP在網(wǎng)警那邊還沒有完全審批下來，已經(jīng)搞了幾個月了，還不知道啥時能上線。微信對于這類分享是有限制的，可以分享1000次，后面不給分享了。
我們就得想辦法繞過微信分享，查了資料后，發(fā)現(xiàn)【H5跳小程序】是一個不錯的方案。（微信開發(fā)者官方文檔-H5跳小程序）但是照著官網(wǎng)做也是遇到不少坑，在此記錄下，順便梳理一下流程。
PS：該方案不僅可以直接在微信打開小程序，還可以直接從其他應用（如飛書）、或者瀏覽器打開小程序，就是我們需要的效果！
流程
1） 準備環(huán)境
- 開發(fā)者賬號必須是非個人的認證賬號
- 必須是開發(fā)者管理員賬號掃碼登錄微信開發(fā)者工具，否則報沒有權限的錯誤（這里我就踩了很多次坑）
2）開發(fā)靜態(tài)網(wǎng)站
- 需要先開通，云開發(fā) -- 更多 -- 靜態(tài)網(wǎng)站，需要付費的，選擇公司支付即可。
- 參考（微信開發(fā)者官方文檔-H5跳小程序）可以完成百分之八十的工作，里面寫得很明白了，需要準備啥，替換啥。
- 如果只是需要在微信里面打開小程序，那只需要代碼里面的
isWeixin部分的邏輯，其他地方不用管，或者刪除即可。 - 這個靜態(tài)html可以在vscode里面開發(fā)，也可以在微信開發(fā)者工具里面隨便新建一個云開發(fā)項目，在里面寫html。（我的如下圖的
/miniprogram/index.html)
- 動態(tài)設置參數(shù) 我們的路由是需要有動態(tài)參數(shù)的，我們是通過?
setAttribute?處理的，如下圖?wx-open-launch-weapp?標簽的?path?屬性，但是id是外界url參數(shù)傳過來的，于是需要額外處理。
<!-- 1/3 微信環(huán)境 -->
<div id="wechat-web-container" class="hidden">
<wx-open-launch-weapp id="launch-btn" appid="wx5113d940bb040b62"
path="pages/order/infor/main?id=771378468155056130">
<script type="text/wxtag-template">
<style>.action-btn {
width: 670px;
height: 88px;
line-height: 88px;
background: #FF2E22;
border-radius: 44px;
text-align: center;
font-size: 36px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
border: none;
}</style>
<button class="action-btn">去小程序支付</button>
</script>
</wx-open-launch-weapp>
</div>
isWeixin里面增加如下代碼var launchBtn = document.getElementById('launch-btn')
// 動態(tài)設置path
const query = {}
for (const [k, v] of new URL(window.location).searchParams) {
query[k] = v
}
const path = `pages/order/infor/main?id=${query.id}`
launchBtn.setAttribute('path', path)
- 部署出去后的域名是：your-env-name-0eysug01066a9e-1302818703.tcloudbaseapp.com ，然后在后面增加id的query參數(shù)即可。your-env-name-0eysug01066a9e-1302818703.tcloudbaseapp.com/?id=123456
3）開發(fā)云函數(shù) 上面第二步只能滿足在微信里面打開小程序，如果需要支持其他h5環(huán)境也能打開，則需要開發(fā)云函數(shù)。
- 新建一個云函數(shù)，如?
ttt（ttt與html里面的云函數(shù)匹配，默認代碼是public,改為ttt即可）（ 這里我已經(jīng)新建了?ttt, 所以演示的寫的是?xxx。）
- 新建后，代碼是沒有這個云函數(shù)的，需要在開發(fā)者工具中自己創(chuàng)建云函數(shù)的文件夾，在
cloudfunctions里面創(chuàng)建ttt文件夾，然后把官方文檔的index.js復制進去。 - 重點注意1，因為里面用到了
wx-server-sdk，所以需要npm init -y+npm i - 重點注意2，因為代碼里面用到了
getUrlScheme，所以需要再生產(chǎn)一個config.json文件，并配置為如下，否則不會返回openlink, 微信開發(fā)者-參考問答
{
"permissions": {
"openapi": [
"urlscheme.generate"
]
}
}
- 最后?
index.js?也要做修改，接收?query?的參數(shù)
- 然后需要配置權限，還是參考官方文檔。
- 然后發(fā)布云函數(shù)，右擊?
ttt?文件夾，選擇?上傳并部署，不傳node_modules
wx-open-launch-weapp 里面img 要用線上地址
wx-open-launch-weapp 里面img 要用線上地址，不能用本地地址，如下使用本地地址，最終渲染的頁面沒有這個圖片，使用線上地址后正常顯示。
<wx-open-launch-weapp appid="wx-fake-123456" path="pages/order/infor/main?id=771378468155056130">
<script type="text/wxtag-template">
<img src="./img/1-1.png" alt="1-1" width="149" height="55" class="img-1-1">
</script>
</wx-open-launch-weapp>
<wx-open-launch-weapp appid="wx123456" path="pages/order/infor/main?id=771378468155056130">
<script type="text/wxtag-template">
- <img src="./img/1-1.png" alt="1-1" width="149" height="55" class="img-1-1">
+ <img src="https://fake-site.com/img/1-1.png" alt="1-1" width="149" height="55" class="img-1-1">
</script>
</wx-open-launch-weapp>
wx-open-launch-weapp 里面定位要放到父節(jié)點
另外，需要注意以下幾點：
- 頁面中與布局和定位相關的樣式，如
position: fixed; top -100;等，盡量不要寫在插槽模版的節(jié)點中，請聲明在標簽或其父節(jié)點上； - 對于有CSP要求的頁面，需要添加白名單
frame-src https://*.qq.com webcompt:，才能在頁面中正常使用開放標簽。
?把原來放在?.img-1-1?的定位樣式，放到?.img-wrap?上 代碼如下：
<div class="img-wrap">
<wx-open-launch-weapp appid="wx123456" path="pages/order/infor/main?id=771378468155056130">
<script type="text/wxtag-template">
<img src="https://fake-site.com/img/1-1.png" alt="1-1" width="149" height="55" class="img-1-1">
</script>
</wx-open-launch-weapp>
</div>
完結
如果還有不懂的，可以參考?小程序開發(fā)——微信外環(huán)境靜態(tài)h5跳轉小程序
微信開發(fā)者文檔-開放標簽說明文檔文章來源：http://www.zghlxwxcb.cn/news/detail-749296.html
本文轉載于:
https://juejin.cn/post/7295805817055395878
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。
?
文章來源地址http://www.zghlxwxcb.cn/news/detail-749296.html
到了這里，關于記錄--靜態(tài)網(wǎng)站 H5 跳小程序，以及踩坑的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
