小程序用webview内嵌h5頁面，實現分享、微信支付功能 。h5傳參跳轉web-view 微信小程序

前幾天公司頭目給了(le／liǎo)我個(gè)任務 ，用小程序的(de)web view組件來(lái)嵌入h5頁面 還要(yào / yāo)實現小程序右上(shàng)角的(de)分享功能 ，最重要(yào / yāo)的(de)是(shì)調用微信支付（小程序中不(bù)能使用之(zhī)前在(zài)浏覽器中配置的(de)支付功能，隻能調用小程序專屬的(de)api進行支付。） 接到(dào)到(dào)這(zhè)個(gè)任務，内心還是(shì)很開心的(de),因爲(wéi / wèi)…我愛學習啊啊啊。話不(bù)多說(shuō)，進入正題。

web-view：承載網頁的(de)容器。會自動鋪滿整個(gè)小程序頁面，個(gè)人(rén)類型的(de)小程序暫不(bù)支持使用 它有三個(gè)比較重要(yào / yāo)的(de)屬性 src bindmessage bindload 。
web view詳情鏈接
先說(shuō)說(shuō)整體思路吧 小程序隻要(yào / yāo)有三個(gè)頁面就(jiù)夠了(le／liǎo)
1.小程序啓動時(shí)默認打開的(de)頁面
2.小程序點擊右上(shàng)角分享 的(de)頁面
3.webview嵌入的(de)h5頁面 當發起支付時(shí)會跳轉到(dào)wxpay頁面 ,調用微信支付

乍一看挺簡單的(de) 實際也(yě)不(bù)是(shì)太難,隻是(shì)當時(shí)爬的(de)坑比較多 結尾的(de)時(shí)候會總結坑點。

實現步驟：

1. 先在(zài)web view裏引入H5頁面 此步驟比較簡單
2. 引入頁面後實現右上(shàng)角點擊分享功能 （提示：web view 不(bù)支持分享朋友圈）

具體實現步驟：

1.利用web view 将h5嵌入小程序

對了(le／liǎo),開始之(zhī)前先說(shuō)下 ,我用的(de)是(shì)uniapp 來(lái)寫的(de) 實現原理 一模一樣 有差别的(de)地(dì / de)方我都注釋出(chū)來(lái)了(le／liǎo)

	//index.vue頁面  
	// 注意: @message 事件是(shì)uniapp中的(de)web-viwe  小程序用的(de)是(shì) bindmessage  
	<web-view src="https://www.baidu.com/" @message="handlePostMessage"></web-view>

• 這(zhè)個(gè)步驟比較簡單 @message/ bindmessage 屬性的(de)是(shì)用來(lái)接收h5傳遞過來(lái)的(de)參數 分享時(shí)候會用到(dào) 下面會講

2.小程序點擊右上(shàng)角分享(用到(dào)了(le／liǎo)H5給web-view傳參)

要(yào / yāo)實現分享功能需先了(le／liǎo)解 以(yǐ)下内容

• onShareAppMessage(Object object)
  監聽用戶點擊頁面内轉發按鈕（button 組件 open-type=“share”）或右上(shàng)角菜單“轉發”按鈕的(de)行爲(wéi / wèi)，并自定義轉發内容。
  注意：隻有定義了(le／liǎo)此事件處理函數，右上(shàng)角菜單才會顯示“轉發”按鈕
• web-view 是(shì)一個(gè) web 浏覽器組件，可以(yǐ)用來(lái)承載網頁的(de)容器，會自動鋪滿整個(gè)頁面 裏面有個(gè)屬性
  @message 網頁向應用 postMessage 時(shí)，會在(zài)特定時(shí)機（後退、組件銷毀、分享）觸發并收到(dào)消息。
  注意:@message 是(shì)uniapp中web-viwe的(de)屬性 小程序用的(de)是(shì) bindmessage (當時(shí)沒注意在(zài)這(zhè)卡了(le／liǎo)一個(gè)小時(shí))

在(zài)index.vue裏面加如下代碼

	// 用戶點擊右上(shàng)角分享  res.webViewUrl是(shì)跳轉時(shí)攜帶的(de)參數 
	onShareAppMessage: function(res) {
		//console.log（res）裏面會有個(gè)  res.webViewUrl 指的(de)是(shì)當前所在(zài)頁面的(de)網址
		return {
			//  path --必打開分享時(shí)跳轉到(dào)的(de)頁面  默認是(shì)當前頁面，必須是(shì)以(yǐ)‘/’開頭的(de)完整路徑
			//  title -- 設置轉發時(shí)的(de)标題  默認是(shì)小程序的(de)名稱
			//  imageUrl -- 設置轉發時(shí)的(de)圖片   不(bù)傳入 imageUrl 則使用默認截圖。
			path: '/pages/share/share?url=' + encodeURIComponent(res.webViewUrl) 
		};
	},		
		

在(zài)share.vue中添加如下代碼

	<web-view :src="h5url" @message="handlePostMessage"></web-view>

script添加以(yǐ)下代碼

	//接收參數>: function(e) {
		this.h5url = decodeURIComponent(e.url) 
	}

以(yǐ)上(shàng)步驟解釋：
說(shuō)白了(le／liǎo)就(jiù)是(shì)小程序需要(yào / yāo)從index頁面 跳到(dào)了(le／liǎo)share頁面 ， index用到(dào)了(le／liǎo)> //data就(jiù)是(shì)要(yào / yāo)傳遞的(de)數據 //思路：先判斷環境 再執行 wx.miniProgram.postMessage(); var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { //ios的(de)ua中無miniProgram，但都有MicroMessenger（表示是(shì)微信浏覽器） wx.miniProgram.getEnv((res)=>{ if (res.miniprogram) { wx.miniProgram.postMessage({ data: data }); }else{ alert('在(zài)微信内，但是(shì)不(bù)在(zài)小程序内') return false; } }) }else{ console.log('在(zài)微信外') }

h5頁面通過 調用wx.miniProgram.postMessage() 傳參 。小程序的(de)web-view組件bindmessage 屬性 會在(zài)特定時(shí)機（後退、組件銷毀、分享）觸發并收到(dào)消息。 此步驟就(jiù)算收工了(le／liǎo)。

3.在(zài)小程序中調用微信支付功能

調用微信支付原因上(shàng)面已經做過解釋 想要(yào / yāo)實現功能之(zhī)前的(de)先搞懂小程序支付流程 小程序支付流程

H5調起微信支付時(shí) 用wx.miniProgram.navigateTo 設置跳到(dào) wxpay頁面

wxpay.vue頁面

<template>
	//h5調起微信支付時(shí)會跳到(dào) wxpay頁面 
</template>

<script>
export default {
	data() {
		return {};
	},
	created() {},
	methods: {
	
		// 生命周期函數--監聽頁面卸載
		onUnload :function() {} //支付完成後 手機左滑時(shí)會出(chū)現很尴尬的(de)事 相信你會用到(dào)這(zhè)個(gè)生命周期 原理不(bù)解釋了(le／liǎo) 寫了(le／liǎo)幾個(gè)小時(shí)沒精力了(le／liǎo)
		
		//生命周期函數--監聽頁面加載 
		onLoad: function(option) {
			if (option) {
			//option 有H5頁面傳遞過來(lái)的(de)數據
				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的(de)ticket"}
					that.getOpenId(res.code, option);
					// console.log(res);
				}
			});
		},
		
		getOpenId: function(jsCode, option) {
			var that = this;
			var params = {};  //這(zhè)裏就(jiù)是(shì)調接口拼湊要(yào / yāo)給後端提供的(de)參數 
			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,  //把獲取到(dào)的(de)code傳給後端 (必須)到(dào)時(shí)候退款也(yě)會涉及到(dào) 
			wx.request({ 
				url: 'https://www.xxx.com/mobile' + '/index.php?act=member_payment&op=wxa_pay', //引入的(de)https地(dì / de)址
				method: 'post',
				header: {
					'content-type': 'application/x-www-form-urlencoded' // 默認值
				},
				data: params,  //傳遞的(de)參數 後端會返回一部分 你這(zhè)裏隻需要(yào / yāo)吧 獲取用戶OpenID的(de)ticket"
				success: function(res) {
					that.getPrePayId(res.data.datas);
				},
				fail: function(res) {
					console.log(res);
					wx.showModal({ title: '網絡超時(shí)', content: '刷新重試', showCancel: !1 });
				}
			});
		},

		getPrePayId: function(res) {
			var that = this;
			wx.requestPayment({
				//成功之(zhī)後，調用小程序微信支付
				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的(de)ua中無miniProgram，但都有MicroMessenger（表示是(shì)微信浏覽器）
	    wx.miniProgram.getEnv((res)=>{   
	      if (res.miniprogram) {
	        console.log('在(zài)小程序内')
	        wx.miniProgram.navigateTo({                                
	          url: "/pages/wxpay/wxpay?"+queryParam       //小程序的(de)支付地(dì / de)址，queryParam是(shì)需要(yào / yāo)傳遞的(de)商品id等數據
	        });
	        return false;
	     }else{
	       console.log('在(zài)微信内，但是(shì)不(bù)在(zài)小程序内')
	       return false;
	     }
	   })
	  }else{
	    console.log('在(zài)微信外')
	    return false;
	  }    
	};
	

寫的(de)時(shí)間太長了(le／liǎo) 有些暈 簡短的(de)說(shuō)下重點步驟吧 ! 注釋其實說(shuō)的(de)挺多的(de)，比較詳細

H5要(yào / yāo)在(zài)使用wx.miniProgram.navigateTo 攜帶參數 跳轉到(dào)小程序的(de)wxpay頁面 跳轉需要(yào / yāo)引入js-sdk才可以(yǐ)跳轉 去官網查下最新版本 不(bù)然可能會不(bù)成功

• H5傳遞過來(lái)的(de)參數 wxpay還是(shì)用onload接收 (後端需要(yào / yāo)什麽數據 在(zài)H5頁面搜集好 直接傳遞過去就(jiù)行了(le／liǎo))
• 然後wx.login() 獲取的(de)code 一定要(yào / yāo)傳遞給後端 , 會涉支付及退款問題

其實支付這(zhè)塊稍微複雜一些 但前端做的(de)事情比較少 ， 後端複雜一些.。前端隻需要(yào / yāo)去H5搜集參數傳給小程序，小程序在(zài)wx.login()獲取到(dào)code 然後再調接口拼接數據，最後wx.requestPayment 直接拉起微信支付就(jiù)好了(le／liǎo)

寫到(dào)這(zhè)微信支付也(yě)就(jiù)告一段落了(le／liǎo) ~~~

在(zài)總結一下 遇到(dào)的(de)各種問題吧 !

• 微信開發者工具會有緩存 調試的(de)時(shí)候多清清!有時(shí)候實現不(bù)了(le／liǎo)功能可能是(shì)緩存問題
• 微信開發者工具調試時(shí)可以(yǐ)出(chū)現跳轉, 而(ér)真機調試不(bù)能實現時(shí) 也(yě)可嘗試清緩存, 也(yě)可以(yǐ)嘗試運行在(zài)浏覽器端 如果 浏覽器出(chū)現頁面無限跳轉 一定是(shì)H5D端 判斷是(shì)否是(shì)微信環境出(chū)了(le／liǎo)問題 ，我清緩存用的(de)是(shì)url後邊加時(shí)間戳
• 如果在(zài)掃描體驗版進入小程序時(shí) 頁面不(bù)加載 點擊左上(shàng)角的(de)小房子(zǐ)圖标會刷新 說(shuō)明體驗版二維碼不(bù)對 仔細查看指定路徑
• 如果頁面不(bù)跳轉或者是(shì)接受不(bù)到(dào)參數 仔細耐心多看文檔.
• index中的(de) src末尾得加.html 不(bù)然體驗版會出(chū)現一些小問題.
• wx.requestPayment 拼接參數時(shí)得按一定的(de)順序
• 還有些想起來(lái)在(zài)補充吧 我該去吃飯了(le／liǎo) ~~

就(jiù)這(zhè)三個(gè)功能折磨我的(de)時(shí)間挺長的(de) ！ 爬了(le／liǎo)無數的(de)坑 終于(yú)實現了(le／liǎo) （我引入的(de)H5頁面還是(shì)用JQuery+template模闆寫的(de) 因爲(wéi / wèi)剛到(dào)公司還有很多地(dì / de)方不(bù)熟 得虧有個(gè)靓仔祥祥給了(le／liǎo)我很大(dà)的(de)支持~在(zài)此重重感謝 )
如果後期有精力後期再補充一些爬過的(de)坑。我也(yě)是(shì)站在(zài)了(le／liǎo)巨人(rén)的(de)肩膀上(shàng) 還要(yào / yāo)感謝一下 大(dà)佬的(de)文章
以(yǐ)上(shàng)有很多地(dì / de)方都是(shì)借鑒 這(zhè)位大(dà)佬的(de) 再次感謝 ~~
初識前端 ，希望能與各位同仁多多交流讨論。

https://www.cnblogs.com/wangvv/p/13646057.html