公司突然要(yào / yāo)開放微信小程序，持續蒙蔽的(de)我還不(bù)知道(dào)小程序是(shì)個(gè)什麽玩意。

于(yú)是(shì)上(shàng)網查了(le／liǎo)一下，就(jiù)開始着手開發。。。。。

首先開發客戶端的(de)東西，都有個(gè)共同點，那就(jiù)是(shì) 數據請求！

看了(le／liǎo)下小程序的(de)請求方式大(dà)概和(hé / huò)ajax請求差不(bù)多，所以(yǐ)先打好基礎 從封裝http請求開始

好了(le／liǎo)廢話不(bù)多說(shuō)了(le／liǎo)，上(shàng)代碼

首先。。。。當然是(shì)建立配置文件，用來(lái)配置請求根路徑

config.js

export default {
  basePath: 'http://192.168.6.2:9002/api',
  fileBasePath: 'http://192.168.6.2:9002',
  //basePath: 'http://127.0.0.1:8989/api',
  //fileBasePath: 'http://127.0.0.1:8989',
  defaultImgUrl:'/pages/Images/default.png'
}

這(zhè)裏我用到(dào)es6來(lái)寫邏輯代碼 所以(yǐ)自行引用兼容代碼es6-promise.js

下面是(shì)核心代碼

ServiceBase.js

import __config from '../etc/config'
import es6 from '../assets/plugins/es6-promise'

class ServiceBase {
  constructor() {
    Object.assign(this, {
      $$basePath: __config.basePath
    })
    this.__init()
  }

  /**
   * __init
   */
  __init() {
    this.__initDefaults()
    this.__initMethods()
  }

  /**
   * __initDefaults
   */
  __initDefaults() {
    // 方法名後綴字符串
    this.suffix = 'Request'

    // 發起請求所支持的(de)方法
    this.instanceSource = {
      method: [
        'OPTIONS',
        'GET',
        'HEAD',
        'POST',
        'PUT',
        'DELETE',
        'TRACE',
        'CONNECT',
      ]
    }
  }

  /**
   * 遍曆對象構造方法，方法名以(yǐ)小寫字母+後綴名
   */
  __initMethods() {
    for (let key in this.instanceSource) {
      this.instanceSource[key].forEach((method, index) => {
        this[method.toLowerCase() + this.suffix] = (...args) => this.__defaultRequest(method, ...args)
      })
    }
  }

  /**
   * 以(yǐ)wx.request作爲(wéi / wèi)底層方法
   * @param {String} method 請求方法
   * @param {String} url    接口地(dì / de)址
   * @param {Object} params 請求參數
   * @param {Object} header 設置請求的(de) header
   * @param {String} dataType 請求的(de)數據類型
   */
  __defaultRequest(method = '', url = '', params = {}, header = {}, dataType = 'json') {
    const $$header = Object.assign({}, this.setHeaders(), header)
    const $$url = this.setUrl(url)

    // 注入攔截器
    const chainInterceptors = (promise, interceptors) => {
      for (let i = 0, ii = interceptors.length; i < ii;) {
        let thenFn = interceptors[i++]
        let rejectFn = interceptors[i++]
        promise = promise.then(thenFn, rejectFn)
      }
      return promise
    }
    //加入token信息
    params.AccessToken = wx.getStorageSync('token');
    params.Version = wx.getStorageSync('Version')||"20151101";
    // 請求參數配置
    const $$config = {
      url: $$url,
      data: params,
      header: $$header,
      method: method,
      dataType: dataType,
    }

    let requestInterceptors = []
    let responseInterceptors = []
    let reversedInterceptors = this.setInterceptors()
    let promise = this.__resolve($$config)

    // 緩存攔截器
    reversedInterceptors.forEach((n, i) => {
      if (n.request || n.requestError) {
        requestInterceptors.push(n.request, n.requestError)
      }
      if (n.response || n.responseError) {
        responseInterceptors.unshift(n.response, n.responseError)
      }
    })

    // 注入請求攔截器
    promise = chainInterceptors(promise, requestInterceptors)

    // 發起HTTPS請求
    promise = promise.then(this.__http)

    // 注入響應攔截器
    promise = chainInterceptors(promise, responseInterceptors)

    // 接口調用成功，res = {data: '開發者服務器返回的(de)内容'}
    promise = promise.then(res => res.data, err => err)

    return promise
  }

  /**
   * __http - wx.request
   */
  __http(obj) {
    return new es6.Promise((resolve, reject) => {
      obj.success = (res) => resolve(res)
      obj.fail = (res) => reject(res)
      wx.request(obj)
    })
  }

  /**
   * __resolve
   */
  __resolve(res) {
    return new es6.Promise((resolve, reject) => {
      resolve(res)
    })
  }

  /**
   * __reject
   */
  __reject(res) {
    return new es6.Promise((resolve, reject) => {
      reject(res)
    })
  }

  /**
   * 設置請求路徑
   */
  setUrl(url) {
    return `${this.$$basePath}${this.$$prefix}${url}`
  }

  /**
   * 設置請求的(de) header , header 中不(bù)能設置 Referer
   */
  setHeaders() {
    return {
      // 'Accept': 'application/json', 
      // 'Content-type': 'application/json', 
      "Content-Type": "application/x-www-form-urlencoded" 
      //'Authorization': 'Bearer ' + wx.getStorageSync('token')
    }
  }

  /**
   * 設置request攔截器
   */
  setInterceptors() {
    return [{
      request: (request) => {
        request.header = request.header || {}
        request.requestTimestamp = new Date().getTime()
　　　　
       //如果token在(zài)header中 token在(zài)參數中注入if (request.url.indexOf('/api') !== -1 && wx.getStorageSync('token')) {
          //request.header.Authorization = 'T ' + wx.getStorageSync('token')  }
        wx.showToast({
          title: '加載中',
          icon: 'loading',
          duration: 10000,
          mask: !0,
        })
        return request
      },
      requestError: (requestError) => {
        wx.hideToast()
        console.log('error-------------');
        return requestError
      },
      response: (response) => {
        console.log(response)
        response.responseTimestamp = new Date().getTime()
        if (response.statusCode == 401 
        || response.statusCode == 403
          || (response.data.code == -1 && response.data.tips =="雲客戶端連接失敗"))
        {
          wx.removeStorageSync('token')
          wx.removeStorageSync('userinfo')
          wx.redirectTo({
            url: '/pages/login/login?isfail=true'
          })
        }
        wx.hideToast()
        return response
      },
      responseError: (responseError) => {
        wx.hideToast()
        return responseError
      },
    }]
  }
}

export default ServiceBase

下面是(shì)業務邏輯的(de)DAO層

import ServiceBase from 'ServiceBase'

class Service extends ServiceBase {
  constructor() {
    super()
    this.$$prefix = ''
    this.$$path = {
      register:'/login/weregister',//注冊
      signIn : '/login/login',//登陸
      wechatSignIn: '/login/welogin',//微信登陸
      signOut: '/login/logout',//退出(chū)

    }
  }
  //openid和(hé / huò)基本信息注冊
  register(params)
  {
    return this.postRequest(this.$$path.register, params) 
  }
  //用戶名密碼登陸
  signIn(params) {
    return this.postRequest(this.$$path.signIn, params)
  }
  //微信登陸
  wechatSignIn(params) {
    return this.postRequest(this.$$path.wechatSignIn, params)
  }
  signOut() {
    return this.postRequest(this.$$path.signOut)
  }


}

export default Service

有人(rén)可能會問 如何進行get請求？

this.postRequest 換成 this.getRequest 即可 其他(tā)put,delete 類似 然後在(zài)全局app.js 進行引用

import HttpService from 'Core/HttpService'

App({

...

...

HttpService: new HttpService

})

最後調用方式

    signIn(cb) {
　　//測試默認登陸成功
    app.HttpService.signIn({
      username: '571115139',
      password: '666666',
    })
      .then(data =http://www.wxapp-union.com/> {
　　　　//請求成功
        console.log(data)

        //測試數據 

        cb()

      }).catch(e=>{
　　　　//請求失敗
　　　　})

  }

好了(le／liǎo)今天就(jiù)說(shuō)到(dào)這(zhè)，下篇将持續更新在(zài)小程序中遇到(dào)的(de)坑