vue開發小結(下)

時間 2019-11-09

標籤 vue 開發小結简体版

原文原文鏈接

前言

　　繼前幾天總結了vue開發小結(上)後，發現還有不少的點沒有能列舉出來，因而仍是打算新建一個下篇，再補充一些vue開發中須要注意的細節，確實仍是都是細節的問題，我只是在這裏強調下，但願對你們有幫助(ps：另關於管理端的貌似我還沒寫，說不定還有一篇，哈哈)。html

正文

　　此次主要大概總結下vue history模式下微信分享和微信支付的細節。前端

　　1、微信分享

　　首先vue history模式下，vue是經過history.pushState API 來完成 URL 跳轉實現路由的加載的，所以和多頁面的實現是不一致的。而在安卓和IOS URL的切換上卻有這不一樣的實現。vue

　　對於Android，它的每次路由的變換，URL都跟着改變，也就是說它的Landing Page和Current Page同時在變，這就和多頁應用實現同樣須要在對應作分享的頁面作簽名。可是對IOS而言，每次路由的變換，URL卻不變，也就是說雖然它的Currernt Page在變，可是它的Landing Page不變，因此在作分享的時候就可不須要作處理，只需在Loading Page作分享便可。api

　　另，還要一個須要注意的重點，即時作微信分享時候，對應的title，desc，img_url等參數須要用 絕對路徑。

　　附上封裝的wxShare文件，則只須要在 mounted時候調用分享便可

import wx from 'weixin-js-sdk'
import { getSign} from '../api/index'
const jsApiList = ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ','onMenuShareWeibo']

export function wxConfig() {
  const data={
    requestUrl:window.location.href
  }
  getSign(data)
    .then(res=>{
      wx.config({
        debug: false,
        appId: res.appId,
        timestamp: res.timestamp,
        nonceStr: res.nonceStr,
        signature: res.signature,
        jsApiList: jsApiList
      })
    })
}

export function wxShare(title,desc,curUrl,img_url,inviteCode) {
  const u=navigator.userAgent
  const link=curUrl //強調：參數需絕對路徑
  if(u.indexOf('Android')>-1){
    requireConfig()
  }
  wx.ready(()=> {
    wx.onMenuShareTimeline({
      title: title,
      desc:desc,
      imgUrl:img_url,
      link:link
    })
    wx.onMenuShareAppMessage({
      title: title,
      desc:desc,
      imgUrl:img_url,
      link:link,
      success: function success(result) {

      },
    });
    wx.onMenuShareTimeline({
      title: title,
      desc:desc,
      imgUrl:img_url,
      link:link
    });
    wx.onMenuShareQQ({
      title: title,
      desc:desc,
      imgUrl:img_url,
      link:link
    });
    wx.onMenuShareWeibo({
      title: title,
      desc:desc,
      imgUrl:img_url,
      link:link
    });
    wx.onMenuShareQZone({
      title: title,
      desc:desc,
      imgUrl:img_url,
      link:link
    });
  })
}

　　2、微信支付

　　微信支付須要強調的點就是參數不要寫錯，包括大小寫(ps：前端要是喚起支付失敗，我總結出來的點就是參數寫錯了，若是還有其餘問題的話，我以爲你能夠直接甩鍋爲後臺)微信

　　前端喚起支付大體流程即，前端調用後臺支付接口換取appId公衆號id，timeStrap時間戳，nonceStr隨機數，package預支付id，簽名paySign和前端設置加密爲MD5(ps：通常爲md5加密)，而後調用WeixinJSBridge便可app

//傳必要參數後獲取公衆號id等信息回調後判斷是否有WeixinJSBridge事件

if (typeof WeixinJSBridge == "undefined"){
                      if( document.addEventListener ){
                        document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
                      }else if (document.attachEvent){
                        document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
                        document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
                      }
                    }else{
                      this.onBridgeReady();
                    }

//後經過WeixinJSBridge喚起支付
WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            debug:true,
            "appId": appId,
            "timeStamp": response.timestamp,
            "nonceStr": response.noncestr,
            "package": response.package,
            "signType": "MD5",
            "paySign": response.sign,
          },
          function(res){
            const errMsg=res.errMsg ? res.errMsg :res.err_msg
            if(errMsg.indexOf("ok") != -1 ) {
             
            }else if(errMsg.indexOf("cancel") != -1 ){

            }else if(errMsg.indexOf("fail") != -1){
             
            }
            else{
              
            }
          }
        );