工作章 - 小程序web-view分享流泪爬坑记-CSDN博客

写在前面的废话

最近产品提出了一个要求要通过种果树送水果的方式是来促活，而里面就涉及到了分享领水滴，由于一开始想的是小程序和微网页都要使用这个功能，所以直接用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则更新为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);
    }
复制代码