1. Wechat Pay

First on the code, here the method of the interface are used to encapsulate, in the above article, can also be changed to unencapsulated

Portal: juejin.cn/post/697616…

SubmitOrder () {// you can do some validation here. Let that = this; Wx. showLoading({title: 'commit... ',}) app.wxrequest ('POST', '/ API /submitOrder ', {id: that.data.id, // here is the required parameter for the interface}, (res) => {wx.hideloading (); console.log(res) that.orderPay(res.data.id); }, (err) => {wx.hideloading (); Console. log(err)})}, // pay orderPay(id) {let that = this; App.wxrequest ('POST', '/ API /miniPay ', {id: Id, // contract id}, (res) => {let data = res.data.miniPropayres; MD5 wx.requestPayment({timeStamp: data.timestamp + ", nonceStr: data.noncestr, package: {timeStamp: data.noncestr, package: Data. pack, signType: 'MD5', paySign: data.sign, success(res) { }, fail(res) { console.log("fail"); Wx. ShowToast ({title: 'payment failed, icon: "none"})}})}, (err) = > {wx. HideLoading (); Console. log(err)})}, // Query the order payment status searchPayStatus(id) {let that = this; Wx.showloading ({title: 'loading... ',}) app.wxrequest ('GET', '/ API /${id}/checkOrder ', {}, (res) => {//0: unpaid 1: payment successful 2: transfer refund 3: closed 4: revoked 5: payment in progress 6: Let titTxt = "; If (res.data.tradestatus == 0) {titTxt = 'unpaid '; }else if(res.data.tradestatus == 1) {titTxt = 'Pay success '; }else if(res.data.tradestatus == 2) {titTxt = 'turn into a chargeback '; }else if(res.data.tradestatus == 3) {titTxt = 'closed '; }else if(res.data.tradestatus == 4) {titTxt = 'paying '; }else if(res.data.tradestatus == 5) {titTxt = 'undo '; }else {titTxt = 'payment failed '; } // Determine the payment status, If it is not to pay, pay in polling the if (res) data && (res) data) tradeStatus = = 0 | | res. Data. TradeStatus = = 5)) {that. SearchPayStatus (id); }else { wx.hideLoading({ success: (res) => { wx.showToast({ title: titTxt, success: SetTimeout (() => {wx.navigateBack({delta: 1})},3000)}})},}); } }, (err) => { wx.hideLoading(); console.log(err) }) },Copy the code

In simple terms, the payment function consists of three steps:

  1. Calls the interface, passing the order information to the background
  2. With the order ID returned by the background and the background to obtain the signature, time stamp and other information, start to arouse the payment
  3. After payment, check the order status to determine whether the payment is successful, and then return to the previous interface or order details page

Evoke payment needs to be used in the parameters, wechat document portal

2. Customize tabbars

Pictured above,

A native Tabbar with a large circle in the middle might not be easy to implement, but the code and ideas below are detailed

  1. Start by creating a Tabbar folder under the Components component. Here is the code for each file

    tabbar.js: data: { tabbarList: [ { id:0, ImgUrl: ".. /.. / assets/images/in - b - 2. PNG ", / / uncheck photo onImgUrl: ".. /.. / assets/images / - b - 1 in PNG ", / / the selected images PageUrl: ".. / index/index ", / / jump page address the title: "home page"}, {id: 1, imgUrl: ".. /.. / assets/images/b - s - 2. PNG ", OnImgUrl: ".. /.. / assets/images/b - s - 1. PNG ", pageUrl: ".. / search/search ", the title: "query"}, {id: 2, ImgUrl: "", / / in the middle of the circle do not need pictures pageUrl:".. / yuYue yuYue ", the title: "immediately to make an appointment"}, {3, id: imgUrl: ".. /.. / assets/images/yy - b - 2. PNG ", OnImgUrl: ".. /.. / assets/images/yy - b - 1. PNG ", pageUrl: ".. / yuyue yuyue ", the title: "reservation"}, {id: 4, imgUrl:"../../assets/images/wd-b-2.png", onImgUrl:"../../assets/images/wd-b-1.png", pageUrl:"../mine/mine", Title :" my "}]}, properties: {// activeTabbarIdx:{type: Number, // Attribute type value: }}, /** * component's list of methods */ methods: {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 file: {"component": true,// Be sure to add "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; }Copy the code

  2. General idea: mainly in the middle of the circle is not very good implementation, if on the page to write die behind each tabbaritem inconvenient maintenance, all sorts of parameters such as components, so it is convenient to transport, this looks simple, then do the thinking for half an hour to get perfect good, could have been written on the page died later found too redundant, too much code

  3. Example call:

    Mine. WXML // add this sentence to the last </view> on the page, <mp-tabbar class="fixed-tabbar" activeTabbarIdx='4'/> mine.wxcss 154rpx; Otherwise will cover at the bottom of the app. Json / / global references the component "usingComponents" : {" mp - tabbar ":". / components/tabbar tabbar "} / / that will be done, it is perfect ~Copy the code

3, list page, pull up load more

The main idea is to drop the interface again in the built-in onReachBottom pull bottom event, very simple

js: data: { dataList: [], page:1, pageSize: 10, hasMoreData: true},onShow: function () { this.searchList(); },// Get the searchList: function(message=' loading ') {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 // no more data})}else {this.setdata ({dataList: Listdata.concat (dataList), hasMoreData: true, this.data.page++ }) } }else { this.setData({ dataList: listData }) } }, (err) => { wx.hideLoading(); Console. log(err)})},/*** the handler of the event on the page */onReachBottom: function () { if (this.data.hasMoreData) { let page = this.data.page+1; This.setdata ({page: page}) this.searchlist (' load more data ') else {wx.showtoast ({title: 'no more data ',})}},Copy the code

4. Video is not displayed in rich text

WxParse is recommended to use here. When we did this for a long time, the native wechat did not solve the problem of rich text with videos, and it continued to report “Failed to load media”. Although wxParse has not been updated, it is still yyds

You can search, I can’t find the address on Github, I have local, if you need to private chat

wxml: <import src=".. /.. /assets/wxParse/wxParse.wxml"/><! WxParse --> <view class="storyInfo"> <! -- <rich-text nodes="{{storyInfo}}"></rich-text> This is native --> <template is="wxParse" data="{{wxParseData:storyInfo.nodes}}"/></view> wxss: @import ".. /.. /assets/wxParse/wxParse.wxss"; Var WxParse = require('.. /.. /assets/wxParse/wxParse.js'); WxParse ('storyInfo', 'HTML ', this.data.storyinfo, this, 0); //storyInfo is the name of the variable used by the page. This.data.storyinfo is the same as storyInfoCopy the code

These days are relatively free, a share every day, I hope to be useful to you, is also a method of recording their own code, will share vUE or JS, the next issue: “micro channel small program of various components to share”, thank you for watching, a like, thank you ~