微信小程序的支付-記錄系列（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方面的，下一期：《微信小程序的各類組件分享》，感謝觀看，點個贊，謝謝~