第10课：实现购买（1）

ゝ一世哀愁。 2022-12-09 11:48 183阅读 0赞

知识点：

*  App 添加微信支付
 *  添加订单 UI 和事件
 *  调起微信支付

### 加入微信支付 ###

App 的微信支付只能在微信的开放平台申请，同时还要申请一次支付能力，微信的官方文档给出了微信支付的流程。

![enter image description here][]

App 的支付比较简单，支付的时候向服务器请求数据，此时服务器会拿到预支付 ID，然后 App 端通过这个 ID 和别的参数一起调起微信发起支付请求。

我们使用 RN 的一个微信支付库，目前是 1.9.9 版本，作者已经很久没更新了。通过命令`npm install --save react-native-wechat`安装第三方插件并使用`react-native link react-native-wechat`将原生的代码也加入到项目中，[链接地址，详见这里][Link 1]。

这里需要注意一下，很多时候这个微信库是不能自动 link 进去的，需要按照手动 link 的方式去改原生代码，这里有一份教程，需要的可以点进去看看，[手动链接微信支付库][Link 2]。

在注册 App 路由之前调用方法，将微信的 AppID 注册到 App 中，同时也将微信的库初始化完成，后面需要的时候只需要调用即可。

import {registerApp} from 'react-native-wechat';
    
    registerApp('wxfa333b610f00ded2')

### 下单页 ###

我们需要一个页面添加订单，该页面是从购物车页或者商品详情页来的，这里使用购物车跳转到订单页。

在 index.js 下添加新订单页的地址。

import Submit from './order/submit'

'Submit':{
      screen:Submit
    }

提交订单的时候传入两个参数，商品 ID 及购买数量，一般情况下这两个参数就可以在后台生成预支付订单了，App 端是在跳转到订单页的时候才发起的这个请求。

//提交订单
    submit() {
        let ids = [];
        let nums = [];
        CartList.data.list.forEach(item=>{
            if(item.select_status==1){
                ids.push(item.id)
                nums.push(item.quantity)
            }
        })
        this.props.navigation.navigate('Submit', {
            ids, nums
        });
    }

这里我们还是继续使用假数据，模拟服务器返回订单数据和订单使用到的商品数据，有实际可用接口的可以使用 request.post 方法获取数据。

componentDidMount() {
            //使用假数据
            let goods = [{
                benefitMoney: '3.00',
                buyLimitNum: 0,
                can_select: 1,
                goodsName: "MAC/魅可子弹头口红 Dangerous (3g )",
                goodsShowDesc: '[MAC]MAC/魅可子弹头口红 Dangerous (3g )',
                goodsShowName: '美国·抢镜的必备法宝',
                goods_price: '384.00',
                id: '11',
                image: 'http://img4.daling.com/data/files/mobile/2017/11/30/15120349684184.jpg_300x300.jpg',
                isBuyLimit: 0,
                isForeignSupply: 1,
                isInBond: 1,
                limitStock: 400,
                marketPrice: '170.00',
                quantity: 3,
                salePrice: "128.00",
                select_status: 0
            }];
            let address = {};
            let totalAmount = 200;
            let payableAmount = 200;
            let balancePayAmount = 120;
            let balanceAmount = 500;
            this.setState({
                address, totalAmount, payableAmount, balanceAmount,
                balancePayAmount, goods
            })
        }

UI 参照下面的这张图片，这是一个简单的下单页，没有涉及到优惠券等东西，由于具体的代码比较庞大，这里就不再贴出来了，想了解的可以到 Git 上查看。

![29661440-25ee-11e8-ab3c-8d277e03c8cd][]

这里将大概的结构展示一下。注意要将头部底部分开，也可以参考这个结构自己做一个自定义的 Page 组件。

![enter image description here][enter image description here 1]

### 补充下单之前的事件 ###

在下单之前先要检测订单是否合适，获取默认地址，获取正确的金额、余额等信息，这些东西大多都是从后端获取。

改造`componentDidMount`，用不同的方法实现不同的逻辑，将原来的代码放入`getDetail`中。

componentDidMount() {
        this.getOrderDetail()
        this.getDefaultAddress();
    }

这里获取默认的快递地址也是异步获取的，如果比较慢可以考虑加一个 loading 动画，同时使用 await 的方式同步等待请求的结果。

//获取默认地址
    getDefaultAddress() {
        let address = {
            name:"收货人",
            phone:"15600222222",
            province:"北京",
            city:"北京",
            district:"朝阳区",
            detail:"朝阳大悦城xxx号xxx店"
        }
        this.setState({ address })
    }
    //改变余额使用状态
    switchOnChange() {
        if (this.state.balanceAmount <= 0) {
            toast("余额不足");return;
        }
        this.setState({useBalance:true});
        //重新获取金额,后端返回具体的数据
        // this.getOrderDetail()
    }

添加一个选择地址的页并加入到路由中。

import AddressList from './center/addressList'

点击选择地址，并在选择之后返回设定好的地址。

//选择地址
    selectAddress() {
         this.props.navigation.navigate('AddressList', {
             selected: this.state.address,
             callback: (address) => {
                 if (!address) return;
                 this.setState({
                     'address': address,
                 });
             }
         });
      }

最后就需要生成订单并调起支付了，这里分成两步执行，第一步先提交订单同时获取支付需要的各种数据；第二步使用获得的数据调起微信支付。分成两步可以拿到两个步骤不同的错误信息，方便弹出不同的错误提示，这里注意微信的返回 code 有几个不同的含义，如果遇到取消的情况请提示一个正确的提示。

//确定支付
    async submit() {
        if (!this.state.address.name) {
            toast('请选择地址');
            return;
        }
        let wx_data = {}
        try {
            //向后台发送请求，生成订单并返回调起微信支付所需要的数据
            // wx_data = await request.post('/saleOrderApp/createOrder.do', {
            //     //需要提交的订单数据
            // })
        } catch (e) {
            toast('下单失败');
        }
        let isInstalled = await isWXAppInstalled();
        if (!isInstalled) {
            toast('请安装微信客户端');
            return;
        }
        try {
          let res = await wxPay(datas.paydata);
            //微信返回结果
        } catch (e) {
            //微信调起失败/取消
        }
    }

到这里，一个简单的下单 + 调起微信支付就完成了，有些情况下会把下单和微信支付分成两个不同的页面，这个请自行修改。下一篇内容我们会把订单提交之后的页面和地址边界页面做完。

[enter image description here]: /images/20221123/2f47821fc0da4e2bbeca332330e98cdc.png
[Link 1]: https://github.com/yorkie/react-native-wechat
[Link 2]: https://www.jianshu.com/p/3f424cccb888
[29661440-25ee-11e8-ab3c-8d277e03c8cd]: /images/20221123/faa041289f554497b92919102785aad7.png
[enter image description here 1]: /images/20221123/9ff4ae7c8dcd43f08a959658465c4286.png