小程式用webview內嵌h5頁面，實作分享、微信支付功能 ，h5傳參跳轉web-view 微信小程式
前幾天公司頭目給了我個任務 ，用小程式的web view組件來嵌入h5頁面 還要實作小程式右上角的分享功能 ，最重要的是呼叫微信支付（小程式中不能使用之前在瀏覽器中配置的支付功能，只能呼叫小程式專屬的api進行支付，） 接到到這個任務，內心還是很開心的,因為…我愛學習啊啊啊，話不多說，進入正題，
web-view：承載網頁的容器，會自動鋪滿整個小程式頁面，個人型別的小程式暫不支持使用 它有三個比較重要的屬性 src bindmessage bindload ，
web view詳情鏈接
先說說整體思路吧 小程式只要有三個頁面就夠了
1.小程式啟動時默認打開的頁面
2.小程式點擊右上角分享 的頁面
3.webview嵌入的h5頁面 當發起支付時會跳轉到wxpay頁面 ,呼叫微信支付
乍一看挺簡單的 實際也不是太難,只是當時爬的坑比較多 結尾的時候會總結坑點，
實作步驟：
- 先在web view里引入H5頁面 此步驟比較簡單
- 引入頁面后實作右上角點擊分享功能 （提示：web view 不支持分享朋友圈）
具體實作步驟：
1.利用web view 將h5嵌入小程式
//index.vue頁面
// 注意: @message 事件是uniapp中的web-viwe 小程式用的是 bindmessage
<web-view src="https://www.baidu.com/" @message="handlePostMessage"></web-view>
- 這個步驟比較簡單 @message/ bindmessage 屬性的是用來接收h5傳遞過來的引數 分享時候會用到 下面會講
2.小程式點擊右上角分享
要實作分享功能需先了解 以下內容
- onShareAppMessage(Object object)
監聽用戶點擊頁面內轉發按鈕（button 組件 open-type=“share”）或右上角選單“轉發”按鈕的行為，并自定義轉發內容，
注意：只有定義了此事件處理函式，右上角選單才會顯示“轉發”按鈕 - web-view 是一個 web 瀏覽器組件，可以用來承載網頁的容器，會自動鋪滿整個頁面 里面有個屬性
@message 網頁向應用 postMessage 時，會在特定時機（后退、組件銷毀、分享）觸發并收到訊息，
注意:@message 是uniapp中web-viwe的屬性 小程式用的是 bindmessage (當時沒注意在這卡了一個小時)
在index.vue里面加如下代碼
// 用戶點擊右上角分享 res.webViewUrl是跳轉時攜帶的引數
onShareAppMessage: function(res) {
//console.log（res）里面會有個 res.webViewUrl 指的是當前所在頁面的網址
return {
// path --必打開分享時跳轉到的頁面 默認是當前頁面，必須是以‘/’開頭的完整路徑
// title -- 設定轉發時的標題 默認是小程式的名稱
// imageUrl -- 設定轉發時的圖片 不傳入 imageUrl 則使用默認截圖，
path: '/pages/share/share?url=' + encodeURIComponent(res.webViewUrl)
};
},
在share.vue中添加如下代碼
<web-view :src="h5url" @message="handlePostMessage"></web-view>
script添加以下代碼
//接收引數 onShareAppMessage 中path 傳過來的引數
onLoad: function(e) {
this.h5url = decodeURIComponent(e.url)
}
以上步驟解釋：
說白了就是小程式需要從index頁面 跳到了share頁面 ， index用到了 onShareAppMessage 來進行頁面的跳轉 ， share用onLond 接收引數并賦值給自己頁面的web-view
- index中的web view是打開小程式首次引入的頁面，用戶點擊右上角分享 后通過onShareAppMessage里面的 path路徑跳入到 share.vue頁面，
- share.vue 用onLond 接收引數 把接收到的引數（網址）放入到 share.vue 里web-viw組件中的 src屬性下 然后點擊右上角分享功能就實作了，
- 用到了encodeURIComponent /decodeURIComponent 是防止傳參時遇見特殊字符會亂碼問題
以上步驟未用到H5 給小程式傳參 如需使用H5傳遞引數實作分享還需在H5添加以下代碼
//思路：先判斷環境 再執行 wx.miniProgram.postMessage();
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
//ios的ua中無miniProgram，但都有MicroMessenger（表示是微信瀏覽器）
wx.miniProgram.getEnv((res)=>{
if (res.miniprogram) {
wx.miniProgram.postMessage({ data: data });
}else{
alert('在微信內，但是不在小程式內')
return false;
}
})
}else{
console.log('在微信外')
}
3.在小程式中呼叫微信支付功能
呼叫微信支付原因上面已經做過解釋 想要實作功能之前的先搞懂小程式支付流程 小程式支付流程
H5調起微信支付時 用wx.miniProgram.navigateTo 設定跳到 wxpay頁面
wxpay.vue頁面
<template>
//h5調起微信支付時會跳到 wxpay頁面
</template>
<script>
export default {
data() {
return {};
},
created() {},
methods: {
// 生命周期函式--監聽頁面卸載
onUnload :function() {} //支付完成后 手機左滑時會出現很尷尬的事 相信你會用到這個生命周期 原理不解釋了 寫了幾個小時沒精力了
//生命周期函式--監聽頁面加載
onLoad: function(option) {
if (option) {
//option 有H5頁面傳遞過來的資料
this.setLoading(option);
} else {
wx.navigateBack();
}
// console.log(option);
},
setLoading: function(option) {
var that = this;
// 呼叫登錄介面獲取openid
wx.login({
success: function(res) {
// 成功會回傳： {errMsg: "login:ok", code: " 獲取用戶OpenID的ticket"}
that.getOpenId(res.code, option);
// console.log(res);
}
});
},
getOpenId: function(jsCode, option) {
var that = this;
var params = {}; //這里就是調介面拼湊要給后端提供的引數
params.key = option.key,
params.pay_sn = option.pay_sn,
params.password = option.password,
params.rcd_pay = option.rcb_pay,
params.pd_pay = option.pd_pay,
params.integral = option.integral,
params.payment_code = option.payment_code,
params.payment_jscode = jsCode, //把獲取到的code傳給后端 (必須)到時候退款也會涉及到
wx.request({
url: 'https://www.xxx.com/mobile' + '/index.php?act=member_payment&op=wxa_pay', //引入的https地址
method: 'post',
header: {
'content-type': 'application/x-www-form-urlencoded' // 默認值
},
data: params, //傳遞的引數 后端會回傳一部分 你這里只需要吧 獲取用戶OpenID的ticket"
success: function(res) {
that.getPrePayId(res.data.datas);
},
fail: function(res) {
console.log(res);
wx.showModal({ title: '網路超時', content: '重繪重試', showCancel: !1 });
}
});
},
getPrePayId: function(res) {
var that = this;
wx.requestPayment({
//成功之后，呼叫小程式微信支付
timeStamp: res.timeStamp,
nonceStr: res.nonceStr,
package: res.package,
signType: res.signType,
paySign: res.paySign,
success: function(res) {
wx.showToast({
title: '支付成功',
icon: 'success',
duration: 1650
}),
console.log('支付成功');
},
fail: function() {
wx.showToast({
title: '支付失敗',
icon: 'clear',
duration: 1650
}),
console.log('支付失敗');
}
});
}
}
};
</script>
H5代碼
// 小程式支付函式
mini_program_pay = function (queryParam ) {
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
//ios的ua中無miniProgram，但都有MicroMessenger（表示是微信瀏覽器）
wx.miniProgram.getEnv((res)=>{
if (res.miniprogram) {
console.log('在小程式內')
wx.miniProgram.navigateTo({
url: "/pages/wxpay/wxpay?"+queryParam //小程式的支付地址，queryParam是需要傳遞的商品id等資料
});
return false;
}else{
console.log('在微信內，但是不在小程式內')
return false;
}
})
}else{
console.log('在微信外')
return false;
}
};
寫的時間太長了 有些暈 簡短的說下重點步驟吧 ! 注釋其實說的挺多的，比較詳細
H5要在使用wx.miniProgram.navigateTo 攜帶引數 跳轉到小程式的wxpay頁面 跳轉需要引入js-sdk才可以跳轉 去官網查下最新版本 不然可能會不成功
- H5傳遞過來的引數 wxpay還是用onload接收 (后端需要什么資料 在H5頁面搜集好 直接傳遞過去就行了)
- 然后wx.login() 獲取的code 一定要傳遞給后端 , 會涉支付及退款問題
其實支付這塊稍微復雜一些 但前端做的事情比較少 ， 后端復雜一些.，前端只需要去H5搜集引數傳給小程式，小程式在wx.login()獲取到code 然后再調介面拼接資料，最后wx.requestPayment 直接拉起微信支付就好了
寫到這微信支付也就告一段落了 ~~~
在總結一下 遇到的各種問題吧 !
- 微信開發者工具會有快取 除錯的時候多清清!有時候實作不了功能可能是快取問題
- 微信開發者工具除錯時可以出現跳轉, 而真機除錯不能實作時 也可嘗試清快取, 也可以嘗試運行在瀏覽器端 如果 瀏覽器出現頁面無限跳轉 一定是H5D端 判斷是否是微信環境出了問題 ，我清快取用的是url后邊加時間戳
- 如果在掃描體驗版進入小程式時 頁面不加載 點擊左上角的小房子圖示會重繪 說明體驗版二維碼不對 仔細查看指定路徑
- 如果頁面不跳轉或者是接受不到引數 仔細耐心多看檔案.
- index中的 src末尾得加.html 不然體驗版會出現一些小問題.
- wx.requestPayment 拼接引數時得按一定的順序
- 還有些想起來在補充吧 我該去吃飯了 ~~
就這三個功能折磨我的時間挺長的 ！ 爬了無數的坑 終于實作了 （我引入的H5頁面還是用JQuery+template模板寫的 ）所以當時遇到的問題比較多 快自閉了 希望你們能順利一些吧！
如果后期有精力后期再補充爬過的坑，我也是站在了巨人的肩膀上 所以再次感謝一下 大佬的文章
以上有很多地方都是借鑒 這位大佬的 再次感謝 ~~
初識前端 ，希望能與各位同仁多多交流討論，
https://www.cnblogs.com/wangvv/p/13646057.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/229240.html
標籤：其他
下一篇：NDK&JNI開發總結