微信小程序的支付-记录系列（2）

一、微信支付

先上代码，这里调接口的方法都用的封装过的，在上面文章里，也能够本身改为未封装的css

//提交订单    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)        })    },
复制代码

简单来讲支付的功能就三步：vue

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

唤起支付须要用到的参数，微信文档传送门node

二、自定义tabbar

上图git

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

首先在components组件下建立tabbar文件夹，如下是各个文件的代码json

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;}
复制代码

整体思路：主要是中间的那个圆圈不太好实现，若是在页面上写死各个tabbaritem后面不方便维护，因此组件就要各类参数等都须要方便传输，这个看起来简单，当时作的时候思考了半个多小时才完善好，原本是在页面写死了后来发现太冗余，代码量太多小程序

调用示例：微信小程序

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"  }//这样就作完啦，简直完美~
复制代码

三、列表分页，上拉加载更多

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

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: '没有更多数据',            })        }},
复制代码

四、富文本中有视频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方面的，下一期：《微信小程序的各类组件分享》，感谢观看，点个赞，谢谢~