微信端H5的相關(guān)問題總結(jié)

微信端路由(帶[#])跳轉(zhuǎn)問題

問題描述：在微信端頁面路由跳轉(zhuǎn)成功，但將跳轉(zhuǎn)頁分享出去會發(fā)現(xiàn)分享出去的鏈接為初始頁面鏈接，導(dǎo)致與預(yù)期不一致的結(jié)果。
問題原因：在微信端瀏覽器中由路由跳轉(zhuǎn)的spa應(yīng)用，url將不會刷新，尤其體現(xiàn)在ios端
解決方案：不使用路由跳轉(zhuǎn)，改成使用location.href等方式跳轉(zhuǎn)

代碼參考如下

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

微信二次分享問題

1. 微信二次分享需要使用jssdk，因此需要引用weixin-js-sdk（注：引用方式可以全局引用；也可以使用es6模塊的方式引用，使用npm install weixin-js-sdk安裝，然后通過import wx from 'weixin-js-sdk'引用）。
2. 微信 jssdk 中的api wx.config({xxx}) 中需要提供簽名（signature字段），簽名通過發(fā)送請求至 https://xxx/signature?_=new Date().getTime()&url=encodeURIComponent(url) 獲取，此處需要注意一個(gè)細(xì)節(jié)url，url必須跟當(dāng)前頁面一致（hash部分不需要）,否則獲得的簽名在wx.config({xxx})的校驗(yàn)中將會報(bào)簽名不合法的錯(cuò)誤。

微信二次分享配置詳情

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

const wex = {
  shareTwo(obj) {
    obj = Object.assign({}, {
      title: 'xxx', // 二次分享標(biāo)題
      msg: 'xxx',   // 二次分享內(nèi)容
      imgUrl: 'xxx',// 二次分享圖標(biāo)
      url: window.location.href, // 當(dāng)前頁面地址（注：！！特別重要，要用于獲取簽名）
      link: '' // 二次分享的鏈接地址
    }, obj)
    let wxReady = false // 設(shè)置wxReady的狀態(tài)為false
    let wxConfigParam = { // 基本的一些wxConfig的一些配置
      debug: false,
      appId: 'xxx',
      jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 配置需要調(diào)用的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) {
        // 請求成功后獲取簽名等信息，并將其寫入配置項(xiàng)
        wxConfigParam.timestamp = res.data.timestamp
        wxConfigParam.nonceStr = res.data.nonceStr
        wxConfigParam.signature = res.data.signature
        // wx.config()是所有步驟的前提，這步報(bào)錯(cuò)將無法繼續(xù)后續(xù)操作
        wx.config(wxConfigParam) 
        if (wx && !wxReady) {
          wx.ready(function () {
            let commonShareData = {
              title: obj.title,    // 分享標(biāo)題
              link: obj.link,  // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
              desc: obj.msg,  // 分享描述
              imgUrl: obj.imgUrl,  // 分享圖標(biāo)
              success: function () {
                wxReady = true
              }
            }
            wx.onMenuShareTimeline(commonShareData) //  “分享到朋友圈”
            wx.onMenuShareAppMessage(commonShareData)   // “分享給朋友”
            wx.onMenuShareWeibo(commonShareData)   // “分享到騰訊微博”
            wx.onMenuShareQQ(commonShareData)        // “分享到QQ”
            wx.onMenuShareQZone(commonShareData)  // “分享到QQ空間”
          })
        }
      }
    })
  }
}

export {wex}

工具類總結(jié)

下面將提供幾個(gè)比較實(shí)用的工具類

• 判斷是否是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'

• 獲取想要獲取的查詢參數(shù)

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
  }
}

• 獲取所有的查詢參數(shù)

/**
 * 獲取URL所有查詢參數(shù)
 * @return {Object} searchObj
 */
function getParams() {
  let name = '', value = '', searchObj = {};
  let str = location.href; //取得整個(gè)地址欄
  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("&"); //各個(gè)參數(shù)放到數(shù)組里
  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
}

• 將查詢參數(shù)對象轉(zhuǎn)換為查詢參數(shù)字符串

/**
 *  將查詢參數(shù)對象轉(zhuǎn)換為查詢參數(shù)字符串
 *  @param {Object} searchObj
 *  @return {String} searchOptions
 * */
function ObjToSearchOptions(searchObj, otherSearchObj = {}) {
  searchObj = Object.assign(searchObj, otherSearchObj) // 進(jìn)行參數(shù)的合并（此處為淺拷貝）
  let searchArr = []
  for (let [key, value] of Object.entries(searchObj)) {
    value !== '' && value !== undefined && value !== null && searchArr.push(`${key}=${value}`)
  }
  return `?${searchArr.join('&')}`
}

• 不同終端（IOS，Android，...）調(diào)用起好車主App的方案

/**
 * jumpDownloadView：跳轉(zhuǎn)到好車主app，并打開指定頁面
 * @param {String} targetUrl
 * */
let jumpDownloadView = function (targetUrl) {
  // 配置打開app后的跳轉(zhuǎn)地址
  let href = targetUrl || URL.POLICY + '/activities/invite/index.html'
  if (isiOS) {
    // IOS平臺
    try {
      // 若支持 carowner 協(xié)議（注：也就是安裝了好車主APP）
      window.location.href = 'carowner://?url=' + encodeURIComponent(href)
    } catch (e) {
      // 未安裝好車主APP的跳轉(zhuǎn)下載
      window.location.
    }
  } else if (isAndroid) {
    // Android平臺
    window.location. + href
  } else {
    // 其他平臺
    window.location.
  }
}