微信小程序內嵌網頁或H5頁面(zf)


 

對小程序開發一點都不了解的小白鼠,經過昨天下午半天的研究,終於實現小程序內嵌H5頁面功能,下面把經驗和代碼分享給大家,請多多指教!

 

微信小程序內嵌網頁或H5頁面,總結起來就是在小程序頁面中添加一行如下代碼

<web-view src="https://www.**888.com"></web-view>
其中https://www.**888.com就是所嵌入的H5頁面。

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

 

下面進入正題:

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

 

二、具體步驟
2.1小程序開發環境准備(注冊企業小程序賬號,下載小程序開發環境,開發HelloWorld小程序)

注冊企業小程序賬號

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

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

 

下載小程序開發環境和開發HelloWorld小程序

請參考微信小程序官網https://developers.weixin.qq.com/miniprogram/dev/#安裝開發工具


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

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

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

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

小程序中配置服務器域名和業務域名

登錄小程序賬號后,進入“設置-》開發設置”界面,在頁面中部,有個“服務器域名”和“業務域名”,這2個都是挨着的,如何配置具體如下:

 

 

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

 

 

 

 

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

配置成功后的截圖如下:

 

 

新建嵌入H5小程序項目

 

選擇“小程序項目”后,出現如下界面:

 

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

設置后為:

 

確定后,彈出如下界面:

 

 

代碼如下:

<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>

<web-view src="https://www.**888.com"></web-view>
</view>
添加H5頁面后,編譯-》預覽,再打開微信,掃預覽二維碼,就大功告成了。

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

 

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM