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{

            }

          }

        );