小程式內嵌h5

西芹兒發表於2018-06-25
H5

背景瞭解

小程式web-view元件文件

閱讀文件我們發現，要想實現h5頁面在小程式的巢狀需要以下幾個步驟：

  1. 登入小程式管理後臺配置域名白名單
  2. 要想區分環境做相容處理可以區分環境
  3. 使用postMessage實現h5頁面向小程式的資料傳遞

準備工作

配置業務域名

到這裡，你可以隨意寫個h5頁面在小程式中開啟了，但是真正做需求的時候可能會遇到一些問題，如下：

開發中的一些經驗

  • url中帶著引數

    請務必給對url進行encode, 否則url中帶的引數解析不出來

  • 區分h5和小程式做相容

例如我的h5頁面帶著header,但小程式中自帶header,這是就要區分環境，在小程式的環境中把header去掉。

在你的h5專案中引入小程式提供的js，並根據API區分環境

<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>


        // 小程式內不顯示頭
		wx.miniProgram.getEnv((res) => {
			if (res.miniprogram) {
				this.setState({
					isWXapp: true
				})
			} else {
				this.setState({
					isWXapp: false
				})
			}
		});
複製程式碼

  • h5頁面像小程式傳送訊息

    我的需求有分享給朋友的模組，在h5頁面我們只需呼叫hySDK即可，這是底層封裝好的功能。但內嵌入小程式之後就無法實現這一功能，這個內嵌的h5頁面想要分享，唯一的辦法是指引使用者點選小程式右上角的 ... 去分享。

    由於分享出去的文案和圖片是後端返回的，可配置的，因此，需要使用postMessage

    在h5中postMessage 注意，key必須叫做data,否則取不到

    // 向小程式傳遞分享連結
			wx.miniProgram.postMessage({data:{
				shareUrl: bgShareUrl,
				shareDes: bgShareDes
			}});
複製程式碼

在小程式頁面的js中getMessage

// wxml
<block wx:if="{{show}}">
<web-view src="{{url}}" bindmessage="getMessage"></web-view> </block>

// js
 getMessage(e) {
   	let {shareUrl, shareDes} = e && e.detail && e.detail.data[0];
       this.setData({
           shareUrl: shareUrl,
		shareDes: shareDes
       });
   }複製程式碼


這樣就實現了h5向小程式的資料通訊

  • 登入資訊不同步
    這個在common模組提供的web-view元件中已經提供瞭解決思路，如果需要openId會將獲取到的openId作為url的引數傳遞給h5頁面
// 如果需要openId 並且已經登入 再傳遞openId到頁面
		if (this.needOpenId && app.cookies._q && app.user.openId ) {
			url.search ? url.search += `&openId=${encodeURIComponent(app.user.openId)}` : url.search = `openId=${encodeURIComponent(app.user.openId)}`;
		}複製程式碼


相關文章