1. 程式人生 > >[小程序開發] 微信小程序內嵌網頁web-view開發教程

[小程序開發] 微信小程序內嵌網頁web-view開發教程

工具 內容 不支持 clas .html bind har 開發 style

為了便於開發者靈活配置小程序,微信小程序開放了內嵌網頁能力。這意味著小程序的內容不再局限於pages和large,我們可以借助內嵌網頁豐富小程序的內容。下面附上詳細的開發教程(含視頻操作以及註意事項)

一、小程序內嵌網頁web-view教程


1) 微信公眾平臺,登錄小程序賬號
技術分享

2) 左側-設置-開發設置-業務域名-配置
技術分享

3) 小程序管理員微信掃碼
技術分享

4) 填寫小程序業務域名,域名需ICP備案
技術分享

5) 下載校檢文件上傳至服務器指定目錄,保存
技術分享

6) 小程序業務域名配置完成
技術分享

7) 打開微信開發者工具,添加小程序項目
技術分享


8) 進入小程序調試,點擊底部導航-外鏈頁page10001,右側找到page10001.wxml,刪除原有代碼,插入<web-view src=“

業務域名/網頁.html”></web-view>
備註:此處外鏈頁為空白頁,便於借助webview組件插入網頁內容作對比
技術分享


9)ctrl+s保存查看小程序內嵌網頁得內容
備註:此處開發者需更新到教程庫版本1.6.4
技術分享


二、小程序web-view註意事項


1)業務域名需ICP備案,新域名備案24小時後即可配置,域名不支持IP地址及端口號

2)下載校檢文件,上傳至服務器指定根目錄

3)開發者工具最新版-基礎庫版本1.6.4


三、附上本次小程序web-view內嵌網頁視頻教程


webview視頻演示: https://www.zhihu.com/question/67564075/answer/258773999


[小程序開發] 微信小程序內嵌網頁web-view開發教程