微信小程序如何內(nèi)嵌網(wǎng)頁或H5頁面？

對小程序開發(fā)一點都不了解的小白鼠，經(jīng)過昨天下午半天的研究，終于實現(xiàn)小程序內(nèi)嵌H5頁面功能，下面把經(jīng)驗和代碼分享給大家，請多多指教！

微信小程序內(nèi)嵌網(wǎng)頁或H5頁面，總結起來就是在小程序頁面中添加一行如下代碼

<web-view src="https://www.**888.com"></web-view>

其中https://www.**888.com就是所嵌入的H5頁面。

源碼和具體的使用細則，可以到下載源碼及使用說明。

下面進入正題：

一、注意事項
1.1注冊小程序賬號必須為企業(yè)的。因為個人類型與海外類型的小程序暫不支持使用web-view組件。
1.2嵌入的H5頁面，必須放在自己的服務器中。自己的服務器外網(wǎng)可以訪問且已配置HTTPS訪問。

二、具體步驟
2.1小程序開發(fā)環(huán)境準備（注冊企業(yè)小程序賬號，下載小程序開發(fā)環(huán)境，開發(fā)HelloWorld小程序）

注冊企業(yè)小程序賬號

請參考微信小程序官網(wǎng)https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18111420

不會操作的，可以在文章最下方下載注冊企業(yè)小程序賬號步驟，詳細截圖及各步驟中的注意事項，這里就不累贅說明了。

下載小程序開發(fā)環(huán)境和開發(fā)HelloWorld小程序

請參考微信小程序官網(wǎng)https://developers.weixin.qq.com/miniprogram/dev/#安裝開發(fā)工具

2.2小程序中嵌入H5頁面（H5頁面對應的服務器配置https訪問，小程序中配置服務器域名和業(yè)務域名，新建嵌入H5小程序項目）

H5頁面對應的服務器配置https訪問

請參考我另外一篇博客，地址https://blog.csdn.net/jlq_diligence/article/details/84107729

如果在移動手機中訪問嵌入H5頁面時，提示“該證書并非來自可信的授權中心”，說明證書有問題或者配置證書不對，可以在博客中留言，我看到時，給你回復。

小程序中配置服務器域名和業(yè)務域名

登錄小程序賬號后，進入“設置-》開發(fā)設置”界面，在頁面中部，有個“服務器域名”和“業(yè)務域名”，這2個都是挨著的，如何配置具體如下：

設置https://mini.***.com后的截圖為：

注意：域名使用一級域名，例如www.***.com，不要配置demo.***.com二級域名，不然驗證不過。

配置成功后的截圖如下：

新建嵌入H5小程序項目

選擇“小程序項目”后，出現(xiàn)如下界面：

登錄https://mp.weixin.qq.com，我們可以在菜單 “設置”-“開發(fā)設置” 看到小程序的AppID了 。

設置后為：

確定后，彈出如下界面：

代碼如下：

1. <!--index.wxml-->

2. <viewclass="container">

3. <viewclass="userinfo">

4. <button wx:if="{{!hasUserInfo && canIUse}}"open-type="getUserInfo"bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>

5. <block wx:else>

6. <image bindtap="bindViewTap"class="userinfo-avatar"src="{{userInfo.avatarUrl}}"mode="cover"></image>

7. <textclass="userinfo-nickname">{{userInfo.nickName}}</text>

8. </block>

9. </view>

10. <viewclass="usermotto">

11. <textclass="user-motto">{{motto}}</text>

12. </view>

14. <web-view src="https://www.**888.com"></web-view>

15. </view>

添加H5頁面后，編譯-》預覽，再打開微信，掃預覽二維碼，就大功告成了。

自己整理的文檔目錄結構如下，如果有需要，可以從最下方的鏈接進行下載：

分享題目：微信小程序如何內(nèi)嵌網(wǎng)頁或H5頁面？
網(wǎng)頁網(wǎng)址：http://muchs.cn/news43/309393.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)頁設計公司、企業(yè)網(wǎng)站制作、網(wǎng)站收錄、網(wǎng)站導航、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)