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

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

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

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

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

下面進(jìn)入正題：

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

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

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

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

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

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

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

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

H5頁面對應(yīng)的服務(wù)器配置https訪問

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

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

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

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

設(shè)置https://mini.***.com后的截圖為：

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

配置成功后的截圖如下：

新建嵌入H5小程序項(xiàng)目

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

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

設(shè)置后為：

確定后，彈出如下界面：

代碼如下：

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頁面后，編譯-》預(yù)覽，再打開微信，掃預(yù)覽二維碼，就大功告成了。

自己整理的文檔目錄結(jié)構(gòu)如下，如果有需要，可以從最下方的鏈接進(jìn)行下載：

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

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

廣告

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