阅读 253

微信小程序的支付-记录系列(2)

1、微信支付

先上代码,这里调接口的方法都用的封装过的,在上面文章里,也可以自己改成未封装的

传送门:juejin.cn/post/697616…

 //提交订单    submitOrder() {        //可以在这里做一些验证        let that = this;        wx.showLoading({          title: '提交中……',        })        app.wxRequest('POST', `/api/submitOrder`,{            id: that.data.id, //这里是接口需要的参数        }, (res) => {            wx.hideLoading();            console.log(res)            that.orderPay(res.data.id);//用接口返回的id准备唤起支付        }, (err) => {            wx.hideLoading();            console.log(err)        })    },    //支付    orderPay(id) {        let that = this;
        //调用接口获取时间戳,签名等信息准备唤起支付        app.wxRequest('POST', `/api/miniPay`,{            id: id, //合同ID        }, (res) => {            let data = res.data.miniProPayRes;
            //这里是开始唤起支付,文档有需要的各种参数,我这里签名类型默认MD5            wx.requestPayment({                timeStamp: data.timeStamp+'',                nonceStr: data.nonceStr,                package: data.pack,                signType: 'MD5',                paySign: data.sign,                success(res) {//支付成功后调接口查询订单状态是否成功                    that.searchPayStatus(id);                },                fail(res) {                    console.log("fail");                    wx.showToast({                        title: '支付失败',                        icon: "none"                    })                }            })        }, (err) => {            wx.hideLoading();            console.log(err)        })    },    //查询订单支付状态    searchPayStatus(id) {        let that = this;        wx.showLoading({          title: '加载中……',        })        app.wxRequest('GET', `/api/${id}/checkOrder`,{}, (res) => {            //0:未支付 1:支付成功 2: 转入退款 3:已关闭 4:已撤销 5:支付中 6:支付失败            let titTxt = '';            if(res.data.tradeStatus == 0) {                titTxt = '未支付';            }else if(res.data.tradeStatus == 1) {                titTxt = '支付成功';            }else if(res.data.tradeStatus == 2) {                titTxt = '转入退款';            }else if(res.data.tradeStatus == 3) {                titTxt = '已关闭';            }else if(res.data.tradeStatus == 4) {                titTxt = '支付中';            }else if(res.data.tradeStatus == 5) {                titTxt = '已撤销';            }else {                titTxt = '支付失败';            }
            //判断支付状态,如果是未支付、支付中就轮询
            if(res.data && (res.data.tradeStatus == 0 || res.data.tradeStatus == 5)) {                that.searchPayStatus(id);            }else {                wx.hideLoading({                  success: (res) => {                    wx.showToast({                        title: titTxt,                        success: function() {
                            //支付成功后返回上个页面,也可以跳转到订单页                            setTimeout(() => {                                wx.navigateBack({                                    delta: 1                                })                            },3000)                        }                    })                  },                });            }        }, (err) => {            wx.hideLoading();            console.log(err)        })    },
复制代码

简单来说支付的功能就三步:

  1. 调用接口,传入订单的信息给后台
  2. 用后台返回的订单id再和后台获取签名,时间戳等信息,开始唤起支付
  3. 支付后查询订单状态判断是否支付成功,然后返回到上个界面或订单详情页

唤起支付需要用到的参数,微信文档传送门

2、自定义tabbar

上图

像这种中间有个大圆圈的,原生的tabbar可能就不太好实现,下面上详细代码和思路

  1. 首先在components组件下创建tabbar文件夹,以下是各个文件的代码

    tabbar.js:
    data: {    tabbarList: [      {        id:0,        imgUrl:"../../assets/images/in-b-2.png",//未选中的图片        onImgUrl:"../../assets/images/in-b-1.png",//选中的图片        pageUrl:"../index/index",//页面跳转地址        title:"首页"      },{        id:1,        imgUrl:"../../assets/images/b-s-2.png",        onImgUrl:"../../assets/images/b-s-1.png",        pageUrl:"../search/search",        title:"查询"      },{        id:2,        imgUrl:"",//中间的圆圈不需要图片        pageUrl:"../yuYue/yuYue",        title:"立即预约"      },{        id:3,        imgUrl:"../../assets/images/yy-b-2.png",        onImgUrl:"../../assets/images/yy-b-1.png",        pageUrl:"../yuyue/yuyue",        title:"预约"      },{        id:4,        imgUrl:"../../assets/images/wd-b-2.png",        onImgUrl:"../../assets/images/wd-b-1.png",        pageUrl:"../mine/mine",        title:"我的"      }    ]  },  properties: {//组件传参接收    activeTabbarIdx:{      type: Number, //属性的类型      value: 0  // 属性的默认值,如果页面没有给这个name赋值,就使用这个value的值    }   },  /**   * 组件的方法列表   */  methods: {    // 页面跳转    openPage(e){      let path = e.currentTarget.dataset['path'];      wx.redirectTo({        url: path      })    }  }
    
    tabbar.wxml:<view class="tabbar">  <block wx:for="{{tabbarList}}" wx:key="id" wx:for-index="idx" wx:for-item="item">    <view wx:if="{{idx != 2}}" class="tabbarItem {{activeTabbarIdx == idx ? 'tabbarItemActive':''}}" data-path="{{item.pageUrl}}" bindtap="openPage">        <image src="{{activeTabbarIdx == idx ? item.onImgUrl:item.imgUrl}}" class="icon"/>        <text>{{item.title}}</text>    </view>    <view wx:else class="center" data-path="{{item.pageUrl}}" bindtap="openPage">        <text>{{item.title}}</text>    </view>  </block></view>tabbar.json文件:
    {  "component": true,//一定要加这句话  "usingComponents": {}}
    
    tabbar.wxss:.tabbar {  display: flex;  align-items: center;  height: 110rpx;  font-size: 26rpx;}.tabbar .tabbarItem {  flex: 1;  display: flex;  flex-direction: column;  justify-items: center;  align-items: center;  color: #B3B3B3;}.tabbarItemActive {  color: #4D4D4D;}.tabbarItemActive text{  color: #4D4D4D;}.tabbar .icon{  width: 40rpx;  height: 40rpx;  margin-bottom: 6rpx;}.tabbar .center {  width: 140rpx;  height: 140rpx;  line-height: 140rpx;  text-align: center;  border-radius: 140rpx;  background: #4285F4;  position: relative;  top: -30rpx;  font-size: 28rpx;  color: #fff;}
    复制代码
  2. 总体思路:主要是中间的那个圆圈不太好实现,如果在页面上写死各个tabbaritem后面不方便维护,所以组件就要各种参数等都需要方便传输,这个看起来简单,当时做的时候思考了半个多小时才完善好,本来是在页面写死了后来发现太冗余,代码量太多

  3. 调用示例:

    mine.wxml
    //在页面最后一个</view>上加这句话,因为tabbar是放在底部的
    <mp-tabbar class="fixed-tabbar" activeTabbarIdx='4'/>
    
    mine.wxcss
    这里一定要给第一个view设置一个样式:padding-bottom: 154rpx;不然底部会盖住app.json
    //全局引用该组件
    "usingComponents": {    "mp-tabbar": "./components/tabbar/tabbar"  }//这样就做完啦,简直完美~
    复制代码

3、列表分页,上拉加载更多

这个主要思路就是在自带的onReachBottom上拉触底事件中再掉一次接口,很简单

js:
data: {        dataList: [],        page:1,        pageSize: 10,        hasMoreData: true},onShow: function () {        this.searchList();},// 获取列表数据searchList: function(message='加载中') {        let reqData = {            pageNum: this.data.page,            pageSize: this.data.pageSize        }        wx.showLoading({title: message});        app.wxRequest('GET', '/api/searchList', reqData, (res) => {            wx.hideLoading();            let listData = this.data.dataList;            if(res.data && res.data.list && res.data.list.length > 0) {                if(this.data.page == 1) {                    listData = [];                }                let dataList= res.data.list;
                //判断接口返回数据是否和当前界面展示的数量一样                if(dataList.length < this.data.pageSize) {                    this.setData({                        dataList: listData.concat(dataList),                        hasMoreData: false //没有更多数据                    })                }else {                    this.setData({                        dataList: listData.concat(dataList),                        hasMoreData: true,//表示还有更多数据,还可以上拉加载                        page: this.data.page++                    })                }            }else {                this.setData({                    dataList: listData                 })            }        }, (err) => {            wx.hideLoading();            console.log(err)        })},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {        if (this.data.hasMoreData) {            let page = this.data.page+1;            this.setData({                page: page            })            this.searchList('加载更多数据')        } else {            wx.showToast({                title: '没有更多数据',            })        }},
复制代码

4、富文本中有视频video不展示的问题

这里推荐使用wxParse,之前做的时候百度了好久,原生微信没有解决富文本中有视频的问题,会一直报错,Failed to load media,虽然wxParse这个已经不更新了,但是还是yyds

大家可以搜一下,我找不到github上的地址了,我本地有,需要可以私聊

wxml:
<import src="../../assets/wxParse/wxParse.wxml"/><!--引入wxParse-->
<view class="storyInfo">        <!-- <rich-text nodes="{{storyInfo}}"></rich-text> 这是原生的没用  -->        <template is="wxParse" data="{{wxParseData:storyInfo.nodes}}"/></view>
wxss:
@import "../../assets/wxParse/wxParse.wxss";/*也引入一下*/

js:
var WxParse = require('../../assets/wxParse/wxParse.js');//还是引入
//在你需要用到的方法里写:
WxParse.wxParse('storyInfo', 'html', this.data.storyInfo, this, 0);
//storyInfo是页面用的变量名,this.data.storyInfo这个和前面storyInfo保持一致
复制代码

这几天比较闲,每天一篇分享,希望对大家有用,也是自己记录代码的一个方法,后面还会分享vue或者js方面的,下一期:《微信小程序的各种组件分享》,感谢观看,点个赞,谢谢~

文章分类
前端