摘要：官網訪問官網更快閱讀全部免費分享課程出品全網最新微信小程序基于最新版開發者工具之初中級培訓教程分享。翻譯能貓聲明本雙語文章的中文翻譯系英語原創內容，轉載請注明出處。

iKcamp官網：http://www.ikcamp.com
訪問官網更快閱讀全部免費分享課程：《iKcamp出品｜全網最新｜微信小程序｜基于最新版1.0開發者工具之初中級培訓教程分享》。
包含：文章、視頻、源代碼

本文配套視頻地址
https://v.qq.com/x/page/m0554uf5jzt.html?new=1

開始前請把 ch2-2 分支中的 code/ 目錄導入微信開發工具

在這一章中，我們會在util目錄新建 3 個文件，這些文件分別提供了一些常用的函數，變量，已便我們在不同的頁面中使用

  ├── utils/             
  │   ├─ config.js
  │   ├─ index.js
  │   ├─ mock.js

該文件存放了一些 const 常量（如開發環境，默認文案，默認圖片等），將這些常量存在 core 這個對象中，最后通過 export default core 將 core 這個對象導出。由于只是存放一些配置常量，此處不再復述：

  "use strict";
  const env = "dev";// dev production
  /*
   * 默認接口出錯彈窗文案
   * @type {string}
   */
  const defaultAlertMessage = "好像哪里出了小問題~ 請再試一次~";
  /*
   * 默認分享文案
   * @type {{en: string}}
   */
  const defaultShareText = {
      en: "iKcamp英語-學英語口語聽力四六級"
  };
  /*
   * 小程序默認標題欄文字
   * @type {string}
   */
  const defaultBarTitle = {
      en: "iKcamp英語學習"
  };
  /*
   * 文章默認圖片
   * @type {string}
   */
  const defaultImg = {
      articleImg: "https://n1image.hjfile.cn/mh/2017/06/07/7e8f7b63dba6fa3849b628c0ce2c2a46.png",
      coverImg: "https://n1image.hjfile.cn/mh/2017/06/07/7472c035ad7fe4b8db5d2b20e84f9374.png"
  };
  let core = {
      env: env,
      defaultBarTitle: defaultBarTitle["en"],
      defaultImg: defaultImg,
      defaultAlertMsg: defaultAlertMessage,
      defaultShareText: defaultShareText["en"],
      isDev: env === "dev",
      isProduction: env === "production"
  };
  export default core;

該文件用來存放一些假數據，方便本地開發調試，如果你有 mock 服務器，當然更好

  const list = {
    data: [
      {
        articles: [
          {
            contentId: 1177432,
            cover: "https://n1image.hjfile.cn/mh/2017/06/26/9ffa8c56cfd76cf5159011f4017f022e.jpg",
            pubdate: "2017-06-27 00:45:00",
            title: "Quora精選：為什么聰明人總能保持冷靜？"
          },
          {
            contentId: 1176561,
            cover: "https://n1image.hjfile.cn/mh/2017/06/26/0eb29c4c08e7be93f74ce9ce0fd5a25e.jpg",
            pubdate: "2017-06-27 00:30:00",
            title: "與時間有關的英語俚語（四）"
          },
          {
            contentId: 1161967,
            cover: "http://n1image.hjfile.cn/mh/2017/05/25/5d6ce79848cc81b800959383c35dd081.jpg",
            pubdate: "2017-06-27 00:15:00",
            title: "2017.5大學英語六級口語考試真題：看圖論述“人與人之間的信任”"
          },
          {
            contentId: 1177828,
            cover: "https://n1image.hjfile.cn/mh/2017/06/26/c99a6d180367bf1a250d6e7c6c3083c6.jpg",
            pubdate: "2017-06-27 00:00:01",
            title: "亞馬遜賣衣服有新招！新衣服試穿一周再付錢"
          }
        ],
        date: "2017-06-27"
      },
      {
        articles: [
          {
            contentId: 1175100,
            cover: "https://n1image.hjfile.cn/mh/2017/06/23/2490fdbcfc131c0e256546da4a03f1ac.jpg",
            pubdate: "2017-06-26 00:45:00",
            title: "雙語美文：小時候的自己，真是傻得可愛"
          },
          {
            contentId: 1172434,
            cover: "https://n1image.hjfile.cn/mh/2017/06/19/57a8ef65ee53f5921657376fd3fe4a75.jpg",
            pubdate: "2017-06-26 00:30:00",
            title: "15個和money有關的習語，可別用錯了"
          },
          {
            contentId: 1161968,
            cover: "http://n1image.hjfile.cn/mh/2017/05/25/2260fb0deb74734f5ec5a375423a6b52.jpg",
            pubdate: "2017-06-26 00:15:00",
            title: "2017年5月大學英語六級口語考試真題——小組討論之扶老人是我們的責任嗎？"
          },
          {
            contentId: 1161963,
            cover: "http://n1image.hjfile.cn/mh/2017/05/25/93228c5713545ef328e708ddb73e28a2.jpg",
            pubdate: "2017-06-26 00:15:00",
            title: "2017年5月大學英語六級口語考試——優秀領導的特質"
          }
        ],
        date: "2017-06-26"
      },
      {
        articles: [
          {
            contentId: 1175110,
            cover: "https://n1image.hjfile.cn/mh/2017/06/23/a5bf85e439696829a937accfd99f0eb7.jpg",
            pubdate: "2017-06-25 00:45:00",
            title: "Quora精選：什么樣的人注定無法成功？"
          },
          {
            contentId: 1142849,
            cover: "https://n1image.hjfile.cn/mh/2017/06/22/faf544ccf3e4f9e8da4ee9d5d8fcc635.jpg",
            pubdate: "2017-06-25 00:30:00",
            title: "表達雌性動物和雄性動物的不同說法"
          },
          {
            contentId: 1161915,
            cover: "http://n1image.hjfile.cn/mh/2017/05/25/7778bd5547fa216db57cd87a78bd790d.jpg",
            pubdate: "2017-06-25 00:15:00",
            title: "2017年5月大學英語四級口語考試——如何用PPT展現一堂課"
          },
          {
            contentId: 1175101,
            cover: "https://n1image.hjfile.cn/mh/2017/06/23/045ed76502b0f1ccdaccdae827c17c2c.jpg",
            pubdate: "2017-06-25 00:00:00",
            title: "雙語美文：總在不經意間，發覺自己渺小"
          }
        ],
        date: "2017-06-25"
      }
    ],
    message: "success",
    status: 0,
    time: null
  };

  const detail = {
    data: {
      agreeNum: 0,
      articleImage: "https://n1image.hjfile.cn/mh/2017/06/26/9ffa8c56cfd76cf5159011f4017f022e.jpg",
      author: "Quora用戶",
      autoSummary: "Why do intelligent people seem calm all the time?為什么聰明人總能保持冷靜？

	

	Answer from @Domen Grabec來自@Domen Grabec的回答

	If you can solve your problem, then what is the n...",
      cateId: 0,
      channelId: 1,
      commentCount: 2,
      content: "

	

	
Why do intelligent people seem calm all the time?
為什么聰明人總能保持冷靜？


	 

	
Answer from @Domen Grabec
來自@Domen Grabec的回答


	
If you can solve your problem, then what is the need of worrying?
如果你能解決問題，那何慮之有？


	
If you cannot solve it, then what is the use of worrying?
如果你不能解決問題，那憂慮又有什么用呢？


	
And if you look at this logically not being calm will only work to your disadvantage in many situations:
如果你從邏輯的角度來看，不冷靜只會起反效果，在很多情況下都一樣：


	
There is an important exam coming up and you are freaking out. Panicking might confuse you, inhibit your learning and as a result you might perform worse on the exam.
（比如）你正面臨一場重要的考試，而你慌得不得了。你的驚慌只會讓你思維混亂，它會妨礙你的學習，其結果就是你會在考試中發揮得更糟。


	
Someone is robbing you and you start to panic. You might get the robber nervous, and he might do something impulsive (like stab you) obviously worsening your position.
（再比如）一個人正在搶劫你，而你開始慌了。你可能會讓搶劫者變得緊張，而他可能就會做出些過激的事情（比如捅你一刀），顯然這回讓你的處境更糟。


	
You lead a group of people at work and are facing a heavy problem, or an impossible deadline. Well this is the time to inspire people and get the most out of them as possible. That should increase your chances of solving the problem. If you panic you might discourage them, and not only you, but your whole team shall underperform.
（再比如）你正帶領著一組人一起工作，并且正面臨著一個嚴峻的問題，或者是一個不可能趕上的截止日期。好嘛，你現在需要做的是啟發這些人，盡可能讓他們做出成果；這會讓你解決問題的概率更大一些。如果你慌了，你可能會打擊到他們，于是不只是你，你的整個團隊都會發揮不佳。


	
While you panic, your mind is having a hard time finding a solution to the problem. Even if the solution is only to stay calm and wait for the problem to pass.
當你慌張的時候，你的大腦會很難找到解決問題的方法。而解決問題的方法很有可能只是冷靜下來并等著問題自己過去。


	 

	
Answer from @Faith Paul
來自@Faith Paul的回答


	
Intelligent people think before they speak.
聰明的人先想再說。


	
Intelligent people also think rationally.
而且，聰明人的思維是理性的。


	
Instead of freaking out over every little thing, finding drama, or becoming a victim, intelligent people rationalize their problems.
聰明人會理性地去分析問題，而不是在每個細枝末節上的慌神、制造情況、或怨天尤人。


	
Intelligent people don't prolong their problems. They end their suffering by doing what needs to be done in order for that problem to go away.
聰明人不會讓問題遺留下來。他們會做那些必要的事以解決問題。


	
Additionally, I've noticed that intelligent people who are stressed find an outlet or take a nap. Bottling up anxiety or pointing fingers like many people do is just going to evoke more stress.
還有，我發現聰明人在不堪重負的時候會找個發泄方式，或者小憩一下。很多其他人或把焦慮壓制下來，或者在別人身上出氣，而這只會讓壓力更重。


	
Obviously not all problems can be solved, but my point is that intelligent people handle stress differently.
顯然，并不是所有的問題都能被解決，我想表達的是：聰明人處理壓力的方式時不一樣的。


	

	

	
Answer from @Humberto Rada
來自@Humberto Rada的回答


	
This could be for several reasons, but one thing I noticed from highly intelligent friends who are calm is that they are able to entertain themselves.
原因有很多，而我從我那些冷靜的聰明朋友身上發現的一點是：他們有辦法自娛自樂。


	
Yes that is right, they always got something to think about. 
對，就是這樣，他們總有什么東西可以想。


	
Its like they enjoy their thoughts more than interacting with other people. 
好像他們覺得自己的思維比和人交流更有吸引力。


	
They are always elaborating on thoughts so they are busy with themselves.
他們總是在細細揣摩自己的想法，所以他們自己一個人忙著呢。


	 

	（翻譯：能貓）

	聲明：本雙語文章的中文翻譯系iKcamp英語原創內容，轉載請注明出處。中文翻譯僅代表譯者個人觀點，僅供參考。如有不妥之處，歡迎指正。
",
      contentId: 1177432,
      editorName: "能貓",
      isBest: "Y",
      langs: "en   ",
      langsCate: 1043,
      langsParentCate: 1040,
      lastUpdateTime: "2017-06-27 00:45:00.530",
      link: "",
      maxPageNum: 1,
      newTitle: "",
      picName: "",
      reviewFlag: 0,
      sourceLink: "",
      sourceName: "Quora",
      sourceType: 0,
      sparePic: "",
      subTitle: "",
      subjectId: 0,
      summary: "為什么有些人總是有辦法冷靜地面對一切？",
      tags: "智力|職場|學習|雙語閱讀|勵志人生|實用熱門|quora|微信熱門",
      title: "Quora精選：為什么聰明人總能保持冷靜？",
      totalView: 112
    },
    message: "success",
    status: 0,
    time: null
  };

  export {
      detail,
      list
  }

index.js 文件中，我們會增加一些公用的函數方法，比如對網絡請求封裝、開發環境下 log 日志、本地存儲等

首先，我們把配置信息 config.js 和假數據 mock.js 引進來，并正常導出

  "use strict"
  import Promise from "../lib/promise"
  import config from "./config"
  import * as Mock from "./mock"

  let util = {
    
  }
  export default util

第二行代碼：

  import Promise from "../lib/promise"

這一段代碼的作用是引入一個實現 Promise 的 第三方工具庫，這樣我們就可以在小程序中使用 Promise 方法來解決 回調地獄 的問題。

注意： 在新版本的小程序中已經支持了原生 Promise 方法

下面我們開始對 util 對象進行公用方法擴展封裝：
增加 log 控制臺調試功能

如果環境配置為dev環境，則打印參數內容

let util = {
  isDEV: config.isDev,
  log(){
    this.isDEV && console.log(...arguments)
  }
}

封裝 alert 彈出窗口

由于開發環境中，經常需要查看一些對象信息，所以增加了 object 類型解析

let util = {
  // 此處省略部分代碼
  alert(title = "提示", content = config.defaultAlertMsg) {
    if ("object" === typeof content){
      content = this.isDEV && JSON.stringify(content) || config.defaultAlertMsg
    }
    wx.showModal({
      title: title,
      content: content
    })
  }
}

wx.showModal 是微信官方提供的 api 方法，具體用法可 查閱文檔

封裝本地緩存數據的讀取功能

wx.getStorage 文檔地址  
wx.setStorage 文檔地址

let util = {
  // 此處省略部分代碼
  getStorageData(key, cb) {
    let self = this;

    // 將數據存儲在本地緩存中指定的 key 中，會覆蓋掉原來該 key 對應的內容，這是一個異步接口
    wx.getStorage({
      key: key,
      success (res) {
        cb && cb(res.data);
      }, 
      fail (err) {
        let msg = err.errMsg || "";
        if( /getStorage:fail/.test(msg) ) {
          self.setStorageData(key)
        }
      }
    })
  },
  setStorageData(key, value = "", cb) {
    wx.setStorage({
      key: key,
      data: value,
      success() {
        cb && cb();
      }
    })
  }
}

上一篇－微信小程序教學第二章：小程序中級實戰教程之預備篇 - 項目結構設計 ｜基于最新版1.0開發者工具
下一篇中，我們會把網絡請求封裝起來，并增加本地 mock 功能

iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、當當開售。

相關文章：
聽說 2017 你想寫前端？
前端開發者指南（2017）
翻譯連載 |《你不知道的JS》姊妹篇 | JavaScript 輕量級函數式編程
翻譯 | 關鍵CSS和Webpack: 減少阻塞渲染的CSS的自動化解決方案

報名地址：http://www.huodongxing.com/ev...
與“天天練口語”小程序總榜排名第四、教育類排名第一的研發團隊，面對面溝通交流。