小程式內h5頁面,完成分享

2022-06-12 06:54:07 字數 1049 閱讀 2158

小程式內直聯h5的頁面(pages/webview/webview.js),該頁面為的容器,使用元件

需要bindmessage事件和postmessage方法

bindmessage:網頁向小程式 postmessage 時,會在特定時機(小程式後退、元件銷毀、分享)觸發並收到訊息。e.detail =

也就是說,該事件的觸發時機只有三種,是延遲的。

可以將分享的資料通過該事件獲取。

1、如何分享這個h5頁面

在pages/webview/webview.js這個容器頁面需要定義兩個事件:

//h5向小程式傳送的資料

h5postmessage: function (e) ,

// 使用者點選右上角分享

return

}

//該方法在頁面create完成之後就可以呼叫,不需要事件去觸發,提前將資訊發出去,等到點選分享的時候就可以獲取到這個資訊了

wx.miniprogram.postmessage() //重點,share.js是小程式的頁面中,從分享進入的h5的落地頁

});

在小程式中需要兩個頁面,來做web-view 的容器,乙個是內聯的h5頁面,乙個是分享出去後,從分享進入的頁面

2、怎麼從分享進入時,使頁面顯示的是分享的h5頁面

在/pages/share/share.wxml中

在/pages/share/share.js中:

onload: function (options) );

},// 使用者點選右上角分享

var path = '/pages/share/share.js';

var url = encodeuricomponent(options.webviewurl);

path += '?data=' + json.stringify();

return ;

}

小程式巢狀h5頁面

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

H5頁面微信分享

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

小程式中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...