小程序開發(request封裝,filter自定義)

1、封裝request

import {baseUrl} from '../config/env'
const fetch = function (method, url, data, header) {
  return new Promise((resolve, reject) => {
    let token = null
    try{
      token = wx.getStorageSync('token') // 本地token驗證
    }catch(err){
      console.log(err)
    }
    wx.request({
      url: baseUrl + url,
      method: method,
      header: token ? Object.assign({ token: token},header):header,
      data: data,
      success: res => {
        if(res.data.success){
          
        }
        resolve(res.data)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}
module.exports={ fetch }
// 使用
import { fetch } from '../../../utils/http.js' // 相對路徑

handlefun() {
    fetch('post', '/complaint/queryComplaint', postData)
        .then(res =>{
        })
        .catch(err =>{
        })
}

2、navigateTo封裝

const navigateTo = function(object){
  if(getCurrentPages.length>9){
    wx.reLaunch(object) // 先關閉了內存中所有保留的頁面,再跳轉到目標頁面。
  }else{
    wx.navigateTo(object)
  }
}
module.exports = {
  navigateTo: navigateTo
}

// 使用
/* 
import { navigateTo } from '../../../utils/navigateTo.js' // 相對路徑
navigateTo({
      url: '../details'
})
*/

3、filter自定義

3.1、第一種方法,外部引入wxs文件

// 自定義filters.wxs文件
var getArray = function (val) { // 獲取數組
  return val.split(',')
}
var getStatus = function (val) { // 獲取狀態
  var result = ''
  if (val === '0') result = '低'
  else if (val === '1') result = '一般'
  else if (val === '2') result = '緊急'
  return result
}
module.exports = {
  getArray: getArray,
  getStatus: getStatus
}

// 如何使用

// wxml引用
// <wxs src="../../filter/filter.wxs" module="filter" />
// <view>{{filter.getArray(item.status)}}</view> // item.status爲循環中的數據

3.1、第二種方法,wxml引入與data中的數據進行匹配

// 在wxml頁面中引入
// array是自己傳入的數組,leavel爲需要判斷的數據,array數組中的value與leavel相等時,返回array中對應的name
<wxs module="m1">
var getStatus = function(array, leavel) {
  var status = undefined;
  for (var i = 0; i < array.length; i++) {
    if (array[i].value === leavel) {
      status = array[i].name
    }
  }
  return status
}
module.exports.getStatus = getStatus;
</wxs>

// 如何使用
// m1.getStatus => array爲data裏面定義的array,item.leavel循環匹配
<text>{{m1.getStatus(array, item.leavel)}}</text>

4、時間轉化

// util.js
const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()

  return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

// 如何使用
// js文件引入 =>import { formatTime } from '../../../utils/util.js'
// var date = formatTime(new Date(date))

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章