微信小程序一些常用方法

微信小程序

最近一个月都在写小程序，有用到一些封装方法和深坑记录一下

1.微信小程序路由跳转navigateTo封装

const parse = (query) => {
  return Object.keys(query).map(key => `${key}=${query[key]}`).join('&')
}

module.exports = {
  go(url, query = {}) {
    console.log(url)
    return new Promise((resolve, reject) => {
      wx.navigateTo({
        url: `${url}?${parse(query)}`,
        success: resolve,
        fail: reject
      })
    })
  },
  replace(url, query = {}) {
    return new Promise((resolve, reject) => {
      wx.redirectTo({
        url: `${url}?${parse(query)}`,
        success: resolve,
        fail: reject
      })
    })
  },
  back(delta) {
    wx.navigateBack({ delta })
  }
}

2.promise封装request请求

var Promise = require('../plugins/es6-promise.js')

function wxPromisify(fn) {
  return function (obj = {}) {
    return new Promise((resolve, reject) => {
      obj.success = function (res) {
        //成功
        resolve(res)
      }
      obj.fail = function (res) {
        //失败
        reject(res)
      }
      fn(obj)
    })
  }
}
//无论promise对象最后状态如何都会执行
Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};
/**
 * 微信请求get方法
 * url
 * data 以对象的格式传入
 */
function getRequest(url, data) {
  var getRequest = wxPromisify(wx.request)
  return getRequest({
    url: url,
    method: 'GET',
    data: data,
    header: {
      'Content-Type': 'application/json'
    }
  })
}

/**
 * 微信请求post方法封装
 * url
 * data 以对象的格式传入
 */
function postRequest(url, data) {
  var postRequest = wxPromisify(wx.request)
  return postRequest({
    url: url,
    method: 'POST',
    data: data,
    header: {
      "content-type": "application/x-www-form-urlencoded"
    },
  })
}

module.exports = {
  postRequest: postRequest,
  getRequest: getRequest
}

小程序不支持promise所以先引入promise库才行
3.promise封装storage请求

var Promise = require('../plugins/es6-promise.js')

function wxPromisify(fn) {
  return function (obj = {}) {
    return new Promise((resolve, reject) => {
      obj.success = function (res) {
        //成功
        resolve(res)
      }
      obj.fail = function (res) {
        //失败
        reject(res)
      }
      fn(obj)
    })
  }
}
//无论promise对象最后状态如何都会执行
Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};
//异步设置storage
function setStorage(keys, value) {
  wx.setStorage({
    key: keys,
    data: value
  })
}

//同步设置storage
function setStorageSync(keys, value) {
  try {
    wx.setStorageSync(kes, value)
  } catch (e) {
  }
}

//异步获取stotage
function getStorage(keys) {
  let getStorage = wxPromisify(wx.getStorage)
  return getStorage({
    key: keys
  })
}

//同步获取storage
function getStorageSync(keys) {
  try {
    var value = wx.getStorageSync(keys)
    if (value) {
      // Do something with return value
    }
  } catch (e) {
    // Do something when catch error
  }
}

//移除指定key storage
function removeStorage(obj) {
  let removeStorage = wxPromisify(wx.removeStorage);
  return removeStorage({
    key: obj
  })
}

//
module.exports = {
  setStorage,
  setStorageSync,
  getStorage,
  getStorageSync,
  removeStorage,
  clearStorageSync: wx.clearStorageSync(),
  clearStorage: wx.clearStorage()
}

项目中还遇到html转wxml用wxParse解决https://github.com/icindy/wxParse；
微信小程序启动时，调用生命周期方法为：onLaunch方法（app.js）—onShow方法（app.js）---onLoad方法（首页面：index.js的onLoad方法）；所以如果在app.js里面去获取用户信息操作token，在index页面使用会出现异步还没获取到数据就执行,一般情况用promise就可以直接解决问题，稍微麻烦的一般使用settimeout去解决。
项目中还用上了socket实时更新数据，比较坑的地方就是小程序的socket只能连接60秒就断，可以让用户上拉刷新，试了定时器方法，但是由于会频繁的去操作setData考虑到性能问题并没有使用.

微信小程序一些常用方法

微信小程序

谢谢大爷~