在微信小程序中內(nèi)嵌H5頁面是一種常見的需求，因為H5頁面具有靈活性和跨平臺性，可以彌補小程序原生代碼的不足。

微信小程序自帶的 web-view 組件相當(dāng)于 HTML頁面中的 iframe ，方便我們在微信小程序中打開一個 H5 頁面；從微信小程序基礎(chǔ)庫1.6.4開始，我們就可以在小程序內(nèi)放置一個<web-view>組件來鏈接我們的HTML頁面了。

web-view使用前提：業(yè)務(wù)域名

由于個人類型的小程序暫不支持使用。只有非個人類型小程序可以配置業(yè)務(wù)域名

1、掃碼登錄微信公眾平臺；

2、開發(fā)管理 —— 開發(fā)設(shè)置 —— 業(yè)務(wù)域名 進行添加、修改；

3、配置完業(yè)務(wù)域名后，還需要下載校驗文件（步驟2中第四張圖的紅色框部分），并將校驗文件放置在域名根目錄下（讓后端去操作）。這一步相當(dāng)于是讓對方授權(quán)你能打開他的網(wǎng)頁，比如要在你的小程序中打開百度，就需要百度去把這個校驗文件放到他的域名根目錄下得到他的授權(quán)；

4、設(shè)置業(yè)務(wù)域名時，報檢查校驗怎見石板，可以參考業(yè)務(wù)域名設(shè)置--校驗文件檢查失敗自查指引 微信開放社區(qū)進行自查。

web-view鏈接打不開問題

• 打不開某個外部網(wǎng)頁鏈接：

• 檢查是否配置了小程序的業(yè)務(wù)域名，注意外部網(wǎng)頁內(nèi)再次 iframe 內(nèi)嵌的其他域名也需要配置

  • 檢查是否為 https 協(xié)議，不支持http協(xié)議，不支持 IP 地址

  • 打不開公眾號文章：檢查小程序是否已關(guān)聯(lián)該公眾號

• 外部網(wǎng)頁鏈接、公眾號文章鏈接在開發(fā)工具、體驗版上可以打開，正式版上不行：

  • 檢查開發(fā)工具上是否開啟了 “ 不校驗合法域名、web-view業(yè)務(wù)域名、TLS版本以及HTTPS證書 ” 選項，開發(fā)工具上開啟這個選項，不用配置業(yè)務(wù)域名或關(guān)聯(lián)小程序也能打開鏈接，在開發(fā)工具上將該選項關(guān)掉，也就打不開了，該選項位置如下圖；體驗版上能打開是因為打開了 “ 開發(fā)調(diào)試 ”，關(guān)閉開發(fā)調(diào)試后，同樣也是打不開。

web-view的基本使用

官方web-view組件使用：web-view | 微信開放文檔

每個頁面只能有一個 web-view組件，并且 web-view組件將默認展示在最高層級

index.wxml

<view class="page-body">
 ?  <web-view src="{{webUrl}}"></web-view>
</view>

index.js

data: {
 ? ?webUrl: app.globalData.BASE_URL + "contacts"
},

H5頁面和小程序跳轉(zhuǎn)及傳參

web-view提供的跳轉(zhuǎn)接口

跳轉(zhuǎn)基本流程

• 在小程序中新建一個web-view組件，指定URL為要嵌入的H5頁面的鏈接。

• 在H5頁面中添加微信小程序JS SDK的引入，在H5頁面中可以通過JS SDK調(diào)用小程序API。

• 在小程序中設(shè)置跨域請求的安全域名，H5頁面需要在此安全域名下。

• 在需要向小程序傳遞參數(shù)的H5頁面

H5 跳轉(zhuǎn)回小程序

在內(nèi)嵌網(wǎng)頁中跳回小程序，需引入JS-SDK

//安裝插件
npm i -S weixin-js-sdk 
//引入
import wx from 'weixin-js-sdk'

在需要返回小程序的H5頁面使用下面代碼：

wx.miniProgram.navigateTo({
 ?url: "/pages/index", //小程序地址
});

注意：

• web-view 網(wǎng)頁與小程序之間不支持除 JSSDK 提供的接口之外的通信；

• 在 iOS 中，若存在JSSDK接口調(diào)用無響應(yīng)的情況，可在 web-view 的 src 后面加個#wechat_redirect解決；

• 避免在鏈接中帶有中文字符，在 iOS 中會有打開白屏的問題，建議加一下 encodeURIComponent；

小程序和H5之間傳參

小程序和H5之間互相跳轉(zhuǎn)，如果需要傳遞參數(shù)的話可以通過 url 路徑拼接的方式來傳遞參數(shù)

小程序向H5傳參：

• 微信小程序向H5傳參

 ? /**
 ? * 頁面的初始數(shù)據(jù)
 ? */
 ?data: {
 ? ?webUrl: app.globalData.BASE_URL +'eventDetail'
  }, ?
 ?/**
 ? * 生命周期函數(shù)--監(jiān)聽頁面加載
 ? */
 ?onLoad(options) {
 ? ?let queryString = 'id=1&name=anna'
 ? ?this.setData({
 ? ? ?webUrl: this.data.webUrl + '?' + queryString
 ?  })
  },

• H5接收參數(shù)

created() {
 ? ?this.detailData = this.$route.query
},

H5向小程序傳參：

• H5向小程序傳遞參數(shù)

linkPath(route) {
 ? ? ? ?if (route.query) {
 ? ? ? ? ?url = url + '?params=' + JSON.stringify(route.query)
 ? ? ?  }
 ? ? ? ?wx.miniProgram.redirectTo({
 ? ? ? ? ?url, //小程序地址
 ? ? ?  })
}

• 小程序接收參數(shù)

 ?var util = require('../../../utils/util')
 ?/**
 ? * 生命周期函數(shù)--監(jiān)聽頁面加載
 ? */
 ?onLoad(options) {
 ? ?const params ?= JSON.parse( options.params )
 ? ?let queryString = util.queryUrl(params)
  },

utile.js

const queryUrl = params => {
  let queryString = Object.keys(params)
  .map(function (key) {
    return key + '=' + encodeURIComponent(params[key])
  })
  .join('&')

  return queryString
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : `0${n}`
}

module.exports = {
  formatTime,
  queryUrl
}

JSON數(shù)據(jù)處理

在傳遞參數(shù)過程中，使用了json處理參數(shù)可能會報 Unexpected token % in JSON at position 0這類報錯問題，問題原因就是里面有特殊符號，需要對json數(shù)據(jù)做處理

轉(zhuǎn)換string類型時 用encodeURIComponent編碼包一下
url = url + '?params=' + encodeURIComponent(JSON.stringify(route.query))
轉(zhuǎn)換成原來的類型decodeURIComponent先解碼回來再轉(zhuǎn)換回來
const params  = JSON.parse( decodeURIComponent( options.params ) )

自定義導(dǎo)航名

web-view頁面的標(biāo)題取決于H5嵌入頁面的title標(biāo)題，該組件不支持自定義組件導(dǎo)航欄

可以通過修改title標(biāo)題修改導(dǎo)航欄標(biāo)題

mounted() {
    document.title = '通訊錄'
},

注意：在微信開發(fā)者工具上可能會出現(xiàn)僅在第一次進入h5生效，進入h5后再改title的話并不能修改成功，由于微信開發(fā)者工具上不穩(wěn)定，在上傳后真機是可以的。

判斷是否是微信環(huán)境

當(dāng)有差異化功能時就可以通過微信sdk的接口進行當(dāng)前是否小程序/公眾號的判斷，然后進行webview新頁面的開發(fā)。

微信小程序提供了兩種判斷方法

• wx.miniProgram.getEnv：獲取當(dāng)前環(huán)境

    / 判斷是否是小程序端
    isMiniPrograms() {
      var isMiniprogram = false;
      // 判斷是否是小程序打開
      wx.miniProgram.getEnv(res => {
        console.log(res.miniprogram)
        if (res.miniprogram) {
          //在小程序中
          isMiniprogram = true;
        }
      });
      return isMiniprogram;
    }

• 在網(wǎng)頁內(nèi)可通過window.__wxjs_environment變量判斷是否在小程序環(huán)境，建議在WeixinJSBridgeReady回調(diào)中使用

const isWx =
      window.__wxjs_environment === 'miniprogram' || /miniProgram/i.test(navigator.userAgent.toLowerCase())

相關(guān)注意事項

• 打開的域名沒有在小程序管理后臺設(shè)置業(yè)務(wù)域名（注意是業(yè)務(wù)域名，不是服務(wù)器域名）

• 打開的頁面必須為https服務(wù)

• 打開的頁面302過去的地址也必須設(shè)置過業(yè)務(wù)域名

• web-view空白問題，請升級微信客戶端到 6.5.16

• 頁面可以包含iframe，但是iframe的地址必須為業(yè)務(wù)域名

• web-view不支持支付能力，web-view的API能力見web-view的文檔說明

• 開發(fā)者自己檢查自己的https服務(wù)是否正常，測試方法：普通瀏覽器打開對應(yīng)的地址

• 如果web-view使用了公眾號授權(quán)的服務(wù)，開發(fā)者工具提示網(wǎng)頁開發(fā)者的問題，請見：概述 | 微信開放文檔文章來源地址http://www.zghlxwxcb.cn/news/detail-776029.html

到了這里，關(guān)于小程序嵌套H5的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！