落地实施微信公众号的网页支付

起因：
最近项目里用到了小程序的支付，，这一块看微信文档比较顺畅。但做起公众号的网页支付，觉得文档就有点模糊不清楚，写的太多，没有可实现的code，查阅各种资料，才顺利完成支付；

一、 引入JSSDK

1. 绑定JS接口安全域名之后直接访问 sdk

2. 安装插件 weixin-js-sdk

window.wx = require('weixin-js-sdk')

二、 通过config接口注入权限验证配置

这里通过单独的wxConfig组件引入形式达到一次异步配置

<template>

</template>

<script>
import { getWxConfig } from "@/api/api"

export default {
  data(){
    return {

    }
  },
  created(){
    this.wxConfigInit()
  },
  methods:{
    wxConfigInit(){
      let _this = this;
      getWxConfig().then(data=>{
        window.wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: '你的appid', // 必填，公众号的唯一标识
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature,// 必填，签名
          jsApiList: [
            'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareWeibo', 'onMenuShareQZone',
            'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'onVoicePlayEnd',
            'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage',
            'translateVoice', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu',
            'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'closeWindow',
            'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard', 'chooseCard', 'openCard'
          ] // 必填，需要使用的JS接口列表
        });
        window.wx.ready(()=>{
          console.log('wx config ok!')
          _this.$emit('wxConfigReady')
        })
      })
    },
  }
}
</script>

<style scoped>

</style>

三、 支付

按照预下单、统一下单、获取下单sign， 支付顺序

preOrder({
				platform: 'GZH',
				type,
				userId: this.userInfo.id || 16
			}).then(orderNo => {
				let payAmount = type == 1 ? 3900 : 9900

				unifiedOrder({
					outTradeNo: orderNo,
					total_fee: payAmount
				}).then(data => {
					paySign({
						prepay_id: data.prepay_id
					}).then(data => {
						let params = {
							timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
							nonceStr: data.nonce_str, // 支付签名随机串，不长于 32 位
							package: data.package_str, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
							signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
							paySign: data.paySign,
						}
						window.wx.chooseWXPay({
							...params, // 支付签名
							success: () => {// 支付成功后的回调函数
								paySuccess({
									orderNo,
									payTime: data.timeStamp
								}).then(() => {
									alert('支付成功')
								})
							}
						});
					})
				})
			})

所有.then的都是封装好的后台接口调用