web-view將網(wǎng)頁嵌入小程序的過程及其前提：使網(wǎng)站支持https

? ? ? 小程序團隊又搞事情了——開放了內嵌網(wǎng)頁能力（Web-View）。開發(fā)者登錄小程序后臺配置業(yè)務域名后，即可實現(xiàn)小程序內嵌網(wǎng)頁（2017年底開放的）。

? ? ? 如果你有一個網(wǎng)站，如何快速的把其中的網(wǎng)頁放到微信小程序中，讓你迅速擁有一個功能齊全的小程序。

說說工具（可能有些多，但并不復雜）：

? ? ? ? ?微信公眾平臺服務號（微信認證），已經新建了小程序

? ? ? ? ?微信web開發(fā)者工具

? ? ? ? ?ftp軟件，你自己的網(wǎng)站（能用ftp軟件連上網(wǎng)站服務器傳個校驗文件到根目錄中）

注：網(wǎng)站必須支持HTTPS，網(wǎng)站從http轉到https請看 下方 ? 5、

一、微信小程序內嵌網(wǎng)頁web-view開發(fā)教程

1、 微信公眾平臺，登錄小程序賬號

2、左側-設置-開發(fā)設置-業(yè)務域名-配置

3、 小程序管理員微信掃碼

4、 填寫小程序業(yè)務域名，域名需ICP備案

5、 下載校檢文件上傳（用ftp軟件）至服務器指定目錄，保存

? ? ? 而這個時候可能會出現(xiàn)校驗失敗，可以多傳幾次。

? ? ? 已經成功的小伙伴可以滑道下方直接看6、

? ? ? 也可能忽略了一個重要問題：https ?（如果你的網(wǎng)站不支持https，建議使用，畢竟如今https也算是大勢所趨）

? ? ? ? 這個時候就不得不安利一波阿里云服務器了，有能免費申請的ssl證書，如果你的網(wǎng)站是用的阿里云服務器。

? ?5.1 登陸阿里云后臺，

?? 5.2點擊左上角進入“產品與服務”?

? ? ? 5.3搜索“證書”選中“CA證書服務“，

5.4找到免費型的DV SSL ??購買?

? 5.5支付后再進入“CA證書服務“補全信息

填寫域名信息不寫http頭?。?！

填寫域名信息不寫http頭?。?！

填寫域名信息不寫http頭！??！

完成信息后，接下來就是等待審批結果了，審批通過后，下載，最后根據(jù)提示信息（很全的），進行選擇安裝。至于安裝后的代碼變動就不多說了。

（注：這里雖然將http切換為了https，還是建議保留http。所以我們在切換的時候可以做http和https的兼容，具體實現(xiàn)方式是，去掉頁面鏈接中的http頭部，這樣可以自動匹配http頭和https頭。

例如：將http://www.baidu.com改為//www.baidu.com。然后當用戶從http的入口進入訪問頁面時，頁面就是http，如果用戶是從https的入口進入訪問頁面，頁面即使https的。）

6、 小程序業(yè)務域名配置完成

7、 打開微信開發(fā)者工具，添加小程序項目

8、 進入小程序調試，點擊底部導航-外鏈頁page10001,右側找到page10001.wxml，刪除原有代碼，插入

備注：此處外鏈頁為空白頁，便于借助webview組件插入網(wǎng)頁內容作對比

9、ctrl+s保存查看小程序內嵌網(wǎng)頁得內容

備注：此處開發(fā)者需更新到教程庫版本1.6.4

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

1）業(yè)務域名需ICP備案，新域名備案24小時后即可配置，域名不支持IP地址及端口號

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

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