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

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

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

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

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

1、toast組件，大家都知道，官方的api wx.showToast 是滿(mǎn)足不了我們的需求的，因?yàn)樗恢С?"success", "loading"兩種狀態(tài)，同時(shí)“ title 文本最多顯示 7 個(gè)漢字長(zhǎng)度”，這是官方原話(huà)，有圖有真相哦，樣式巨丑～

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

wx.showModal的content的文字是不會(huì)居中的（現(xiàn)在不確定有沒(méi)有擴(kuò)展，可以設(shè)置），依稀記得有一次因?yàn)閱?wèn)題差點(diǎn)跟產(chǎn)品經(jīng)理吵起來(lái)，讓文字居中，我說(shuō)最少要兩小時(shí)，當(dāng)時(shí)產(chǎn)品就炸了，什么鬼？？？讓文字居中一下要兩小時(shí)？？?jī)尚r(shí)？？?jī)尚r(shí)？？呵呵～走了，后來(lái)就下決定自己封裝了一個(gè)屬于自己的toast組件，以下為部分核心代碼

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

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)

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

  // 設(shè)置緩存
  // timeout：過(guò)期時(shí)間（分鐘）
  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();

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

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

//env/dev.js 其他test、uat、prd結(jié)構(gòu)相同
//本地環(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"; //本地或開(kāi)發(fā)
import uat from "./env/pre"; //體驗(yàn)環(huán)境
import prd from "./env/prd"; //線(xiàn)上


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

請(qǐng)求調(diào)用api處理的示例

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

    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("#--請(qǐng)求地址:", `${baseUrl}${url}`);
    __DEBUG__&&console.log("----------分割線(xiàn)---------------");
    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è)務(wù)調(diào)用示例:

//最后請(qǐng)求得到的地址是 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、填坑時(shí)間了，wepy框架中每個(gè)組件內(nèi)的生命周期回調(diào) onload,只要是引入了組件，不管你視圖有沒(méi)有渲染，他都會(huì)執(zhí)行，導(dǎo)致某些業(yè)務(wù)邏輯用不上它的時(shí)候也執(zhí)行了產(chǎn)生異常（當(dāng)然為個(gè)鍋< 小程序 >肯定說(shuō)我不背～^～ ），詳細(xì)看鏈接：https://github.com/Tencent/we... ， https://github.com/Tencent/we...   ，不知道后面有沒(méi)有人解決

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

PS：完整示例源碼 來(lái)啦～，覺(jué)得不錯(cuò)記得 Star、Star、Watch 哦，感謝！

今天的分享就到這里，寫(xiě)了蠻久，最近才在開(kāi)始嘗試寫(xiě)博客，新手上路中，如果文章中有不對(duì)之處，煩請(qǐng)各位大神斧正。如果你覺(jué)得這篇文章對(duì)你有所幫助，請(qǐng)記得點(diǎn)贊哦～，如覺(jué)得不錯(cuò)，記得關(guān)注我們的公眾號(hào)哦！

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

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