寫在前面的廢話

最近產品提出了一個要求要通過種果樹送水果的方式是來促活，而里面就涉及到了分享領水滴，由于一開始想的是小程序和微網頁都要使用這個功能，所以直接用h5來開發。小程序端則直接使用web-view來嵌入網頁，本文旨在分享自己在小程序里如何實現內嵌網頁分享的過程。

一.web-view嵌入網頁地址，并設置安全域名

小程序wxml

<web-view src="{{neturl}}" bindmessage="bindmessage"></web-view>

neturl就是你寫的網頁的地址，但是需要你登錄小程序的后臺管理，在開發->開發設置->業務域名中設置你要嵌入的網頁地址

配置成功后可在開發者工具詳情中看到你的業務域名

二.實現分享功能

通過了解我們知道小程序到web-view的信息傳遞是通過地址參數實現的，而web-view到小程序的通信則是：web-view通過wx.miniProgram.postMessage向小程序發送消息，小程序通過bindmessage事件來監聽網頁向小程序發送的消息。

實現思路如下：點擊網頁中的分享按鈕，彈出圖層引導用戶通過右上角小程序的分享按鈕來進行分享，由于現在小程序分享沒有成功的回調函數，所以這一引導頁既可以起到引導用戶分享的效果，也起到了強制用戶分享的效果。

網頁：

wx.miniProgram.getEnv(function (res) {if(res.miniprogram){$(".conimg").css("display","block"); //彈出引導頁wx.miniProgram.postMessage({data:"daygetwater"}); }}) 復制代碼

小程序：

bindmessage(e){console.log(e.detail.data);this.setData({sharekind: e.detail.data[e.detail.data.length - 1],})},/*** 用戶點擊右上角分享*/onShareAppMessage: function (options) {let shareObj={};if (this.data.sharekind =="daygetwater"){shareObj = {title: '快來和我一起免費領水果吧！', // 分享標題path: "pages/fruitGarden/fruitGardenindex/fruitGardenindex?url=https://img.ishop-hot.com", imageUrl: "../../../image/guoyuan/shareimg.png", // 分享圖標}} 復制代碼

注意：

message事件觸發的條件文檔是這樣說的：網頁向小程序 postMessage 時，會在特定時機（小程序后退、組件銷毀、分享）觸發并收到消息。所以，當你點擊網頁中的“通信”按鈕時還不會觸發message事件，只有點擊小程序右上角的分享才會觸發執行。

e.detail={data}即e.detail就是通信的對象，操作兩次輸出e.detail.data 可以看到e.detail.data是多次 postMessage 的參數組成的數組。

onShareAppMessage里面的path只能放當前項目里面的頁面路徑，所以把web-view的地址放在url的頁面參數上， 在進入頁面時先判斷頁面參數url是否有值。

三.頁面的刷新

由于有引導頁的存在導致即使分享之后，頁面也還是保持原樣，這樣用戶就不能進行剩下的操作所以我們需要對當前頁進行刷新。 利用web-view里src的地址變化來刷新頁面，而地址是固定的，但我們可以通過改變查詢字符串share來實現地址的變化。

Page({/*** 頁面的初始數據*/data: {neturl:"",sharekind:"",shareurl:'',shareid:0, //刷新頁面的參數},bindmessage(e){console.log(e.detail.data);this.setData({sharekind: e.detail.data[e.detail.data.length - 1],})},//刷新當前頁方法toshare(){let uid = wx.getStorageSync('uid');let newshareid = this.data.shareid ? 0 : 1; //參數如果為1則更新為0this.setData({shareid: newshareid ,})this.setData({neturl: "https://img.ishop-hot.com/?uid=" + uid + "&share=" + this.data.shareid,})},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {console.log();if (options.url){this.setData({neturl: options.url,})}let uid = wx.getStorageSync('uid');if (!uid){wx.navigateTo({url: '/pages/logs/logs',})}this.setData({neturl: "https://img.ishop-hot.com?uid=" + uid,})},/*** 用戶點擊右上角分享*/onShareAppMessage: function (options) {// console.log(options.webViewUrl);this.toshare(); //分享刷新頁面let shareObj={};if (this.data.sharekind =="daygetwater"){shareObj = {title: '快來和我一起免費領水果吧！', // 分享標題path: "pages/fruitGarden/fruitGardenindex/fruitGardenindex?url=https://img.ishop-hot.com/?share=1",imageUrl: "../../../image/guoyuan/shareimg.png", // 分享圖標}}return shareObj;} }) 復制代碼

四.頁面回退

頁面刷新成功后你會發現你在回退時需要回退兩次才是我需要到的頁面。

解決方案：只有分享后地址才會有share的參數，網頁可以根據share來進行判斷,符合則后退一次。

網頁：

//對查詢字符串的處理var getUrlParam=function(param) {var url = window.location.search; //獲取url中"?"符后的字串var theRequest = new Object();if (url.indexOf("?") != -1) {var str = url.substr(1);strs = str.split("&");for(var i = 0; i < strs.length; i ++) {theRequest[strs[i].split("=")[0]]=strs[i].split("=")[1];}}return theRequest[param];}var share=getUrlParam('share');//處理頁面加載兩次的效果console.log(share);if(share=='1' || share=='0'){console.log('00000');window.history.go(-1);} 復制代碼

五.實現效果如下

以上就是本次實現分享的一些心得，只是自己的一些拙見，由于自己剛剛工作又是獨自研究的，寫的不好的地方歡迎批評指教！這次還有一個卡住的地方竟然是web-view的調試，鼓搗了很久，也是被自己蠢哭了！在模擬器上打開web-view所在頁面點擊右鍵->調試。

轉載于:https://juejin.im/post/5c8092cd6fb9a049f746f8ce

總結

以上是生活随笔為你收集整理的工作章 - 小程序web-view分享 流泪爬坑记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。