今天是來(lái)杭州的第三個(gè)月后的十幾天，正是的現(xiàn)在這份工作轉(zhuǎn)正的日子。幾天前轉(zhuǎn)正面談時(shí) CTO 對(duì)于前幾個(gè)月的工作給予了肯定，同時(shí)也提了幾點(diǎn)建議。這也是這篇文章存在原因之一。

要養(yǎng)成一些好的習(xí)慣、好的方法、并學(xué)會(huì)分享。這些好的習(xí)慣以后會(huì)跟著你走。

來(lái)杭州三個(gè)月，也習(xí)慣了這里的生活。在新的公司做了兩三個(gè)小項(xiàng)目，也研究了幾個(gè)以前沒(méi)有仔細(xì)研究的技術(shù)。小有收獲。最近一周一直在忙兩個(gè)項(xiàng)目，一是智能柜，二是景區(qū)。以下是我最近開發(fā)的一些心得和技巧：

在開發(fā)微信小程序時(shí)，我們可以將小程序中常用的基本配置統(tǒng)一抽離出來(lái)放在一個(gè)config.js中如下：

const SERVER_URL = 'http://www.xxx.com/api';
const TEST_SERVER_URL = 'http://test.xxx.com/api';
const CDN_URL = 'http://cdn,xxx.com';
const TEST_CDN_URL = 'http://tcdn.xxx.com';

export CONFIG_PRODUCT = {
    SERVER_URL,
    CDN_URL,
    DEBUG_FLAG:false,
    TEST_FLAG:false,
}

export CONFIG_TEST = {
    SERVER_URL:TEST_SERVER_URL,
    CDN_URL:TEST_CDN_URL,
    DEBUG_FLAG:true,
    TEST_FLAG:false,
}

然后按照開發(fā)需求引入這些配置信息（如 控制console.log），在后期方便配置的統(tǒng)一管理和維護(hù)。

對(duì)網(wǎng)絡(luò)請(qǐng)求（wx.request）進(jìn)行二次封裝如下例：

import { CONFIG } from './config';
import MD5 from './md5'/**
* 定制功能的網(wǎng)絡(luò)請(qǐng)求方法
* @param options object
* @property url string 請(qǐng)求的資源地址，在請(qǐng)求時(shí)會(huì)自動(dòng)添加服務(wù)器地址。
* @property data object 請(qǐng)求所攜帶的參數(shù)
* @property header object 請(qǐng)求頭
* @property success function 請(qǐng)求成功的回調(diào)
* @property fail function 請(qǐng)求失敗的回調(diào)
* @property complete function 請(qǐng)求完成的回調(diào)
* 
* 功能簡(jiǎn)介：
* 傳入與 wx.request 相同的參數(shù)，方法內(nèi)部會(huì)對(duì)幾個(gè)重要部分進(jìn)行功能根據(jù)項(xiàng)目需求強(qiáng)化，如在 header 
* 中添加驗(yàn)證字段，對(duì) POST 方法時(shí)將 header 的 content-type 改為對(duì)應(yīng)參數(shù)。對(duì)特定的 狀態(tài)碼（400）
* ，進(jìn)行處理。
* 
*/
export default (options) => {
  const { APP_CONFIG: { SERVER_URL, DEBUG_FLAG,SPEACAL_SERVER_URL } } =   CONFIG;
  if (DEBUG_FLAG) {
      console.group('網(wǎng)絡(luò)請(qǐng)求');
      console.log(options);
  }
  if (!options.anotherFlag) {
      wx.showLoading({
           title: '正在加載'
      })
  }
  if (options.anotherFlag) {
     let String1 = ''
     const { data:{query,mainData} } = options
     query.time = Math.ceil(Date.now() / 1000);
     const dataKeyArray = Object.keys(query).sort();
     dataKeyArray.forEach((e, i) => {
                                      if (i === 0) {
                                           String1 += `${e}=${query[e]}`;
                                      } else {
                                           String1 += `&${e}=${query[e]}`;
                                      }
                                    })
     const String2 = `${String1}&secret=yoursalt`;
     const token = MD5(String2);
     options.url = `${SPEACAL_SERVER_URL}token=${token}`;
     options.header = modifyHeader(options.header);
     options.header['Content-Type'] = 'application/json';
     options.method = 'POST';
     options.data = mainData;
  } else {
     options.url = `${SERVER_URL}${(options.url) ? '/' + options.url : ''}`;
     options.header = modifyHeader(options.header);
     options.method = 'POST';
  }
   if (typeof options === 'object') {
      const success = options.success;
      const fail = options.fail;
      const complete = options.complete;
      options.success = success ? res => {
        if (DEBUG_FLAG) {
          console.log(res);
          console.groupEnd();
        }
        if (res.flag !== 0 && !options.anotherFlag) {
          fail ? fail(res) : '';
        } else {
          success(res);
        }
     } : null;

    options.fail = fail ? res => {
       if (DEBUG_FLAG) {
         console.log(res);
         console.groupEnd();
       }
         fail(res);
    } : null;

    options.complete = complete ? res => {
       if (DEBUG_FLAG) {
          console.groupEnd();
       }
       if (!options.anotherFlag) {
         wx.hideLoading();
       }
       complete(res);
    } : () => {
      if(!options.anotherFlag){
         wx.hideLoading();
      }
    };
  }
  wx.request(options);
}

const modifyHeader = header => {
    const token = wx.getStorageSync('token');
    if (token) {
       return { ...header, token: `${token}` };
    } else {
       return (header) ? header : {};
    }
};

當(dāng)然也可以根據(jù)個(gè)人的開發(fā)習(xí)慣進(jìn)行 promise 封裝。這樣封裝的好處也顯而易見，方便對(duì)所有的 request 進(jìn)行監(jiān)控，通用邏輯的修改，方便調(diào)試和開發(fā)。

在寫些小程序的條件動(dòng)畫時(shí)，也可以十分方便如下：

// page.wxss
.css-a{
    transform:translate3d(-100%,0,0); // 將 css-a 元素上移全部高度
    transition:all .5s;
}

.css-a.show{
    transform:translage3d(0,0,0); // 將 css-a 元素動(dòng)畫回原位
}

// page.wxml

<view class='css-a {{showFlag ? "show":""}}'>動(dòng)畫DEMO</view>

// page.js

// 觸發(fā)的動(dòng)畫事件
  onTrigger(){
     this.setData({showFlag:true});
  }

通過(guò)綁定點(diǎn)擊、觸摸事件，就能夠?qū)崿F(xiàn)很多簡(jiǎn)單的動(dòng)畫，提升人機(jī)交互的樂(lè)趣。