微信端二次分享开发有感（2018-07-28）

微信端H5的相关问题总结

微信端路由(带[#])跳转问题

问题描述：在微信端页面路由跳转成功，但将跳转页分享出去会发现分享出去的链接为初始页面链接，导致与预期不一致的结果。
问题原因：在微信端浏览器中由路由跳转的spa应用，url将不会刷新，尤其体现在ios端
解决方案：不使用路由跳转，改成使用location.href等方式跳转

代码参考如下

this.$router.push({name: 'xxx'}） ->  location.href('xxx')

微信二次分享问题

微信二次分享需要使用jssdk，因此需要引用weixin-js-sdk（注：引用方式可以全局引用；也可以使用es6模块的方式引用，使用npm install weixin-js-sdk安装，然后通过import wx from 'weixin-js-sdk'引用）。
微信 jssdk 中的api wx.config({xxx}) 中需要提供签名（signature字段），签名通过发送请求至 https://xxx/signature?_=new Date().getTime()&url=encodeURIComponent(url) 获取，此处需要注意一个细节url，url必须跟当前页面一致（hash部分不需要）,否则获得的签名在wx.config({xxx})的校验中将会报签名不合法的错误。

微信二次分享配置详情

import axios from 'axios'
import wx from 'weixin-js-sdk'

const wex = {
  shareTwo(obj) {
    obj = Object.assign({}, {
      title: 'xxx', // 二次分享标题
      msg: 'xxx',   // 二次分享内容
      imgUrl: 'xxx',// 二次分享图标
      url: window.location.href, // 当前页面地址（注：！！特别重要，要用于获取签名）
      link: '' // 二次分享的链接地址
    }, obj)
    let wxReady = false // 设置wxReady的状态为false
    let wxConfigParam = { // 基本的一些wxConfig的一些配置
      debug: false,
      appId: 'xxx',
      jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 配置需要调用的jsApi
    }
    axios({
      url: `https://xxx/signature?_=${new Date().getTime()}&url=${encodeURIComponent(obj.url)}`,
      method: 'get'
    }).then(function (res) {
      if (res.status === 200 && res.data) {
        return res.data
      } else {
        return Promise.reject()
      }
    }).then(function (res) {
      if (res.code === 0) {
        // 请求成功后获取签名等信息，并将其写入配置项
        wxConfigParam.timestamp = res.data.timestamp
        wxConfigParam.nonceStr = res.data.nonceStr
        wxConfigParam.signature = res.data.signature
        // wx.config()是所有步骤的前提，这步报错将无法继续后续操作
        wx.config(wxConfigParam) 
        if (wx && !wxReady) {
          wx.ready(function () {
            let commonShareData = {
              title: obj.title,    // 分享标题
              link: obj.link,  // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              desc: obj.msg,  // 分享描述
              imgUrl: obj.imgUrl,  // 分享图标
              success: function () {
                wxReady = true
              }
            }
            wx.onMenuShareTimeline(commonShareData) //  “分享到朋友圈”
            wx.onMenuShareAppMessage(commonShareData)   // “分享给朋友”
            wx.onMenuShareWeibo(commonShareData)   // “分享到腾讯微博”
            wx.onMenuShareQQ(commonShareData)        // “分享到QQ”
            wx.onMenuShareQZone(commonShareData)  // “分享到QQ空间”
          })
        }
      }
    })
  }
}

export {wex}

工具类总结

下面将提供几个比较实用的工具类

判断是否是ios端

let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

判断安卓终端

let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1

判断是否在微信端

let isWeiXin = ua.match(/MicroMessenger/i) == 'micromessenger'

获取想要获取的查询参数

function getQueryString(name) {
  const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
  const w = window.location.search.split('?')
  const r = w.length === 2 && w[1] || ''
  let reStr = ''
  let urlArr = []
  w.length === 2 && w[1].replace("?", '') && w[1].split('&').forEach((v) => {
    let i = v.split('=')
    urlArr[i[0]] = i[1]
  })
  if (name) {
    reStr = r.match(reg) !== null ? r.match(reg)[2] : false
    return reStr
  } else {
    return urlArr
  }
}

获取所有的查询参数

/**
 * 获取URL所有查询参数
 * @return {Object} searchObj
 */
function getParams() {
  let name = '', value = '', searchObj = {};
  let str = location.href; //取得整个地址栏
  let questionMark = str.indexOf('?')
  let hashMark = str.indexOf('#')
  str = questionMark > hashMark ? str.substring(questionMark + 1) : str = str.substring(questionMark + 1, hashMark)
  let arr = str.split("&"); //各个参数放到数组里
  for (var i = 0; i < arr.length; i++) {
    let num = arr[i].indexOf("=");
    if (num > 0) {
      name = arr[i].substring(0, num);
      value = arr[i].substr(num + 1);
      searchObj[name] = value;
    }
  }
  return searchObj
}

将查询参数对象转换为查询参数字符串

/**
 *  将查询参数对象转换为查询参数字符串
 *  @param {Object} searchObj
 *  @return {String} searchOptions
 * */
function ObjToSearchOptions(searchObj, otherSearchObj = {}) {
  searchObj = Object.assign(searchObj, otherSearchObj) // 进行参数的合并（此处为浅拷贝）
  let searchArr = []
  for (let [key, value] of Object.entries(searchObj)) {
    value !== '' && value !== undefined && value !== null && searchArr.push(`${key}=${value}`)
  }
  return `?${searchArr.join('&')}`
}

不同终端（IOS，Android，...）调用起好车主App的方案

/**
 * jumpDownloadView：跳转到好车主app，并打开指定页面
 * @param {String} targetUrl
 * */
let jumpDownloadView = function (targetUrl) {
  // 配置打开app后的跳转地址
  let href = targetUrl || URL.POLICY + '/activities/invite/index.html'
  if (isiOS) {
    // IOS平台
    try {
      // 若支持 carowner 协议（注：也就是安装了好车主APP）
      window.location.href = 'carowner://?url=' + encodeURIComponent(href)
    } catch (e) {
      // 未安装好车主APP的跳转下载
      window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.pingan.carowner#rd'
    }
  } else if (isAndroid) {
    // Android平台
    window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.pingan.carowner&android_schema=pinganhczapp://com.pingan.carowner?url=web://' + href
  } else {
    // 其他平台
    window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.pingan.carowner#rd'
  }
}

微信端二次分享开发有感（2018-07-28）

微信端H5的相关问题总结

微信端路由(带[#])跳转问题

微信二次分享问题

微信二次分享配置详情

工具类总结

推荐阅读更多精彩内容