工做章 - 小程序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所在页面点击右键->调试。