如果你是vue 可参考： vue h5 公众号支付

后端的小伙伴需要做一些微信公众号的配置（商户目录 、域名） 以及 微信 商户平台的配置

前端主要的是通过code 获取 openid 来调起后端的接口拿到支付的参数 来对接微信 的sdk的方法

记得要用公众号账号把自己添加到开发者中

首先通过链接  微信 官方平台的链接来获取 code 微信开放文档

https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=${encodeURIComponent(window.location.href)}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect

 参数说明：

 一、获取code及token

首先把uniapp的路由配置 修改成 history  否则e.query拿不到 code数据

App.vue

<script>
 import {
 	getOpenid
 } from '@/api'
 
	export default {
		onLaunch: function(e) {
      if (!e.query.code) {
      	console.log('获取code');
      	getApp().authorization()
      } else if (e.query.code) {
      	getApp().getOpenid(e.query.code)
      }
		},
    methods: {
    	// 拿code
        authorization(){
            window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=${encodeURIComponent(window.location.href)}&response_type=code&scope=snsapi_userinfo&state=shangjiazhanshi&connect_redirect=1#wechat_redirect`
        },
       // 获取openid
       async getOpenid(code) {
       	try {
       		const res = await getOpenid(code)
       		console.log('getOpenid', res)
          uni.setStorageSync('token', res.token)
       		// uni.setStorageSync('openId', res.openid)
       		// 保存数据
       	} catch (err) {
       		setTimeout(() => {
       			uni.showToast({
       				title: err,
       				icon: 'none'
       			})
       		}, 300)
       		console.log('getOpenid', err)
       	}
       },
    },
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

讲解：

1. 由于最终获取的code是 通过url？路径拼接的形式返回的，所以当路径没有code参数时跳转到微信授权获取code

2.如果参数中已经存在了code 直接拿code换取openid或者token  返回的参数取决于后端之后接口需要的参数

3.存储openid 或者 code

如果要调试 需要拿微信开发者工具 进入公众号网页调试

二、授权及支付

安装微信的sdk  概述 | 微信开放文档

npm install jweixin-module --save

再要支付的页面中引入sdk文件，由于是直接在微信环境下不再做其他校验，如果是浏览器环境下可参考顶部支付文章

var wx = require('jweixin-module')

<template>
      <view class="btn flexC" @click="buy">
        立即购买
      </view>

</template>

<script>
  var wx = require('jweixin-module')
  import {
    payiphone
  } from '@/api'
  export default {
    methods: {
      async buy() {
        try {
          const res = await payiphone(1)
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.appId, // 必填，公众号的唯一标识
            timestamp: res.timeStamp, // 必填，生成签名的时间戳
            nonceStr: res.nonceStr, // 必填，生成签名的随机串
            signature: res.paySign, // 必填，签名
            jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
          })
          wx.ready(function() {
            wx.chooseWXPay({
              timestamp: res.timeStamp, // 时间戳
              nonceStr: res.nonceStr, // 随机数
              package: res.package, //
              signType: res.signType,
              paySign: res.paySign, // 签名
              success: function() {
                uni.showToast({  title:'支付成功' })
              },
              cancel: function() {
               uni.showToast({ title:'取消支付',  icon:'none' })
              },
              fail: function() {
                uni.showToast({title:'支付失败',icon:'none'
                })
              }
            })
          })
          // 保存数据
        } catch (err) {
          uni.showToast({
            title: err,
            icon: 'none'
          })
          console.log('buy', err)
        }
      },

   
   
    },
  }
</script>

讲解：

1. 在使用微信的一些方法时需要先通过 config 接口注入权限验证配置  参数可以调用接口来获取

2. 通过 ready 接口处理成功验证

3. 发起微信支付请求