您现在的位置是：首页> 编程文章个人博客模板

小程序webview使用

无痕小Q个人博客 2020-02-05 22:42:49【主页】 1532人已围观

简介一、使用原因由于小程序包大小8M的限制 (之前版本) 我们组做的是公共活动、工具，业务方会拉取我们的代码，新活动会不断添加 H5小程序都做，维护成本会比较高

一、使用原因

由于小程序包大小8M的限制 (之前版本)
我们组做的是公共活动、工具，业务方会拉取我们的代码，新活动会不断添加
H5小程序都做，维护成本会比较高

二、webview引入思路

webview 安全域名申请
访问原先小程序活动重定向到webview容器页面并且在url后面追加一些参数（h5页面需要）
实现公共的webview页面，需要功能：分享回调、h5路径转发、身份token透传、刷新H5页面
H5页面实现功能兼容, 一些活动配置项、分享标题、分享图片、打点（跟小程序和h5环境相关）

三、代码实现

原小程序页面重定向webview页面方法包装

小程序webview代码实现

Page({
  /**
   * 页面的初始数据
   */
  data: {
    url: '', // webview 地址
    shareData: {}, // 分享参数
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      // TODO 登录信息获取
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (options) {
    // 这里把网址编码了下，用户分享的卡片进去的时候会在onload中得到webview的网址，解码后赋值给src属性就行了
    let that = this
    const shareInfo = {
      title: that.data.shareData.title,
      path: `/pages/hudong/common/pages/hdview/index?url=${encodeURIComponent(that.data.shareData.url)}`,
      imageUrl: that.data.shareData.imgUrl
    }
    return shareInfo
  },
  /**
  * 分享回调
  */
  onShareback() {
    let that = this
    // 分享成功后 通知h5页面（h5有配置xxxback的话）， 调用之后需要手动删除 xxxback
    that.refreshH5(that.data.shareData.xxxback)
    delete that.data.shareData.xxxback
  },
  /**
  * 初始化信息
  */
  initData(options, userInfo = {}) {
    let url = decodeURIComponent(options.url);
    const { openid, appid, token } = userInfo;
    let statType = ''
    // 记录当前options的链接
    this.data.shareData.url = url
    // h5链接xxxxxxx=xxxxxxxxx 标识
    const navUrl = `${url}${url.indexOf('?') > -1 ? '&' : '?'}xxxxxxx=${token}&dotStatType=${statType}`
    this.setData({
      url: navUrl
    })
  },
  // 接收h5发送的数据
  getMessage(e) {
    const that = this
    const data = e.detail.data
    let action = ''
    // 注意：每次发送数据后数据会添加到e.detail.data中的数组，
    // 并不会清除掉上一次传递的数据，所以我们取数组的最后一位 
    if(data.length > 0) {
      let item = data[data.length - 1]
      action = item.action
      switch(action) {
        case 'share':
          that.dealH5Share(item)
          break
        case 'saveFormId': // TODO 
          that.dealSaveFormId(item)
          break
      }
    }
  },
  // 处理接收到h5数据 分享操作 
  dealH5Share(data) {
    const that = this
    if(data) {
      that.data.shareData = data
    }
  },
  // 处理接收到h5数据 保存formId操作 （待拓展）
  dealSaveFormId() {
    // TODO
    debugger
  },
  // 刷新H5页面当前
  refreshH5(xxxback) {
    if(typeof xxxback != 'object') {
      return false
    }
    const oldUrl = this.data.url
    let newUrl = oldUrl
    const oldParams = ParseURL(oldUrl)
    // 删除历史
    oldParams.xxxback && (newUrl = newUrl.replace(`xxxback=${oldParams.xxxback}`, ``))
    newUrl += `&xxxback=${(JSON.stringify(xxxback))}`
    this.setData({
      url: newUrl
    })
  }

H5分享相关改造

  /** 
  * 获取指定的URL参数值 
  * 参数：paramName URL参数 
  * 调用方法:getQueryParam("name") 
  * 返回值:tyler 
  */
  function _getQueryParam(paramName) {
    paramValue = "", isFound = !1;
    if (window.location.search.indexOf("?") == 0 && window.location.search.indexOf("=") > 1) {
      arrSource = decodeURIComponent(window.location.search).substring(1, window.location.search.length).split("&"), i = 0;
      while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++
    }
    return paramValue == "" && (paramValue = null), paramValue
  }
  // 判断是否是小程序环境
  function IsMiniProgramEnv(fun) {
    // 通过navigator.userAgent 判断
    var bl = navigator.userAgent && navigator.userAgent.indexOf('miniProgram') > -1
    if (typeof fun == 'function') {
      fun(bl)
    }
  }
  // 初始化执行
  IsMiniProgramEnv(function (bl) {
    if (bl) {
      IsInMiniProgram = true
      // 判断是否是小程序环境
      _initMiniData()
    }
  })
  // 设置小程序分享
  function SetMiniProgramShare(url, title, imgUrl, fun) {
    if (title && url && imgUrl) {
      IsMiniProgramEnv(function (bl) {
        if (bl) {
          // 向小程序发送消息
          var data = {
            action: 'share', // 触发修改分享参数动作
            url: url,
            title: title,
            imgUrl: imgUrl
          }
          if(typeof fun === 'function') {
            data.xxxback = fun() || {}
          }
          wx.miniProgram.postMessage({ data: data })
        }
      })
    }
  }
  // H5跳转小程序路径
  function _NavigateToMiniProgram(url) {
    var newUrl = '/pages/hudong/common/pages/bridge/index?url=' + encodeURIComponent(url)
    wx.miniProgram.navigateTo({
      url: newUrl
    })
  }
  function _initMiniData() {
    
  }
  // 重新包装链接跳转， 用于跳转业务方的小程序地址或者h5页面地址
  function HrefToBusiness(url) {
    if(!url) {
      return false;
    }
    // 是小程序环境， 并且不是h5链接
    if(IsInMiniProgram && url.split("?")[0].indexOf('http') == -1) {
      _NavigateToMiniProgram(url)
    } else {
      window.location.href = url
    }
  }

webview改造原有小程序项目利弊

优点