小程序用webview內(nèi)嵌h5頁面，實(shí)現(xiàn)分享、微信支付功能 。h5傳參跳轉(zhuǎn)web-view 微信小程序

前幾天公司頭目給了我個(gè)任務(wù) ，用小程序的web view組件來嵌入h5頁面 還要實(shí)現(xiàn)小程序右上角的分享功能 ，最重要的是調(diào)用微信支付（小程序中不能使用之前在瀏覽器中配置的支付功能，只能調(diào)用小程序?qū)俚腶pi進(jìn)行支付。） 接到到這個(gè)任務(wù)，內(nèi)心還是很開心的,因?yàn)椤覑蹖W(xué)習(xí)啊啊啊。話不多說，進(jìn)入正題。

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

乍一看挺簡(jiǎn)單的 實(shí)際也不是太難,只是當(dāng)時(shí)爬的坑比較多 結(jié)尾的時(shí)候會(huì)總結(jié)坑點(diǎn)。

實(shí)現(xiàn)步驟：

1. 先在web view里引入H5頁面 此步驟比較簡(jiǎn)單
2. 引入頁面后實(shí)現(xiàn)右上角點(diǎn)擊分享功能 （提示：web view 不支持分享朋友圈）

具體實(shí)現(xiàn)步驟：

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

對(duì)了,開始之前先說下 ,我用的是uniapp 來寫的 實(shí)現(xiàn)原理 一模一樣 有差別的地方我都注釋出來了

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

• 這個(gè)步驟比較簡(jiǎn)單 @message/ bindmessage 屬性的是用來接收h5傳遞過來的參數(shù) 分享時(shí)候會(huì)用到 下面會(huì)講

2.小程序點(diǎn)擊右上角分享(用到了H5給web-view傳參)

要實(shí)現(xiàn)分享功能需先了解 以下內(nèi)容

• onShareAppMessage(Object object)
  監(jiān)聽用戶點(diǎn)擊頁面內(nèi)轉(zhuǎn)發(fā)按鈕（button 組件 open-type=“share”）或右上角菜單“轉(zhuǎn)發(fā)”按鈕的行為，并自定義轉(zhuǎn)發(fā)內(nèi)容。
  注意：只有定義了此事件處理函數(shù)，右上角菜單才會(huì)顯示“轉(zhuǎn)發(fā)”按鈕
• web-view 是一個(gè) web 瀏覽器組件，可以用來承載網(wǎng)頁的容器，會(huì)自動(dòng)鋪滿整個(gè)頁面 里面有個(gè)屬性
  @message 網(wǎng)頁向應(yīng)用 postMessage 時(shí)，會(huì)在特定時(shí)機(jī)（后退、組件銷毀、分享）觸發(fā)并收到消息。
  注意:@message 是uniapp中web-viwe的屬性 小程序用的是 bindmessage (當(dāng)時(shí)沒注意在這卡了一個(gè)小時(shí))

在index.vue里面加如下代碼

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

在share.vue中添加如下代碼

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

script添加以下代碼

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

以上步驟解釋：
說白了就是小程序需要從index頁面 跳到了share頁面 ， index用到了> //data就是要傳遞的數(shù)據(jù) //思路：先判斷環(huán)境 再執(zhí)行 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('在微信內(nèi)，但是不在小程序內(nèi)') return false; } }) }else{ console.log('在微信外') }

h5頁面通過 調(diào)用wx.miniProgram.postMessage() 傳參 。小程序的web-view組件bindmessage 屬性 會(huì)在特定時(shí)機(jī)（后退、組件銷毀、分享）觸發(fā)并收到消息。 此步驟就算收工了。

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

調(diào)用微信支付原因上面已經(jīng)做過解釋 想要實(shí)現(xiàn)功能之前的先搞懂小程序支付流程 小程序支付流程

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

wxpay.vue頁面

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

<script>
export default {
	data() {
		return {};
	},
	created() {},
	methods: {
	
		// 生命周期函數(shù)--監(jiān)聽頁面卸載
		onUnload :function() {} //支付完成后 手機(jī)左滑時(shí)會(huì)出現(xiàn)很尷尬的事 相信你會(huì)用到這個(gè)生命周期 原理不解釋了 寫了幾個(gè)小時(shí)沒精力了
		
		//生命周期函數(shù)--監(jiān)聽頁面加載 
		onLoad: function(option) {
			if (option) {
			//option 有H5頁面?zhèn)鬟f過來的數(shù)據(jù)
				this.setLoading(option);
			} else {
				wx.navigateBack();
			}
			// console.log(option);
		},

		setLoading: function(option) {
			var that = this;
			// 調(diào)用登錄接口獲取openid
			wx.login({
				success: function(res) {
					// 成功會(huì)返回： {errMsg: "login:ok", code: " 獲取用戶OpenID的ticket"}
					that.getOpenId(res.code, option);
					// console.log(res);
				}
			});
		},
		
		getOpenId: function(jsCode, option) {
			var that = this;
			var params = {};  //這里就是調(diào)接口拼湊要給后端提供的參數(shù) 
			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傳給后端 (必須)到時(shí)候退款也會(huì)涉及到 
			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' // 默認(rèn)值
				},
				data: params,  //傳遞的參數(shù) 后端會(huì)返回一部分 你這里只需要吧 獲取用戶OpenID的ticket"
				success: function(res) {
					that.getPrePayId(res.data.datas);
				},
				fail: function(res) {
					console.log(res);
					wx.showModal({ title: '網(wǎng)絡(luò)超時(shí)', content: '刷新重試', showCancel: !1 });
				}
			});
		},

		getPrePayId: function(res) {
			var that = this;
			wx.requestPayment({
				//成功之后，調(diào)用小程序微信支付
				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代碼

    // 小程序支付函數(shù)
	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('在小程序內(nèi)')
	        wx.miniProgram.navigateTo({                                
	          url: "/pages/wxpay/wxpay?"+queryParam       //小程序的支付地址，queryParam是需要傳遞的商品id等數(shù)據(jù)
	        });
	        return false;
	     }else{
	       console.log('在微信內(nèi)，但是不在小程序內(nèi)')
	       return false;
	     }
	   })
	  }else{
	    console.log('在微信外')
	    return false;
	  }    
	};
	

寫的時(shí)間太長(zhǎng)了 有些暈 簡(jiǎn)短的說下重點(diǎn)步驟吧 ! 注釋其實(shí)說的挺多的，比較詳細(xì)

H5要在使用wx.miniProgram.navigateTo 攜帶參數(shù) 跳轉(zhuǎn)到小程序的wxpay頁面 跳轉(zhuǎn)需要引入js-sdk才可以跳轉(zhuǎn) 去官網(wǎng)查下最新版本 不然可能會(huì)不成功

• H5傳遞過來的參數(shù) wxpay還是用onload接收 (后端需要什么數(shù)據(jù) 在H5頁面搜集好 直接傳遞過去就行了)
• 然后wx.login() 獲取的code 一定要傳遞給后端 , 會(huì)涉支付及退款問題

其實(shí)支付這塊稍微復(fù)雜一些 但前端做的事情比較少 ， 后端復(fù)雜一些.。前端只需要去H5搜集參數(shù)傳給小程序，小程序在wx.login()獲取到code 然后再調(diào)接口拼接數(shù)據(jù)，最后wx.requestPayment 直接拉起微信支付就好了

寫到這微信支付也就告一段落了 ~~~

在總結(jié)一下 遇到的各種問題吧 !

• 微信開發(fā)者工具會(huì)有緩存 調(diào)試的時(shí)候多清清!有時(shí)候?qū)崿F(xiàn)不了功能可能是緩存問題
• 微信開發(fā)者工具調(diào)試時(shí)可以出現(xiàn)跳轉(zhuǎn), 而真機(jī)調(diào)試不能實(shí)現(xiàn)時(shí) 也可嘗試清緩存, 也可以嘗試運(yùn)行在瀏覽器端 如果 瀏覽器出現(xiàn)頁面無限跳轉(zhuǎn) 一定是H5D端 判斷是否是微信環(huán)境出了問題 ，我清緩存用的是url后邊加時(shí)間戳
• 如果在掃描體驗(yàn)版進(jìn)入小程序時(shí) 頁面不加載 點(diǎn)擊左上角的小房子圖標(biāo)會(huì)刷新 說明體驗(yàn)版二維碼不對(duì) 仔細(xì)查看指定路徑
• 如果頁面不跳轉(zhuǎn)或者是接受不到參數(shù) 仔細(xì)耐心多看文檔.
• index中的 src末尾得加.html 不然體驗(yàn)版會(huì)出現(xiàn)一些小問題.
• wx.requestPayment 拼接參數(shù)時(shí)得按一定的順序
• 還有些想起來在補(bǔ)充吧 我該去吃飯了 ~~

就這三個(gè)功能折磨我的時(shí)間挺長(zhǎng)的 ！ 爬了無數(shù)的坑 終于實(shí)現(xiàn)了 （我引入的H5頁面還是用JQuery+template模板寫的 因?yàn)閯偟焦具€有很多地方不熟 得虧有個(gè)靚仔祥祥給了我很大的支持~在此重重感謝 )
如果后期有精力后期再補(bǔ)充一些爬過的坑。我也是站在了巨人的肩膀上 還要感謝一下 大佬的文章
以上有很多地方都是借鑒 這位大佬的 再次感謝 ~~
初識(shí)前端 ，希望能與各位同仁多多交流討論。

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