公司最近提了一個不常見的需求，就是在微信外環(huán)境靜態(tài)h5跳轉(zhuǎn)小程序并且還要傳參，在查閱了大量資料后成功解決。
官網(wǎng)地址??靜態(tài)網(wǎng)站 H5 跳小程序
一，環(huán)境準備
1.開通微信云開發(fā)和靜態(tài)網(wǎng)站
點擊微信開發(fā)者工具中的云開發(fā)
.
?現(xiàn)在是可以免費體驗1個月，開通后進入云開發(fā)控制臺點擊更多-靜態(tài)網(wǎng)站，直接點擊開通，等初始化，可能需要點時間。
2.打開權(quán)限設(shè)置
點擊設(shè)置-權(quán)限設(shè)置，把紅框里面的那個勾上
?二，創(chuàng)建云開發(fā)小程序
1.創(chuàng)建
點擊微信開發(fā)工具左上角【項目】-【新建項目】，后端服務(wù)選擇微信云開發(fā)，AppId記得填開通了云開發(fā)小程序的AppId
?文章來源地址http://www.zghlxwxcb.cn/news/detail-797865.html
創(chuàng)建成功后項目文件因該長這樣
2.設(shè)置云開發(fā)環(huán)境
在cloudfunctions 目錄上邊單擊鼠標右鍵，設(shè)置當(dāng)前環(huán)境，選擇前邊創(chuàng)建的云環(huán)境
?
?3.創(chuàng)建云函數(shù)
官網(wǎng)云函數(shù)pubilc：點擊下載
?下載后目錄應(yīng)該是這個樣子
?打開h5-open-miniprogram-cloudfunctions文件夾，將里面的public文件夾復(fù)制到云開發(fā)小程序中的?cloudfunctions 目錄下。
?
?
?4.修改跳轉(zhuǎn)小程序路徑和傳參
編輯 public/index.js 文件，將 getUrlscheme函數(shù)中的path改成要調(diào)起小程序的頁面路徑
?傳參的話要注意兩個地方，這兩個地方一定要傳參和接受參數(shù)
?5.安裝依賴
鼠標放到public目錄上，單擊鼠標右鍵，快捷菜單選中"在內(nèi)建終端中打開",然后運行?npm install?安裝依賴
?6.上傳部署云函數(shù)
7.修改云函數(shù)權(quán)限
點擊云開發(fā)控制臺，云函數(shù)-云函數(shù)權(quán)限-修改-允許所有用戶訪問
?8.編寫及上傳h5靜態(tài)頁面到云開發(fā)環(huán)境
在之前下載的官網(wǎng)云函數(shù)pubilc中，找到這HTML文件
?在這個html文件中寫一個方法來獲取路由上的傳參
let id = 0
//獲取路由參數(shù)
function GetQueryString(name) {
let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
let r = window.location.search.substr(1).match(reg) // search,查詢？后面的參數(shù)，并匹配正則
if (r != null) {
return unescape(r[2])
}
return null
}
id = GetQueryString('id')//這個地方你連接后傳參名是什么就傳什么。例:www.baidu.com?id=123,所以我這里是id需要修改的地方就只有這幾處
?
?云環(huán)境Id在這個地方
?
?
?9.上傳h5頁面到云開發(fā)環(huán)境
?云開發(fā)控制臺——更多——靜態(tài)網(wǎng)站——文件管理，點擊上傳文件，選擇上邊改好的h5頁面即可
?10.訪問
H5上傳成功后在這個地方復(fù)制域名到其它瀏覽器測試跳轉(zhuǎn)
?三、小程序接收傳參
文章來源：http://www.zghlxwxcb.cn/news/detail-797865.html
?
到了這里，關(guān)于微信外環(huán)境靜態(tài)h5跳轉(zhuǎn)小程序，如何傳參?的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
