第10课:实现购买(1)

知识点:

  • 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 进去的,需要按照手动 link 的方式去改原生代码,这里有一份教程,需要的可以点进去看看,手动链接微信支付库

在注册 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

补充下单之前的事件

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

改造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) {
        //微信调起失败/取消
    }
}

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

评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页