摘要：大家好，我是平頭哥聯(lián)盟的首席填坑官蘇南，今天要給大家分享的是最近公司做的一個小程序項目，過程中的一些好的總結和遇到的坑，希望能給其他攻城獅帶來些許便利，更希望能做完之后老板給你加薪今天是中秋節(jié)的第一天，假日的清晨莫名的醒的特別早，不知道為什

　　大家好，我是@IT·平頭哥聯(lián)盟的首席填坑官——蘇南(South·Su)，今天要給大家分享的是最近公司做的一個小程序項目，過程中的一些好的總結和遇到的坑，希望能給其他攻城獅帶來些許便利，更希望能做完之后老板給你加薪～

　　今天是中秋節(jié)的第一天，假日的清晨莫名的醒的特別早，不知道為什么，也許是因為，昨晚公司上線的項目回來的路上，發(fā)現(xiàn)了個小bug，心里有些忐忑，一會偷偷先改了，讓領導發(fā)現(xiàn)這個月績效就沒了～～

以上純?yōu)槌兜?，現(xiàn)在開始一本正經(jīng)的裝逼，請系好安全帶，中間過程有可能會開車，請注意安全?。。。?！

　　最近個項目跟團隊小伙伴溝通后用的是wepy框架，沒有直接用原生的，小程序原生就……，大家都懂的，用wepy框架，給自己帶來了便利，也帶來了不少坑，但縱是如此，我還是懷著：“縱你虐我千百遍，我仍待你如初戀”的心態(tài)去認真把項目做好

1、toast組件，大家都知道，官方的api wx.showToast 是滿足不了我們的需求的，因為它只支持 "success", "loading"兩種狀態(tài)，同時“ title 文本最多顯示 7 個漢字長度”，這是官方原話，有圖有真相哦，樣式巨丑～

wx.showToast({
  title: "成功",
  icon: "success",
  duration: 2000
})
wx.showModal({
  title: "提示",
  content: "這是一個模態(tài)彈窗",
  success: function(res) {
    if (res.confirm) {
      console.log("用戶點擊確定")
    } else if (res.cancel) {
      console.log("用戶點擊取消")
    }
  }
})

wx.showModal的content的文字是不會居中的（現(xiàn)在不確定有沒有擴展，可以設置），依稀記得有一次因為問題差點跟產品經(jīng)理吵起來，讓文字居中，我說最少要兩小時，當時產品就炸了，什么鬼？？？讓文字居中一下要兩小時？？兩小時？？兩小時？？呵呵～走了，后來就下決定自己封裝了一個屬于自己的toast組件，以下為部分核心代碼

2、Storage（存儲）在前端我們存儲的方式，cookie、localStorage、sessionStorage等這些，特性就不一一說明了，小程序里大家都知道，數(shù)據(jù)存儲只能調用 wx.setStorage、wx.setStorageSync，相當于h5的localStorage，而 localStorage是不會過期的，這個大家都知道，而且在很多的面試中，面試官都會問到這個問題，怎么讓localStorage像cookie一樣，只存兩小時、兩天、甚至只存兩分鐘呢？今天帶你解惑，讓你在職場面試中又減少一個難題，這也是我們項目中一直在用的方式，小程序中也同樣實用：

class storage {

  constructor(props) {
    this.props = props || {}
    this.source =  wx||this.props.source;

  }

  get(key) {
    const data = this.source,
          timeout = (data.getStorageSync(`${key}__expires__`)||0)

    // 過期失效
    if (Date.now() >= timeout) {
      this.remove(key)
      return;
    }
    const value = data.getStorageSync(key)
    return value
  }

  // 設置緩存
  // timeout：過期時間（分鐘）
  set(key, value, timeout) {
    let data = this.source
    let _timeout = timeout||120;
    data.setStorageSync(key,(value));
    data.setStorageSync(`${key}__expires__`,(Date.now() + 1000*60*_timeout));
 
    return value;
  }

  remove(key) {
    let data = this.source
        data.removeStorageSync(key)
        data.removeStorageSync(`${key}__expires__`)
    return undefined;
  }
}
module.exports = new storage();

是不是覺得很簡單，其實大家看了之后就都 “哦，原來還可以這樣”? 懂了，只是一時沒想到而已，就是個小技巧，每次在存儲的時候同時也存入一個時效時間戳，而在獲取數(shù)據(jù)前，先與當前時間比較，如果小于當前時間則過期了，直接返回空的數(shù)據(jù)。

3、接口API的維護，在沒有nodejs之前，前端好像一直都在為處理不同環(huán)境下調用對應的API而煩惱，做的更多的就是用域名來進行判斷，當然也有些高級一點的做法，后端在頁面渲染的時候，存一個變量到cookie里或者在頁面輸出一個全局的api變量(建立在沒有前后端分離的基礎上)，到了小程序同樣也是如此，每次都要手動改環(huán)境，那么一個項目可能有不同的業(yè)務，要調用不同域名api，又有不同的環(huán)境區(qū)分，怎么維護會比較好呢？？

//env/dev.js 其他test、uat、prd結構相同
//本地環(huán)境
module.exports = {
    wabApi:{
        host:"https://dev-ali.southsu.com/XX/api/**",
    },
    questionApi:{
        host:"https://dev-ali.bin.com/question/api/**/question",
    },
    mockApi:{
        host:"https://easy.com/mock/594635**c/miniPrograms"
    },
    inWelApi: {
        host: "https://dev.**.com/Wab/api/escene/v2"   
    }
};

import dev from "./env/dev"; //本地或開發(fā)
import uat from "./env/pre"; //體驗環(huán)境
import prd from "./env/prd"; //線上


var ENV = "prd"; //"dev | uat | prd";
let _base_ = {
  dev,
  uat,
  prd
}[ENV];
var config = {
  ENV,
  baseAPI:{..._base_, env : ENV },
  appID:"wx*****b625e", //公司賬號（指數(shù)）appid
  isAuthorization:true,
  "logId": "gVDSMH****HAas4qSSOTb-gzGzoHsz",
  "logKey": "pxFOg****Jn3JyjOVr",
  questionnaireNo:"z**Insu" // 問卷調查編號
};
export const __DEBUG__ = (ENV!="prd");
export default  config;

請求調用api處理的示例

import wepy from "wepy"
import _login_ from "./login";
import config,{__DEBUG__} from "./config";
import "wepy-async-function";
export const  fetchJson = (options)=>{
    /*
     *  請求前的公共數(shù)據(jù)處理
     * @ param {String}     url 請求的地址
     * @ param {String}     Type 請求類型
     * @ param {String}     sessionId 用戶userToken
     * @ param {Boolean}     openLoad 開啟加載提示，默認開啟，true-開，false-關
     * @ param {function} StaticToast 靜態(tài)提示方法 ,詳細說明請參考 components/ui/Toast
     * @ param {Object}     header 重置請求頭
     * @ param {Boolean}     isMandatory 是否強制用戶授權，獲取用戶信息
    */

    StaticToast = getCurrentPages()[getCurrentPages().length - 1];
    let { url,openLoad=true, type, data={},header={}, ...others } = options||{};
    let sessionId = (Storage.get(__login__.server+"_userToken")||"");
    /*Start */
       
        var regExp = //(.*?)//,
        hostkey = url.match(regExp)[1];
    let baseUrl = config.baseAPI[hostkey].host;
    url = url.replace(regExp, "/");

    /*End */

    __DEBUG__&&console.log("#--baseUrl:", baseUrl);
    __DEBUG__&&console.log("#--請求地址:", `${baseUrl}${url}`);
    __DEBUG__&&console.log("----------分割線---------------");
    openLoad&&StaticToast.__showLoading__();
    return new Promise((resolve, reject) => {
        return wepy.request({
            url:`${baseUrl}${url}`,
            method:(type || "POST"),
            data,
            header:{
                "t9oken":sessionId,
                "content-type": "application/json",
                // "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
                ...header
            },
            success:(res)=>{
                StaticToast.__hideLoading__();
                return resolve(resHandler(res,options));
            },
            error:(err,status)=>{
                StaticToast.__hideLoading__();
                return reject(errorHandler(err,options,err.statusCode));
            }
        });
    })

業(yè)務調用示例:

//最后請求得到的地址是 https://easy.com/mock/594635**c/miniPrograms/service/XXX (域名不同環(huán)境不一樣，在config里的 ENV baseAPI控制)
fetchJson({
    type:"post",
    // url:"/mockApi/service/XXX", 
    data:{
        name:"蘇南"
    },
    success:res=>{
        console.log(`大家好，我是蘇南`,res)
        
    }

});

4、填坑時間了，wepy框架中每個組件內的生命周期回調 onload,只要是引入了組件，不管你視圖有沒有渲染，他都會執(zhí)行，導致某些業(yè)務邏輯用不上它的時候也執(zhí)行了產生異常（當然為個鍋< 小程序 >肯定說我不背～^～ ），詳細看鏈接：https://github.com/Tencent/we... ， https://github.com/Tencent/we...   ，不知道后面有沒有人解決

5、rich-text,小程序的一個組件，雖然有那么一點點用處，但又不得不說到底要它何用?。科渌奈揖腿塘?，a標簽，a標簽啊，屬性沒有，那還要它何用啊，你都不要我跳轉，我還要用你嗎？b、i、span、em……哪個我不能用？不知道設計這個組件的人是不是腦被驢踢了(愿老天保佑，我在這罵他，可千萬別被看到了，哈哈～)，又是業(yè)務需求后臺配置的內容有鏈接，沒辦法，來吧，搞吧，往死里搞吧，一切的推脫都是你技術low的借口(你看，你看，別人的怎么可以跳轉啊，別人怎么做到的？給我一刀，我能把產品砍成渣)，所以有了后面的填坑：

PS：完整示例源碼 來啦～，覺得不錯記得 Star、Star、Watch 哦，感謝！

今天的分享就到這里，寫了蠻久，最近才在開始嘗試寫博客，新手上路中，如果文章中有不對之處，煩請各位大神斧正。如果你覺得這篇文章對你有所幫助，請記得點贊哦～，如覺得不錯，記得關注我們的公眾號哦！

面試踩過的坑，都在這里了～
你應該做的前端性能優(yōu)化之總結大全！
如何給localStorage設置一個過期時間？
手把手教你如何繪制一輛會跑車
如何用CSS3畫出懂你的3D魔方？
SVG Sprites Icon的使用技巧
immutability因React官方出鏡之使用總結分享！

作者：蘇南 - 首席填坑官
交流群：912594095，公眾號：honeyBadger8
本文原創(chuàng)，著作權歸作者所有。商業(yè)轉載請聯(lián)系@IT·平頭哥聯(lián)盟獲得授權，非商業(yè)轉載請注明原鏈接及出處。