uniapp 公众号支付

Posted 2022-11-25 奥特曼　

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

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

前端主要的是通过openid 获取 code 来调起后端的接口拿到支付的参数 来对接微信 的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

 参数说明：

参数	是否必须	说明
appid	是	公众号的唯一标识
redirect_uri	是	授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理
response_type	是	返回类型，请填写code
scope	是	应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过 openid 拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）
state	否	重定向后会带上 state 参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
#wechat_redirect	是	无论直接打开还是做页面302重定向时候，必须带此参数
forcePopup	否	强制此次授权需要用户弹窗确认；默认为false；需要注意的是，若用户命中了特殊场景下的静默授权逻辑，则此参数不生效

 一、获取code及token

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_base&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. 发起微信支付请求