微信小程式內嵌網頁或H5頁面 zf

2022-06-25 20:12:09 字數 733 閱讀 5249

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

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

下面進入正題:

一、注意事項

1.1註冊小程式賬號必須為企業的。因為個人型別與海外型別的小程式暫不支援使用web-view元件。

1.2嵌入的h5頁面,必須放在自己的伺服器中。自己的伺服器外網可以訪問且已配置https訪問。

註冊企業小程式賬號

2.2小程式中嵌入h5頁面(h5頁面對應的伺服器配置https訪問,小程式中配置伺服器網域名稱和業務網域名稱,新建嵌入h5小程式專案)

h5頁面對應的伺服器配置https訪問

小程式中配置伺服器網域名稱和業務網域名稱

登入小程式賬號後,進入「設定-》開發設定」介面,在頁面中部,有個「伺服器網域名稱」和「業務網域名稱」,這2個都是挨著的,如何配置具體如下:

設定https://mini.***.com後的截圖為:

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

配置成功後的截圖如下:

新建嵌入h5小程式專案

選擇「小程式專案」後,出現如下介面:

設定後為:

確定後,彈出如下介面:

**如下:

獲取頭像暱稱 }}

小程式中webview內嵌h5頁面

小程式內嵌h5頁面跳轉小程式指定頁面,需要引用 jssdk h5頁面 aaa.htmldoctype html html head meta charset utf 8 meta name viewport content width device width,initial scale 1.0,m...

H5頁面微信分享

例如 標題 title 描述 自動獲取當前瀏覽頁的url 不可自定義,無法修改 縮圖 可以在父層 div 上設定 display none 或者對 img 設定 position absolute visibility hidden 例如 display none logo512.png alt d...

小程式巢狀h5頁面

1.小程式內部a頁面向內嵌h5頁面跳轉,並且傳參 小程式中a頁面 js page 小程式中內嵌h5容器頁面index.wxml 放入小程式頁面的wxml 112 3456 78910 11page 遠端h5頁面獲取引數js 12 3456 78functiongeturlparam name var...