uniapp微信小程序支付，并设置订阅消息

使用uniapp开发的一个电商小程序，使用微信支付。用户消费会得到积分，支付完成后，积分的变动需要通过微信公众号进行提醒。

整体流程，用户选择好商品后，点击立即购买，然后提交订单。然后弹出申请消息通知弹窗，选择好后，调用接口，获取支付信息，唤起支付，最后支付完成，公众号收到消息

提前将微信支付信息和消息模板这些配置好

代码实现:

提交订单页面

js 复制代码

// $u.debounce这个方法是u-view提供的，一个防抖的方法
<view class="pay-btn" @click="$u.debounce(subOrder, 1500,true)">提交订单</view>

<script>
// 将支付方法封装在mixin里面的  也可以直接拿出来用
import { mixin }  from '@/common/pay.js'

export default {
  mixins: [mixin], //混入文件

  methods:{
  // 提交订单
    subOrder() {
      //  ...提交订单前的一些判断
      if (!this.isCheck) {
         return this.$ui.textToast('请先同意商品购买协议')
      }
      if (!this.addressInfo?.id) {
         return this.$ui.textToast('请先选择收货地址')			
      }
      // 加载loding
      this.$ui.showLoading()
      // 提交订单接口所需要的数据
      const data = {        
         is_shopping: 0,
         address_id: this.addressInfo,
         commodity_price: this.orderInfo.commodity_amount,
         price: this.orderInfo.amount,
         pay_method:1,
      }
      // 请求提交订单接口
      orderSubmit(data).then(res => {
         // 关闭加载
         this.$ui.hideLoading()
         // 调用mixin中的支付方法
         this.orderPayment()
      })  
     },
    }
  }
</script>

pay.js 正常情况下是支付成功后在弹出这个消息通知申请的，我这里是因为后端需要判断，所以房租前面的，注意这个弹窗只能在支付回调还有通过点击按钮触发

js 复制代码

// 接口方法
import { orderPay} from '@/api/order.js'

export const mixin = {
	 data() {
      return {
           
      }
	 },
         
   methods:{
     // 结构所需的参数
     orderPayment({ id, order_no, pay_method, payType, price }){
       const _this = this
       // 弹出消息通知申请
       uni.requestSubscribeMessage({
          //此处填写刚才申请模板的模板ID
	       tmplIds: ['oDnJ7QGEdhR-roapx......'],
		  success(res) {
                    // 调用支付方法
		    _this.wxpay(id, order_no, pay_method, payType, price)
		  }
	     })
     },
     // 微信支付
     async wxpay(id, order_no, pay_method, payType, price){
       uni.showLoading({
         mask:true, 
	       title:'加载中...'
       })
       const data = {
               order_id: id,
	             order_no
	     }
       // 调用接口
       const res = await orderWxShopPay(data)
       const _this = this
       uni.hideLoading()
       
       // 唤起微信支付
       wx.requestPayment({
	        timeStamp: String(res.data.timeStamp),
	        nonceStr: String(res.data.nonceStr),
	        package: String(res.data.package),
          signType: String(res.data.signType),
          paySign: String(res.data.paySign),
		success() {
		  _this.$ui.textToast('微信支付成功')
		  _this.toOrder(payType)
		},
		fail(err) {
		  console.log(JSON.stringify(err))
	          _this.$ui.textToast('支付失败')
		}
       }); 
     }
   }，
   
   // 根据type跳转到不同的页面
   toOrder(payType) {
     setTimeout(() => {
       if (payType === 'groupOrder') {
          return this.$Router.push('')
       }
       this.$Router.replace('')
	   }, 300)
   },
}

在补充些微信小程序订阅消息的内容

微信小程序消息推送是我们常见的业务开发场景，经研究实践，发送订阅消息可分成四个步骤：

申请消息模板：生成消息模板ID,确定模板详情:标题、内容等；
前端订阅消息：通过按钮或者支付回调向用户发起订阅消息的询问；
后端进行推送：用户同意订阅后，后端请求微信消息推送接口携带模板ID、模板内容（可理解成数据字段）用户open_id、跳转地址等参数进行推送；
用户收到消息：用户在服务通知中收到该模板消息的卡片，点击可转向小程序中的跳转地址,可传参。

关于微信小程序订阅消息这块，uni-app微信小程序订阅消息推送实践，写的很详细。