vue开发小结(下)

前言

　　继前几天总结了vue开发小结(上)后，发现还有很多的点没有能列举出来，于是还是打算新建一个下篇，再补充一些vue开发中需要注意的细节，确实还是都是细节的问题，我只是在这里强调下，希望对大家有帮助(ps：另关于管理端的貌似我还没写，说不定还有一篇，哈哈)。

正文

　　这次主要大概总结下vue history模式下微信分享和微信支付的细节。

　　一、微信分享

　　首先vue history模式下，vue是通过history.pushState API 来完成 URL 跳转实现路由的加载的，因此和多页面的实现是不一致的。而在安卓和IOS URL的切换上却有这不同的实现。

　　对于Android，它的每次路由的变换，URL都跟着改变，也就是说它的Landing Page和Current Page同时在变，这就和多页应用实现一样需要在对应做分享的页面做签名。但是对IOS而言，每次路由的变换，URL却不变，也就是说虽然它的Currernt Page在变，但是它的Landing Page不变，所以在做分享的时候就可不需要做处理，只需在Loading Page做分享即可。

　　另，还要一个需要注意的重点，即时做微信分享时候，对应的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
    });
  })
}

　　二、微信支付

　　微信支付需要强调的点就是参数不要写错，包括大小写(ps：前端要是唤起支付失败，我总结出来的点就是参数写错了，如果还有其他问题的话，我觉得你可以直接甩锅为后台)

　　前端唤起支付大致流程即，前端调用后台支付接口换取appId公众号id，timeStrap时间戳，nonceStr随机数，package预支付id，签名paySign和前端设置加密为MD5(ps：一般为md5加密)，然后调用WeixinJSBridge即可

//传必要参数后获取公众号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{

            }
          }
        );

最后

　　其实在微信分享和微信支付上面，最重要的还是注意细节~~~