uni-app支付功能

扫码查看原文

前言

近期一直在使用APP开发多端应用，IOS的APP、安卓的APP和H5网页，其中开发的APP使用到了微信和支付宝的支付，在此给大家分享出来，一起使用

前置条件：

1. 开发环境：windows

2. 开发框架：uni-app , H5+，nativeJS

3. 编辑器：HbuilderX 2.8.13

  　  4.兼容版本：安卓，IOS已作测试

此代码可以直接复制到uni-app项目中使用

正文开始：

1. 首先需要做一些相关配置

1.1 打开HbuilderX，配置manifest.json，选择App模块配置，勾选Payment支付；根据业务需要再勾选支付宝和微信支付；

1.2 微信支付需要配置appid、ios通用平台链接；支付宝在HbuilderX内无需任何配置；不过需要在支付宝付宝开放平台，创建应用时做一些配置。

2. 以下是具体代码页面部分

2.1 radio的值等于1，是微信支付，等于2是支付宝支付；通过@change事件获取到radio的值

<view class="pay_list_box">
  <radio-group @change="radioChange">
    <label class="pay_list">
      <view class="l_box">
        <view class="top">
          <image class="t_img" src="/static/images/pay_icon2.png" mode="">image>
          <view>微信view>
        view>
      view>
      <view class="r_radio">
        <radio value="1" color="#44bb53" style="transform:scale(0.8)"/>
      view>
    label>
    <label class="pay_list">
      <view class="l_box">
        <view class="top">
          <image class="t_img1" src="/static/images/pay_icon1.png" mode="">image>
          <view>支付宝view>
        view>
      view>
      <view class="r_radio">
        <radio value="2" color="#44bb53" style="transform:scale(0.8)"/>
      view>
    label>
  radio-group>
view>
<view class="zf_btn" @click="pay">提交view>

3. 以下是样式部分

4. 以下是具体的代码逻辑部分

4.1 通过后端获取到订单信息；再通过订单信息获取到服务商信息和支付配置信息

4.2 最后通过 uni.requestPayment 支付；

5.通过servicesInfo方法获取订单信息，取到订单的基本信息

5.1 向 pay 方法传递订单基本信息，获取到服务商信息和支付配置信息

5.2 通过 appPay 方法调用uni.requestPayment函数发起支付；

5.3 uni.requestPayment发起支付时，传递两个重要参数provider、orderInfo

5.3.1 provider：支付类型，支付宝（alipay）或者微信 (wxpay)

5.3.2 orderInfo: 通过 pay 方法请求接口获取到 order_info

6. 支付成功后，通过 updateOrder 方法改变订单状态