柚子快報激活碼778899分享：小程序嵌套H5
柚子快報激活碼778899分享：小程序嵌套H5
在微信小程序中內嵌H5頁面是一種常見的需求，因為H5頁面具有靈活性和跨平臺性，可以彌補小程序原生代碼的不足。
微信小程序自帶的 web-view 組件相當于 HTML頁面中的 iframe ，方便我們在微信小程序中打開一個 H5 頁面；從微信小程序基礎庫1.6.4開始，我們就可以在小程序內放置一個
web-view使用前提：業(yè)務域名
由于個人類型的小程序暫不支持使用。只有非個人類型小程序可以配置業(yè)務域名
1、掃碼登錄微信公眾平臺；
2、開發(fā)管理 —— 開發(fā)設置 —— 業(yè)務域名 進行添加、修改；
3、配置完業(yè)務域名后，還需要下載校驗文件（步驟2中第四張圖的紅色框部分），并將校驗文件放置在域名根目錄下（讓后端去操作）。這一步相當于是讓對方授權你能打開他的網頁，比如要在你的小程序中打開百度，就需要百度去把這個校驗文件放到他的域名根目錄下得到他的授權；
4、設置業(yè)務域名時，報檢查校驗怎見石板，可以參考業(yè)務域名設置--校驗文件檢查失敗自查指引 微信開放社區(qū)進行自查。
web-view鏈接打不開問題
打不開某個外部網頁鏈接： 檢查是否配置了小程序的業(yè)務域名，注意外部網頁內再次 iframe 內嵌的其他域名也需要配置
檢查是否為 https 協(xié)議，不支持http協(xié)議，不支持 IP 地址 打不開公眾號文章：檢查小程序是否已關聯(lián)該公眾號 外部網頁鏈接、公眾號文章鏈接在開發(fā)工具、體驗版上可以打開，正式版上不行：
檢查開發(fā)工具上是否開啟了 “ 不校驗合法域名、web-view業(yè)務域名、TLS版本以及HTTPS證書 ” 選項，開發(fā)工具上開啟這個選項，不用配置業(yè)務域名或關聯(lián)小程序也能打開鏈接，在開發(fā)工具上將該選項關掉，也就打不開了，該選項位置如下圖；體驗版上能打開是因為打開了 “ 開發(fā)調試 ”，關閉開發(fā)調試后，同樣也是打不開。
web-view的基本使用
官方web-view組件使用：web-view | 微信開放文檔
每個頁面只能有一個 web-view組件，并且 web-view組件將默認展示在最高層級
index.wxml
?
index.js
data: {
? ?webUrl: app.globalData.BASE_URL + "contacts"
},
H5頁面和小程序跳轉及傳參
web-view提供的跳轉接口
跳轉基本流程
在小程序中新建一個web-view組件，指定URL為要嵌入的H5頁面的鏈接。 在H5頁面中添加微信小程序JS SDK的引入，在H5頁面中可以通過JS SDK調用小程序API。 在小程序中設置跨域請求的安全域名，H5頁面需要在此安全域名下。 在需要向小程序傳遞參數的H5頁面
H5 跳轉回小程序
在內嵌網頁中跳回小程序，需引入JS-SDK
//安裝插件
npm i -S weixin-js-sdk
//引入
import wx from 'weixin-js-sdk'
在需要返回小程序的H5頁面使用下面代碼：
wx.miniProgram.navigateTo({
?url: "/pages/index", //小程序地址
});
注意：
web-view 網頁與小程序之間不支持除 JSSDK 提供的接口之外的通信； 在 iOS 中，若存在JSSDK接口調用無響應的情況，可在 web-view 的 src 后面加個#wechat_redirect解決； 避免在鏈接中帶有中文字符，在 iOS 中會有打開白屏的問題，建議加一下 encodeURIComponent；
小程序和H5之間傳參
小程序和H5之間互相跳轉，如果需要傳遞參數的話可以通過 url 路徑拼接的方式來傳遞參數
小程序向H5傳參：
微信小程序向H5傳參
? /**
? * 頁面的初始數據
? */
?data: {
? ?webUrl: app.globalData.BASE_URL +'eventDetail'
}, ?
?/**
? * 生命周期函數--監(jiān)聽頁面加載
? */
?onLoad(options) {
? ?let queryString = 'id=1&name=anna'
? ?this.setData({
? ? ?webUrl: this.data.webUrl + '?' + queryString
? })
},
H5接收參數
created() {
? ?this.detailData = this.$route.query
},
H5向小程序傳參：
H5向小程序傳遞參數
linkPath(route) {
? ? ? ?if (route.query) {
? ? ? ? ?url = url + '?params=' + JSON.stringify(route.query)
? ? ? }
? ? ? ?wx.miniProgram.redirectTo({
? ? ? ? ?url, //小程序地址
? ? ? })
}
小程序接收參數
?var util = require('../../../utils/util')
?/**
? * 生命周期函數--監(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數據處理
在傳遞參數過程中，使用了json處理參數可能會報 Unexpected token % in JSON at position 0這類報錯問題，問題原因就是里面有特殊符號，需要對json數據做處理
轉換string類型時 用encodeURIComponent編碼包一下
url = url + '?params=' + encodeURIComponent(JSON.stringify(route.query))
轉換成原來的類型decodeURIComponent先解碼回來再轉換回來
const params = JSON.parse( decodeURIComponent( options.params ) )
自定義導航名
web-view頁面的標題取決于H5嵌入頁面的title標題，該組件不支持自定義組件導航欄
可以通過修改title標題修改導航欄標題
mounted() {
document.title = '通訊錄'
},
注意：在微信開發(fā)者工具上可能會出現(xiàn)僅在第一次進入h5生效，進入h5后再改title的話并不能修改成功，由于微信開發(fā)者工具上不穩(wěn)定，在上傳后真機是可以的。
判斷是否是微信環(huán)境
當有差異化功能時就可以通過微信sdk的接口進行當前是否小程序/公眾號的判斷，然后進行webview新頁面的開發(fā)。
微信小程序提供了兩種判斷方法
wx.miniProgram.getEnv：獲取當前環(huán)境
/ 判斷是否是小程序端
isMiniPrograms() {
var isMiniprogram = false;
// 判斷是否是小程序打開
wx.miniProgram.getEnv(res => {
console.log(res.miniprogram)
if (res.miniprogram) {
//在小程序中
isMiniprogram = true;
}
});
return isMiniprogram;
}
在網頁內可通過window.__wxjs_environment變量判斷是否在小程序環(huán)境，建議在WeixinJSBridgeReady回調中使用
const isWx =
window.__wxjs_environment === 'miniprogram' || /miniProgram/i.test(navigator.userAgent.toLowerCase())
相關注意事項
打開的域名沒有在小程序管理后臺設置業(yè)務域名（注意是業(yè)務域名，不是服務器域名） 打開的頁面必須為https服務 打開的頁面302過去的地址也必須設置過業(yè)務域名 web-view空白問題，請升級微信客戶端到 6.5.16 頁面可以包含iframe，但是iframe的地址必須為業(yè)務域名 web-view不支持支付能力，web-view的API能力見web-view的文檔說明 開發(fā)者自己檢查自己的https服務是否正常，測試方法：普通瀏覽器打開對應的地址 如果web-view使用了公眾號授權的服務，開發(fā)者工具提示網頁開發(fā)者的問題，請見：概述 | 微信開放文檔
柚子快報激活碼778899分享：小程序嵌套H5
相關鏈接
本文內容根據網絡資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉載請注明，如有侵權，聯(lián)系刪除。
Voghion時尚外貿坊
