微信h5开发（网页授权、config、jsapi支付）

微信开发者文档

网页授权snsapi_base(静默)和snsapi_userinfo(手动)的区别

1、snsapi_base：用户无感知，用来获取用户openid，静默授权自动跳转到回调页面
2、snsapi_userinfo：需要用户手动同意，用来获取用户基本信息，同意后，无需关注公众号就可以获取到用户的基本信息
3、特殊场景下的静默授权
已关注公众号的用户，用户从公众号的会话或自定义菜单进入本公众号的网页授权，即使是snsapi_userinfo也为静默

网页授权access_token和普通access_tokende的区别

1、用户授权给公众号之后，公众号可以获取到一个网页授权特有的接口凭证（网页授权access_token），则可以进行授权后的接口调用，如用户基本信息
2、其他微信接口，需要通过基础支持中的“获取access_token”接口来获取到的普通access_token调用。

授权流程和参数开发文档都有，就不粘贴复制啦～这里直接粘贴我的前端代码

安装 weixin-js-sdk

npm install weixin-js-sdk

网页授权（需要授权的页面代码）

import { wxconfig,wxPay } from '@/assets/api/wxconfig'  //这是我的微信配置文件

 mounted(){
    this.init()
  },
  methods:{
    init() {
      if(!localStorage.getItem('code')){//因为进来页面就进行授权，有一个值去判断是不是去跳转
        axios.get('/openwxurl',{params: {id:1}}).then(res => {
            if(res.code === 10000){
              localStorage.setItem('code',true)
              location.href = res.data.url
            }
        })
      } else{
        this.sendCode() //有就直接调用发送code换取access_token 的方法
      }
    },
    sendCode(){
      if(!localStorage.getItem('openId')){ 
        //getUrlItem()是我写的一个获取url参数的方法
        axios.get('/getAccessToken',{params: {code: getUrlItem('code')}}).then(res => {
            if(res.code === 10000){
               localStorage.setItem('openId',res.data.openId)
              this.getwxconfig()
            }
        })
      } else{
        this.getwxconfig()
      }
    //**静默授权做到这一步流程结束，我们的项目是静默授权，所以授权就写到这里啦～～～～**
    },
    getwxconfig(){ //这里去调用微信config配置需要的信息
      axios.get('/getWxconfig',{params: {url: location.href.split('#')[0]}}).then(res => {
        if(res.code === 10000){
          wxconfig(res.data) //调用微信的配置
        }
      })
    },
    submitPay(){//获取调用支付接口的参数
      axios.post('/getPay',this.form).then(res => {
        if(res.code === 10000) {
          wxPay(res.data)//调用微信支付
        }
      })
    }

JSSDK调用（我的配置文件wxconfig.js）

import wx from 'weixin-js-sdk'

export const wxconfig = ({ timestamp, nonceStr, signature, appId  }) => {
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId, // 必填，公众号的唯一标识
        timestamp, // 必填，生成签名的时间戳
        nonceStr,// 必填，生成签名的随机串
        signature,// 必填，签名
        jsApiList: [
            'chooseWXPay'
        ] // 必填，需要使用的JS接口列表
    });
    wx.ready(function(){
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
      });
    wx.error(function(res){
        console.log(res)
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      });
}
export const wxPay = ({ timestamp, nonceStr, packages,signType ,paySign}) => {
    wx.chooseWXPay({
        timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr, // 支付签名随机串，不长于 32 位
        package: packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
        signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign, // 支付签名
        success: function (res) {
          console.log(res)
          // 支付成功后的回调函数
        }
      });
}

以上，这两天的成果，由于数据都是后台获取的，主要的难度在后台，尤其是签名很难搞，熟读文档就可以啦～～