工做章 - 小程序web-view分享 流淚爬坑記

寫在前面的廢話

最近產品提出了一個要求要經過種果樹送水果的方式是來促活，而裏面就涉及到了分享領水滴，因爲一開始想的是小程序和微網頁都要使用這個功能，因此直接用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", // 分享圖標
      }
    }
複製代碼

注意：

1. message事件觸發的條件文檔是這樣說的：網頁向小程序 postMessage 時，會在特定時機（小程序後退、組件銷燬、分享）觸發並收到消息。因此，當你點擊網頁中的「通訊」按鈕時還不會觸發message事件，只有點擊小程序右上角的分享纔會觸發執行。
2. e.detail={data}即e.detail就是通訊的對象，操做兩次輸出e.detail.data

   

   能夠看到e.detail.data是屢次 postMessage 的參數組成的數組。
3. 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則更新爲0
    this.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所在頁面點擊右鍵->調試。