【微信小程序項目實踐總結】30分鍾從陌生到熟悉

前言

我們之前對小程序做了基本學習：

• 1. 微信小程序開發07-列表頁面怎么做
• 2. 微信小程序開發06-一個業務頁面的完成
• 3. 微信小程序開發05-日歷組件的實現
• 4. 微信小程序開發04-打造自己的UI庫
• 5. 微信小程序開發03-這是一個組件
• 6. 微信小程序開發02-小程序基本介紹
• 7. 微信小程序開發01-小程序的執行流程是怎么樣的？

閱讀本文之前，如果大家想對小程序有更深入的了解，或者一些細節的了解可以先閱讀上述文章，本文后面點需要對着代碼調試閱讀

對應的github地址是：https://github.com/yexiaochai/wxdemo

首先我們來一言以蔽之，什么是微信小程序？PS：這個問題問得好像有些扯：）

小程序是一個不需要下載安裝就可使用的應用，它實現了應用觸手可及的夢想，用戶掃一掃或者搜一下即可打開應用。也體現了用完即走的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。從字面上看小程序具有類似Web應用的熱部署能力，在功能上又接近於原生APP。

所以說，其實微信小程序是一套超級Hybrid的解決方案，現在看來，小程序應該是應用場景最廣，也最為復雜的解決方案了。

很多公司都會有自己的Hybrid平台，我這里了解到比較不錯的是攜程的Hybrid平台、阿里的Weex、百度的糯米，但是從應用場景來說都沒有微信來得豐富，這里根本的區別是：

微信小程序是給各個公司開發者接入的，其他公司平台多是給自己業務團隊使用，這一根本區別，就造就了我們看到的很多小程序不一樣的特性：

① 小程序定義了自己的標簽語言WXML

② 小程序定義了自己的樣式語言WXSS

③ 小程序提供了一套前端框架包括對應Native API

④ 禁用瀏覽器Dom API（這個區別，會影響我們的代碼方式）

只要了解到這些區別就會知道為什么小程序會這么設計：

因為小程序是給各個公司的開發做的，其他公司的Hybrid方案是給公司業務團隊用的，一般擁有Hybrid平台的公司實力都不錯
但是開發小程序的公司實力良莠不齊，所以小程序要做絕對的限制，最大程度的保證框架層（小程序團隊）對程序的控制
因為畢竟程序運行在微信這種體量的APP中

之前我也有一個疑惑為什么微信小程序會設計自己的標簽語言，也在知乎看到各種各樣的回答，但是如果出於設計層面以及應用層面考慮的話：這樣會有更好的控制，而且我后面發現微信小程序事實上依舊使用的是webview做渲染（這個與我之前認為微信是NativeUI是向左的），但是如果我們使用的微信限制下面的標簽，這個是有限的標簽，后期想要換成NativeUI會變得更加輕易：

另一方面，經過之前的學習，我這邊明確可以得出一個感受：

① 小程序的頁面核心是標簽，標簽是不可控制的（我暫時沒用到js操作元素的方法），只能按照微信給的玩法玩，標簽控制顯示是我們的view

② 標簽的展示只與data有關聯，和js是隔離的，沒有辦法在標簽中調用js的方法

③ 而我們的js的唯一工作便是根據業務改變data，重新引發頁面渲染，以后別想操作DOM，別想操作Window對象了，改變開發方式，改變開發方式，改變開發方式！

1 this.setData({'wxml': `
2   <my-component>
3   <view>動態插入的節點</view> 
4   </my-component>
5 `});

 

然后可以看到這個是一個MVC模型

每個頁面的目錄是這個樣子的：

project
├── pages
|   ├── index
|   |   ├── index.json  index 頁面配置
|   |   ├── index.js    index 頁面邏輯
|   |   ├── index.wxml  index 頁面結構
|   |   └── index.wxss  index 頁面樣式表
|   └── log
|       ├── log.json    log 頁面配置
|       ├── log.wxml    log 頁面邏輯
|       ├── log.js      log 頁面結構
|       └── log.wxss    log 頁面樣式表
├── app.js              小程序邏輯
├── app.json            小程序公共設置
└── app.wxss            小程序公共樣式表

每個組件的目錄也大概是這個樣子的，大同小異，但是入口是Page層。

小程序打包后的結構（這里就真的不懂了，引用：小程序底層框架實現原理解析）：

所有的小程序基本都最后都被打成上面的結構

1、WAService.js  框架JS庫，提供邏輯層基礎的API能力

2、WAWebview.js 框架JS庫，提供視圖層基礎的API能力

3、WAConsole.js 框架JS庫，控制台

4、app-config.js 小程序完整的配置，包含我們通過app.json里的所有配置，綜合了默認配置型

5、app-service.js 我們自己的JS代碼，全部打包到這個文件

6、page-frame.html 小程序視圖的模板文件，所有的頁面都使用此加載渲染，且所有的WXML都拆解為JS實現打包到這里

7、pages 所有的頁面，這個不是我們之前的wxml文件了，主要是處理WXSS轉換，使用js插入到header區域

從設計的角度上說，小程序采用的組件化開發的方案，除了頁面級別的標簽，后面全部是組件，而組件中的標簽view、data、js的關系應該是與page是一致的，這個也是我們平時建議的開發方式，將一根頁面拆分成一個個小的業務組件或者UI組件：

從我寫業務代碼過程中，覺得整體來說還是比較順暢的，小程序是有自己一套完整的前端框架的，並且釋放給業務代碼的主要就是page，而page只能使用標簽和組件，所以說框架的對業務的控制力度很好。

最后我們從工程角度來看微信小程序的架構就更加完美了，小程序從三個方面考慮了業務者的感受：

① 開發工具+調試工具

② 開發基本模型（開發基本標准WXML、WXSS、JS、JSON）

③ 完善的構建（對業務方透明）

④ 自動化上傳離線包（對業務費透明離線包邏輯）

⑤ 監控統計邏輯

所以，微信小程序從架構上和使用場景來說是很令人驚艷的，至少驚艷了我......所以我們接下來在開發層面對他進行更加深入的剖析，我們這邊最近一直在做基礎服務，這一切都是為了完善技術體系，這里對於前端來說便是我們需要做一個Hybrid體系，如果做App，React Native也是不錯的選擇，但是一定要有完善的分層：

① 底層框架解決開發效率，將復雜的部分做成一個黑匣子，給頁面開發展示的只是固定的三板斧，固定的模式下開發即可

② 工程部門為業務開發者封裝最小化開發環境，最優為瀏覽器，確實不行便為其提供一個類似瀏覽器的調試環境

如此一來，業務便能快速迭代，因為業務開發者寫的代碼大同小異，所以底層框架配合工程團隊（一般是同一個團隊），便可以在底層做掉很多效率性能問題。

稍微大點的公司，稍微寬裕的團隊，還會同步做很多后續的性能監控、錯誤日志工作，如此形成一套文檔->開發->調試->構建->發布->監控、分析 為一套完善的技術體系

如果形成了這么一套體系，那么后續就算是內部框架更改、技術革新，也是在這個體系上改造，這塊微信小程序是做的非常好的。但很可惜，很多其他公司團隊只會在這個路徑上做一部分，后面由於種種原因不在深入，有可能是感覺沒價值，而最恐怖的行為是，自己的體系沒形成就貿然的換基礎框架，戒之慎之啊！好了閑話少說，我們繼續接下來的學習。

我對小程序的理解有限，因為沒有源碼只能靠經驗猜測，如果文中有誤，請各位多多提點

文章更多面對初中級選手，如果對各位有用，麻煩點贊喲

微信小程序的執行流程

微信小程序為了對業務方有更強的控制，App層做的工作很有限，我后面寫demo的時候根本沒有用到app.js，所以我這里認為app.js只是完成了一個路由以及初始化相關的工作，這個是我們看得到的，我們看不到的是底層框架會根據app.json的配置將所有頁面js都准備好。

我這里要表達的是，我們這里配置了我們所有的路由：

"pages":[
  "pages/index/index",
  "pages/list/list",
  "pages/logs/logs"
],

微信小程序一旦載入，會開3個webview，裝載3個頁面的邏輯，完成基本的實例化工作，只顯示首頁！這個是小程序為了優化頁面打開速度所做的工作，也勢必會浪費一些資源，所以到底是全部打開或者預加載幾個，詳細底層Native會根據實際情況動態變化，我們也可以看到，從業務層面來說，要了解小程序的執行流程，其實只要能了解Page的流程就好了，關於Page生命周期，除了釋放出來的API：onLoad -> onShow -> onReady -> onHide等，官方還出了一張圖進行說明：

Native層在載入小程序時候，起了兩個線程一個的view Thread一個是AppService Thread，我這邊理解下來應該就是程序邏輯執行與頁面渲染分離，小程序的視圖層目前使用 WebView 作為渲染載體，而邏輯層是由獨立的 JavascriptCore 作為運行環境。在架構上，WebView 和 JavascriptCore 都是獨立的模塊，並不具備數據直接共享的通道。當前，視圖層和邏輯層的數據傳輸，實際上通過兩邊提供的 evaluateJavascript 所實現。即用戶傳輸的數據，需要將其轉換為字符串形式傳遞，同時把轉換后的數據內容拼接成一份 JS 腳本，再通過執行 JS 腳本的形式傳遞到兩邊獨立環境。而 evaluateJavascript 的執行會受很多方面的影響，數據到達視圖層並不是實時的。

因為之前我認為頁面是使用NativeUI做渲染跟Webview沒撒關系，便覺得這個圖有問題，但是后面實際代碼看到了熟悉的shadow-dom以及Android可以看到哪部分是Web的，其實小程序主體還是使用的瀏覽器渲染的方式，還是webview裝載HTML和CSS的邏輯，最后我發現這張圖是沒有問題的，有問題的是我的理解，哈哈，這里我們重新解析這張圖：

WXML先會被編譯成JS文件，引入數據后在WebView中渲染，這里可以認為微信載入小程序時同時初始化了兩個線程，分別執行彼此邏輯：

① WXML&CSS編譯形成的JS View實例化結束，准備結束時向業務線程發送通知

② 業務線程中的JS Page部分同步完成實例化結束，這個時候接收到View線程部分的等待數據通知，將初始化data數據發送給View

③ View線程接到數據，開始渲染頁面，渲染結束執行通知Page觸發onReady事件

這里翻開源碼，可以看到，應該是全局控制器完成的Page實例化，完成后便會執行onLoad事件，但是在執行前會往頁面發通知：

__appServiceSDK__.invokeWebviewMethod({
    name: "appDataChange",
    args: o({}, e, {
        complete: n
    }),
    webviewIds: [t]
})

真實的邏輯是這樣的，全局控制器會完成頁面實例化，這個是根據app.json中來的，全部完成實例化存儲起來然后選擇第一個page實例執行一些邏輯，然后通知view線程，即將執行onLoad事件，因為view線程和業務線程是兩個線程，所以不會造成阻塞，view線程根據初始數據完成渲染，而業務線程繼續后續邏輯，執行onLoad，如果onLoad中有setData，那么會進入隊列繼續通知view線程更新。

所以我個人感覺微信官網那張圖不太清晰，我這里重新畫了一個圖：

再引用一張其他地方的圖：

模擬實現

都這個時候了，不來個簡單的小程序框架實現好像有點不對，我們做小程序實現的主要原因是想做到一端代碼三端運行：web、小程序、Hybrid甚至Servce端

我們這里沒有可能實現太復雜的功能，這里想的是就實現一個基本的頁面展示帶一個最基本的標簽即可，只做Page一塊的簡單實現，讓大家能了解到小程序可能的實現，以及如何將小程序直接轉為H5的可能走法

<view>
  <!-- 以下是對一個自定義組件的引用 -->
  <my-component inner-text="組件數據"></my-component>
  <view>{{pageData}}</view>
</view>

Page({
  data: {
    pageData: '頁面數據'
  },
  onLoad: function () {
    console.log('onLoad')
  },
})

<!-- 這是自定義組件的內部WXML結構 -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>

Component({
  properties: {
    // 這里定義了innerText屬性，屬性值可以在組件使用時指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 這里是一些組件內部數據
    someData: {}
  },
  methods: {
    // 這里是一個自定義方法
    customMethod: function () { }
  }
})

我們直接將小程序這些代碼拷貝一份到我們的目錄：

我們需要做的就是讓這段代碼運行起來，而這里的目錄是我們最終看見的目錄，真實運行的時候可能不是這個樣，運行之前項目會通過我們的工程構建，變成可以直接運行的代碼，而我這里思考的可以運行的代碼事實上是一個模塊，所以我們這里從最終結果反推、分拆到開發結構目錄，我們首先將所有代碼放到index.html，可能是這樣的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script type="text/javascript" src="libs/zepto.js" ></script>
<script type="text/javascript">

  class View {
    constructor(opts) {
      this.template = '<view>{{pageShow}}</view><view class="ddd" is-show="{{pageShow}}" >{{pageShow}}<view class="c1">{{pageData}}</view></view>';

      //由控制器page傳入的初始數據或者setData產生的數據
      this.data = {
        pageShow: 'pageshow',
        pageData: 'pageData',
        pageShow1: 'pageShow1'
      };

      this.labelMap = {
        'view': 'div',
        '#text': 'span'
      };

      this.nodes = {};
      this.nodeInfo = {};
    }

    /*
      傳入一個節點,解析出一個節點,並且將節點中的數據以初始化數據改變
      並且將其中包含{{}}標志的節點信息記錄下來
    */
    _handlerNode (node) {

      let reg = /\{\{([\s\S]+?)\}\}/;
      let result, name, value, n, map = {};
      let attrs , i, len, attr;

      name = node.nodeName;
      attrs = node.attributes;
      value = node.nodeValue;
      n = document.createElement(this.labelMap[name.toLowerCase()] || name);

      //說明是文本,需要記錄下來了
      if(node.nodeType === 3) {
        n.innerText =  this.data[value] || '';

        result =  reg.exec(value);
        if(result) {
          n.innerText =  this.data[result[1]] || '';

          if(!map[result[1]]) map[result[1]] = [];
          map[result[1]].push({
            type: 'text',
            node: n
          });
        }
      }

      if(attrs) {
        //這里暫時只處理屬性和值兩種情況,多了就復雜10倍了
        for (i = 0, len = attrs.length; i < len; i++) {
          attr = attrs[i];
          result = reg.exec(attr.value);

          n.setAttribute(attr.name, attr.value);
          //如果有node需要處理則需要存下來標志
          if (result) {
            n.setAttribute(attr.name, this.data[result[1]] || '');

            //存儲所有會用到的節點,以便后面動態更新
            if (!map[result[1]]) map[result[1]] = [];
            map[result[1]].push({
              type: 'attr',
              name: attr.name,
              node: n
            });

          }
        }
      }

      return {
        node: n,
        map: map
      }

    }

    //遍歷一個節點的所有子節點,如果有子節點繼續遍歷到沒有為止
    _runAllNode(node, map, root) {

      let nodeInfo = this._handlerNode(node);
      let _map = nodeInfo.map;
      let n = nodeInfo.node;
      let k, i, len, children = node.childNodes;

      //先將該根節點插入到上一個節點中
      root.appendChild(n);

      //處理map數據,這里的map是根對象,最初的map
      for(k in _map) {
        if(map[k]) {
          map[k].push(_map[k]);
        } else {
          map[k] = _map[k];
        }
      }

      for(i = 0, len = children.length; i < len; i++) {
        this._runAllNode(children[i], map, n);
      }

    }

    //處理每個節點,翻譯為頁面識別的節點,並且將需要操作的節點記錄
    splitTemplate () {
      let nodes = $(this.template);
      let map = {}, root = document.createElement('div');
      let i, len;

      for(i = 0, len = nodes.length; i < len; i++) {
        this._runAllNode(nodes[i], map, root);
      }

      window.map = map;
      return root
    }

      //拆分目標形成node,這個方法過長,真實項目需要拆分
    splitTemplate1 () {
      let template = this.template;
      let node = $(this.template)[0];
      let map = {}, n, name, root = document.createElement('div');
      let isEnd = false, index = 0, result;

      let attrs, i, len, attr;
      let reg = /\{\{([\s\S]+?)\}\}/;

      window.map = map;

      //開始遍歷節點,處理
      while (!isEnd) {
        name = node.localName;
        attrs = node.attributes;
        value = node.nodeValue;
        n = document.createElement(this.labelMap[name] || name);

        //說明是文本,需要記錄下來了
        if(node.nodeType === 3) {
          n.innerText =  this.data[value] || '';

          result =  reg.exec(value);
          if(result) {
            n.innerText =  this.data[value] || '';

            if(!map[value]) map[value] = [];
            map[value].push({
              type: 'text',
              node: n
            });
          }
        }

        //這里暫時只處理屬性和值兩種情況,多了就復雜10倍了
        for(i = 0, len = attrs.length; i < len; i++) {
          attr = attrs[i];
          result =  reg.exec(attr.value);

          n.setAttribute(attr.name, attr.value);
          //如果有node需要處理則需要存下來標志
          if(result) {
            n.setAttribute(attr.name, this.data[result[1]] || '');

            //存儲所有會用到的節點,以便后面動態更新
            if(!map[result[1]]) map[result[1]] = [];
            map[result[1]].push({
              type: 'attr',
              name: attr.name,
              node: n
            });

          }
        }

debugger

        if(index === 0) root.appendChild(n);
        isEnd = true;
        index++;

      }

      return root;


      console.log(node)
    }

  }

  let view = new View();

  document.body.appendChild(window.node)

</script>
</body>
</html>

這段代碼，非常簡單：

① 設置了一段模板，甚至，我們這里根本不關系其格式化狀態，直接寫成一行方便處理

this.template = '<view>{{pageShow}}</view><view class="ddd" is-show="{{pageShow}}" >{{pageShow}}<view class="c1">{{pageData}}</view></view>';

② 然后我們將這段模板轉為node節點（這里可以不用zepto，但是模擬實現怎么簡單怎么來吧），然后遍歷處理所有節點，我們就可以處理我們的數據了，最終形成了這個html：

<div><div><span>ffsd</span></div><div class="ddd" is-show="pageshow"><span>pageshow</span><div class="c1"><span>pageData</span></div></div></div>

③ 與此同時，我們存儲了一個對象，這個對象包含所有與之相關的節點：

這個對象是所有setData會影響到node的一個映射表，后面調用setData的時候，便可以直接操作對應的數據了，這里我們分拆我們代碼，形成了幾個關鍵部分，首先是View類，這個對應我們的模板，是核心類：

//View為模塊的實現,主要用於解析目標生產node
class View {
  constructor(template) {
    this.template = template;

    //由控制器page傳入的初始數據或者setData產生的數據
    this.data = {};

    this.labelMap = {
      'view': 'div',
      '#text': 'span'
    };

    this.nodes = {};
    this.root = {};
  }

  setInitData(data) {
    this.data = data;
  }

  //數據便會引起的重新渲染
  reRender(data, allData) {
    this.data = allData;
    let k, v, i, len, j, len2, v2;

    //開始重新渲染邏輯,尋找所有保存了的node
    for(k in data) {
      if(!this.nodes[k]) continue;
      for(i = 0, len = this.nodes[k].length; i < len; i++) {
        for(j = 0; j < this.nodes[k][i].length; j++) {
          v = this.nodes[k][i][j];
          if(v.type === 'text') {
            v.node.innerText = data[k];
          } else if(v.type === 'attr') {
            v.node.setAttribute(v.name, data[k]);
          }
        }
      }
    }
  }
  /*
    傳入一個節點,解析出一個節點,並且將節點中的數據以初始化數據改變
    並且將其中包含{{}}標志的節點信息記錄下來
  */
  _handlerNode (node) {

    let reg = /\{\{([\s\S]+?)\}\}/;
    let result, name, value, n, map = {};
    let attrs , i, len, attr;

    name = node.nodeName;
    attrs = node.attributes;
    value = node.nodeValue;
    n = document.createElement(this.labelMap[name.toLowerCase()] || name);

    //說明是文本,需要記錄下來了
    if(node.nodeType === 3) {
      n.innerText =  this.data[value] || '';

      result =  reg.exec(value);
      if(result) {
        n.innerText =  this.data[result[1]] || '';

        if(!map[result[1]]) map[result[1]] = [];
        map[result[1]].push({
          type: 'text',
          node: n
        });
      }
    }

    if(attrs) {
      //這里暫時只處理屬性和值兩種情況,多了就復雜10倍了
      for (i = 0, len = attrs.length; i < len; i++) {
        attr = attrs[i];
        result = reg.exec(attr.value);

        n.setAttribute(attr.name, attr.value);
        //如果有node需要處理則需要存下來標志
        if (result) {
          n.setAttribute(attr.name, this.data[result[1]] || '');

          //存儲所有會用到的節點,以便后面動態更新
          if (!map[result[1]]) map[result[1]] = [];
          map[result[1]].push({
            type: 'attr',
            name: attr.name,
            node: n
          });

        }
      }
    }

    return {
      node: n,
      map: map
    }

  }

  //遍歷一個節點的所有子節點,如果有子節點繼續遍歷到沒有為止
  _runAllNode(node, map, root) {

    let nodeInfo = this._handlerNode(node);
    let _map = nodeInfo.map;
    let n = nodeInfo.node;
    let k, i, len, children = node.childNodes;

    //先將該根節點插入到上一個節點中
    root.appendChild(n);

    //處理map數據,這里的map是根對象,最初的map
    for(k in _map) {
      if(!map[k]) map[k] = [];
      map[k].push(_map[k]);
    }

    for(i = 0, len = children.length; i < len; i++) {
      this._runAllNode(children[i], map, n);
    }

  }

  //處理每個節點,翻譯為頁面識別的節點,並且將需要操作的節點記錄
  splitTemplate () {
    let nodes = $(this.template);
    let map = {}, root = document.createElement('div');
    let i, len;

    for(i = 0, len = nodes.length; i < len; i++) {
      this._runAllNode(nodes[i], map, root);
    }

    this.nodes = map;
    this.root = root;
  }

  render() {
    let i, len;
    this.splitTemplate();
    for(i = 0, len = this.root.childNodes.length; i< len; i++)
      document.body.appendChild(this.root.childNodes[0]);
  }

}

這個類主要完成的工作是：

① 接受傳入的template字符串（直接由index.wxml讀出）

② 解析template模板，生成字符串和兼職與node映射表，方便后期setData導致的改變

③ 渲染和再次渲染工作

然后就是我們的Page類的實現了，這里反而比較簡單（當然這里的實現是不完善的）：

//這個為js羅傑部分實現,后續會釋放工廠方法
class PageClass {
  //構造函數,傳入對象
  constructor(opts) {

    //必須擁有的參數
    this.data = {};
    Object.assign(this, opts);
  }

  //核心方法,每個Page對象需要一個模板實例
  setView(view) {
    this.view = view;
  }

  //核心方法,設置數據后會引發頁面刷新
  setData(data) {
    Object.assign(this.data, data);

    //只影響改變的數據
    this.view.reRender(data, this.data)
  }

  render() {
    this.view.setInitData(this.data);
    this.view.render();

    if(this.onLoad) this.onLoad();
  }

}

現在輪着我們實際調用方，Page方法出場了：

function Page (data) {
  let page = new PageClass(data);
  return page;
}

基本上什么都沒有干的感覺，調用層代碼這樣寫：

function main() {
  let view = new View('<view>{{pageShow}}</view><view class="ddd" is-show="{{pageShow}}" >{{pageShow}}<view class="c1">{{pageData}}</view></view>');
  let page = Page({
    data: {
      pageShow: 'pageshow',
      pageData: 'pageData',
      pageShow1: 'pageShow1'
    },
    onLoad: function () {
      this.setData({
        pageShow: '我是pageShow啊'
      });
    }
  });

  page.setView(view);
  page.render();
}

main();

於是，我們可以看到頁面的變化，由開始的初始化頁面到執行onLoad時候的變化：

這里是最終完整的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script type="text/javascript" src="libs/zepto.js" ></script>
<script type="text/javascript">

//這個為js羅傑部分實現,后續會釋放工廠方法
class PageClass {
  //構造函數,傳入對象
  constructor(opts) {

    //必須擁有的參數
    this.data = {};
    Object.assign(this, opts);
  }

  //核心方法,每個Page對象需要一個模板實例
  setView(view) {
    this.view = view;
  }

  //核心方法,設置數據后會引發頁面刷新
  setData(data) {
    Object.assign(this.data, data);

    //只影響改變的數據
    this.view.reRender(data, this.data)
  }

  render() {
    this.view.setInitData(this.data);
    this.view.render();

    if(this.onLoad) this.onLoad();
  }

}

//View為模塊的實現,主要用於解析目標生產node
class View {
  constructor(template) {
    this.template = template;

    //由控制器page傳入的初始數據或者setData產生的數據
    this.data = {};

    this.labelMap = {
      'view': 'div',
      '#text': 'span'
    };

    this.nodes = {};
    this.root = {};
  }

  setInitData(data) {
    this.data = data;
  }

  //數據便會引起的重新渲染
  reRender(data, allData) {
    this.data = allData;
    let k, v, i, len, j, len2, v2;

    //開始重新渲染邏輯,尋找所有保存了的node
    for(k in data) {
      if(!this.nodes[k]) continue;
      for(i = 0, len = this.nodes[k].length; i < len; i++) {
        for(j = 0; j < this.nodes[k][i].length; j++) {
          v = this.nodes[k][i][j];
          if(v.type === 'text') {
            v.node.innerText = data[k];
          } else if(v.type === 'attr') {
            v.node.setAttribute(v.name, data[k]);
          }
        }
      }
    }
  }
  /*
    傳入一個節點,解析出一個節點,並且將節點中的數據以初始化數據改變
    並且將其中包含{{}}標志的節點信息記錄下來
  */
  _handlerNode (node) {

    let reg = /\{\{([\s\S]+?)\}\}/;
    let result, name, value, n, map = {};
    let attrs , i, len, attr;

    name = node.nodeName;
    attrs = node.attributes;
    value = node.nodeValue;
    n = document.createElement(this.labelMap[name.toLowerCase()] || name);

    //說明是文本,需要記錄下來了
    if(node.nodeType === 3) {
      n.innerText =  this.data[value] || '';

      result =  reg.exec(value);
      if(result) {
        n.innerText =  this.data[result[1]] || '';

        if(!map[result[1]]) map[result[1]] = [];
        map[result[1]].push({
          type: 'text',
          node: n
        });
      }
    }

    if(attrs) {
      //這里暫時只處理屬性和值兩種情況,多了就復雜10倍了
      for (i = 0, len = attrs.length; i < len; i++) {
        attr = attrs[i];
        result = reg.exec(attr.value);

        n.setAttribute(attr.name, attr.value);
        //如果有node需要處理則需要存下來標志
        if (result) {
          n.setAttribute(attr.name, this.data[result[1]] || '');

          //存儲所有會用到的節點,以便后面動態更新
          if (!map[result[1]]) map[result[1]] = [];
          map[result[1]].push({
            type: 'attr',
            name: attr.name,
            node: n
          });

        }
      }
    }

    return {
      node: n,
      map: map
    }

  }

  //遍歷一個節點的所有子節點,如果有子節點繼續遍歷到沒有為止
  _runAllNode(node, map, root) {

    let nodeInfo = this._handlerNode(node);
    let _map = nodeInfo.map;
    let n = nodeInfo.node;
    let k, i, len, children = node.childNodes;

    //先將該根節點插入到上一個節點中
    root.appendChild(n);

    //處理map數據,這里的map是根對象,最初的map
    for(k in _map) {
      if(!map[k]) map[k] = [];
      map[k].push(_map[k]);
    }

    for(i = 0, len = children.length; i < len; i++) {
      this._runAllNode(children[i], map, n);
    }

  }

  //處理每個節點,翻譯為頁面識別的節點,並且將需要操作的節點記錄
  splitTemplate () {
    let nodes = $(this.template);
    let map = {}, root = document.createElement('div');
    let i, len;

    for(i = 0, len = nodes.length; i < len; i++) {
      this._runAllNode(nodes[i], map, root);
    }

    this.nodes = map;
    this.root = root;
  }

  render() {
    let i, len;
    this.splitTemplate();
    for(i = 0, len = this.root.childNodes.length; i< len; i++)
      document.body.appendChild(this.root.childNodes[0]);
  }

}

function Page (data) {
  let page = new PageClass(data);
  return page;
}

function main() {
  let view = new View('<view>{{pageShow}}</view><view class="ddd" is-show="{{pageShow}}" >{{pageShow}}<view class="c1">{{pageData}}</view></view>');
  let page = Page({
    data: {
      pageShow: 'pageshow',
      pageData: 'pageData',
      pageShow1: 'pageShow1'
    },
    onLoad: function () {
      this.setData({
        pageShow: '我是pageShow啊'
      });
    }
  });

  page.setView(view);
  page.render();
}

main();

</script>
</body>
</html>

我們簡單的模擬便先到此結束，這里結束的比較倉促有一些原因：

① 這段代碼可以是最終打包構建形成的代碼，但是我這里的完成度只有百分之一，后續需要大量的構建相關介入

② 這篇文章目的還是接受開發基礎，而本章模擬實現太過復雜，如果篇幅大了會主旨不清

③ 這個是最重要的點，我一時也寫不出來啊！！！，所以各位等下個長篇，小程序前端框架模擬實現吧

④ 如果繼續實現，這里馬上要遇到組件處理、事件模型、分文件構建等高端知識，時間會拉得很長

所以我們繼續下章吧......

小程序中的Page的封裝

小程序的Page類是這樣寫的：

Page({
  data: {
    pageData: '頁面數據'
  },
  onLoad: function () {
    console.log('onLoad')
  },
})

傳入的是一個對象，顯然，我們為了更好的拆分頁面邏輯，前面我們介紹了小程序是采用組件化開發的方式，這里的說法可以更進一步，小程序是采用標簽化的方式開發，而標簽對應的控制器js只會改變數據影響標簽顯示，所以某種程度小程序開發的特點是：先標簽后js，我們構建一個頁面，首先就應該思考這個頁面有哪些標簽，哪些標簽是公共的標簽，然后設計好標簽再做實現。

比如我們一個頁面中有比較復雜的日歷相關模塊，事實上這個日歷模塊也就是在操作日歷標簽的數據以及設置點擊回調，那么我們就需要將頁面分開

比如這里的業務日歷模塊僅僅是index的一部分（其他頁面也可能用得到），所以我們實現了一個頁面共用的記錄，便與我們更好的分拆頁面：

class Page {
  constructor(opts) {
    //用於基礎page存儲各種默認ui屬性
    this.isLoadingShow = 'none';
    this.isToastShow = 'none';
    this.isMessageShow = 'none';

    this.toastMessage = 'toast提示';

    this.alertTitle = '';
    this.alertMessage = 'alertMessage';
    this.alertBtn = [];

    //通用方法列表配置，暫時約定用於點擊
    this.methodSet = [
      'onToastHide',
      'showToast',
      'hideToast',
      'showLoading',
      'hideLoading',
      'onAlertBtnTap',
      'showMessage',
      'hideMessage'
    ];

    //當前page對象
    this.page = null;
  }
  //產出頁面組件需要的參數
  getPageData() {
    return {
      isMessageShow: this.isMessageShow,
      alertTitle: this.alertTitle,
      alertMessage: this.alertMessage,
      alertBtn: this.alertBtn,

      isLoadingShow: this.isLoadingShow,
      isToastShow: this.isToastShow,
      toastMessage: this.toastMessage

    }
  }

  //pageData為頁面級別數據,mod為模塊數據,要求一定不能重復
  initPage(pageData, mod) {
    //debugger;
    let _pageData = {};
    let key, value, k, v;

    //為頁面動態添加操作組件的方法
    Object.assign(_pageData, this.getPageFuncs(), pageData);

    //生成真實的頁面數據
    _pageData.data = {};
    Object.assign(_pageData.data, this.getPageData(), pageData.data || {});

    for( key in mod) {
      value = mod[key];
      for(k in value) {
        v = value[k];
        if(k === 'data') {
          Object.assign(_pageData.data, v);
        } else {
          _pageData[k] = v;
        }
      }
    }

    console.log(_pageData);
    return _pageData;
  }
  onAlertBtnTap(e) {
    let type = e.detail.target.dataset.type;
    if (type === 'default') {
      this.hideMessage();
    } else if (type === 'ok') {
      if (this.alertOkCallback) this.alertOkCallback.call(this);
    } else if (type == 'cancel') {
      if (this.alertCancelCallback) this.alertCancelCallback.call(this);
    }
  }
  showMessage(msg) {
    let alertBtn = [{
      type: 'default',
      name: '知道了'
    }];
    let message = msg;
    this.alertOkCallback = null;
    this.alertCancelCallback = null;

    if (typeof msg === 'object') {
      message = msg.message;
      alertBtn = [];
      msg.cancel.type = 'cancel';
      msg.ok.type = 'ok';

      alertBtn.push(msg.cancel);
      alertBtn.push(msg.ok);
      this.alertOkCallback = msg.ok.callback;
      this.alertCancelCallback = msg.cancel.callback;
    }

    this.setData({
      alertBtn: alertBtn,
      isMessageShow: '',
      alertMessage: message
    });
  }
  hideMessage() {
    this.setData({
      isMessageShow: 'none',
    });
  }
  //當關閉toast時觸發的事件
  onToastHide(e) {
    this.hideToast();
  }
  //設置頁面可能使用的方法
  getPageFuncs() {
    let funcs = {};
    for (let i = 0, len = this.methodSet.length; i < len; i++) {
      funcs[this.methodSet[i]] = this[this.methodSet[i]];
    }
    return funcs;
  }

  showToast(message, callback) {
    this.toastHideCallback = null;
    if (callback) this.toastHideCallback = callback;
    let scope = this;
    this.setData({
      isToastShow: '',
      toastMessage: message
    });

    // 3秒后關閉loading
    setTimeout(function() {
      scope.hideToast();
    }, 3000);
  }
  hideToast() {
    this.setData({
      isToastShow: 'none'
    });
    if (this.toastHideCallback) this.toastHideCallback.call(this);
  }
  //需要傳入page實例
  showLoading() {
    this.setData({
      isLoadingShow: ''
    });
  }
  //關閉loading
  hideLoading() {
    this.setData({
      isLoadingShow: 'none'
    });
  }
}
//直接返回一個UI工具了類的實例
module.exports = new Page

其中頁面會用到的一塊核心就是：

//pageData為頁面級別數據,mod為模塊數據,要求一定不能重復
initPage(pageData, mod) {
  //debugger;
  let _pageData = {};
  let key, value, k, v;

  //為頁面動態添加操作組件的方法
  Object.assign(_pageData, this.getPageFuncs(), pageData);

  //生成真實的頁面數據
  _pageData.data = {};
  Object.assign(_pageData.data, this.getPageData(), pageData.data || {});

  for( key in mod) {
    value = mod[key];
    for(k in value) {
      v = value[k];
      if(k === 'data') {
        Object.assign(_pageData.data, v);
      } else {
        _pageData[k] = v;
      }
    }
  }

  console.log(_pageData);
  return _pageData;
}

調用方式是：

Page(_page.initPage({
  data: {
    sss: 'sss'
  },
  // methods: uiUtil.getPageMethods(),
  methods: {
  },
  goList: function () {
    if(!this.data.cityStartId) {
      this.showToast('請選擇出發城市');
      return;
    }
    if(!this.data.cityArriveId) {
      this.showToast('請選擇到達城市');
      return;
    }

    wx.navigateTo({
    })

  }
}, {
  modCalendar: modCalendar,
  modCity: modCity
}))

可以看到，其他組件，如這里的日歷模塊只是一個對象而已：

module.exports = {
  showCalendar: function () {
    this.setData({
      isCalendarShow: ''
    });
  },
  hideCalendar: function () {
    this.setData({
      isCalendarShow: 'none'
    });
  },
  preMonth: function () {

    this.setData({
      calendarDisplayTime: util.dateUtil.preMonth(this.data.calendarDisplayTime).toString()
    });
  },
  nextMonth: function () {
    this.setData({
      calendarDisplayTime: util.dateUtil.nextMonth(this.data.calendarDisplayTime).toString()
    });
  },
  onCalendarDayTap: function (e) {
    let data = e.detail;
    var date = new Date(data.year, data.month, data.day);
    console.log(date)

    //留下一個鈎子函數
    if(this.calendarHook) this.calendarHook(date);
    this.setData({
      isCalendarShow: 'none',
      calendarSelectedDate: date.toString(),
      calendarSelectedDateStr: util.dateUtil.format(date, 'Y年M月D日')
    });
  },
  onContainerHide: function () {
    this.hideCalendar();
  },

  data: {
    isCalendarShow: 'none',
    calendarDisplayMonthNum: 1,
    calendarDisplayTime: selectedDate,
    calendarSelectedDate: selectedDate,
    calendarSelectedDateStr: util.dateUtil.format(new Date(selectedDate), 'Y年M月D日')
  }
}

但是在代碼層面卻幫我們做到了更好的封裝，這個基類里面還包括我們自定義的常用組件，loading、toast等等：

page是最值得封裝的部分，這里是基本page的封裝，事實上，列表頁是常用的一種業務頁面，雖然各種列表頁的篩選條件不一樣，但是主體功能無非都是：

① 列表渲染

② 滾動加載

③ 條件篩選、重新渲染

所以說我們其實可以將其做成一個頁面基類，跟abstract-page一個意思，這里留待我們下次來處理吧

小程序中的組件

請大家對着github中的代碼調試閱讀這里

前面已經說了，小程序的開發重點是一個個的標簽的實現，我們這里將業務組件設置成了一個個mod，UI組件設置成了真正的標簽，比如我們頁面會有很多非業務類的UI組件：

① alert類彈出層

② loading類彈出層

③ 日歷組件

④ toast&message類提示彈出組件

⑤ 容器類組件

⑥ ......

這些都可以我們自己去實現，但是微信其實提供給我們了系統級別的組件：

這里要不要用就看實際業務需求了，一般來說還是建議用的，我們這里為了幫助各位更好的了解小程序組件，特別實現了一個較為復雜，而小程序又沒有提供的組件日歷組件，首先我們這里先建立一個日歷組件目錄：

其次我們這里先做最簡單實現：

let View = require('behavior-view');
const util = require('../utils/util.js');

// const dateUtil = util.dateUtil;

Component({
  behaviors: [
    View
  ],
  properties: {
    
  },
  data: {
    weekDayArr: ['日', '一', '二', '三', '四', '五', '六'],
    displayMonthNum: 1,

    //當前顯示的時間
    displayTime: null,
    //可以選擇的最早時間
    startTime: null,
    //最晚時間
    endTime: null,

    //當前時間，有時候是讀取服務器端
    curTime: new Date()
    
  },

  attached: function () { 
    //console.log(this)
  },
  methods: {
   
  }
})

<wxs module="dateUtil">
  var isDate = function(date) {
    return date && date.getMonth;
  };

  var isLeapYear = function(year) {
    //傳入為時間格式需要處理
    if (isDate(year)) year = year.getFullYear()
    if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) return true;
    return false;
  };

  var getDaysOfMonth = function(date) {
    var month = date.getMonth(); //注意此處月份要加1，所以我們要減一
    var year = date.getFullYear();
    return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
  }

  var getBeginDayOfMouth = function(date) {
    var month = date.getMonth();
    var year = date.getFullYear();
    var d = getDate(year, month, 1);
    return d.getDay();
  }

  var getDisplayInfo = function(date) {
    if (!isDate(date)) {
      date = getDate(date)
    }
    var year = date.getFullYear();

    var month = date.getMonth();
    var d = getDate(year, month);

    //這個月一共多少天
    var days = getDaysOfMonth(d);

    //這個月是星期幾開始的
    var beginWeek = getBeginDayOfMouth(d);

    /*
        console.log('info',JSON.stringify( {
          year: year,
          month: month,
          days: days,
          beginWeek: beginWeek
        }));
    */

    return {
      year: year,
      month: month,
      days: days,
      beginWeek: beginWeek
    }
  }

  module.exports = {
    getDipalyInfo: getDisplayInfo
  }
</wxs>


<view class="cm-calendar">
  <view class="cm-calendar-hd ">
    <block wx:for="{{weekDayArr}}">
      <view class="item">{{item}}</view>
    </block>
  </view>
  <view class="cm-calendar-bd ">
    <view class="cm-month ">
    </view>
    <view class="cm-day-list">

      <block wx:for="{{dateUtil.getDipalyInfo(curTime).days + dateUtil.getDipalyInfo(curTime).beginWeek}}" wx:for-index="index">

        <view wx:if="{{index < dateUtil.getDipalyInfo(curTime).beginWeek }}" class="item active"></view>
        <view wx:else class="item">{{index + 1 - dateUtil.getDipalyInfo(curTime).beginWeek}}</view>

      </block>

      <view class=" active  cm-item--disabled " data-cndate="" data-date="">

      </view>
    </view>
  </view>
</view>

這個是非常簡陋的日歷雛形，在代碼過程中有以下幾點比較痛苦：

① WXML與js間應該只有數據傳遞，根本不能傳遞方法，應該是兩個webview的通信，而日歷組件這里在WXML層由不得不寫一點邏輯

② 本來在WXML中寫邏輯已經非常費勁了，而我們引入的WXS，使用與HTML中的js片段也有很大的不同，主要體現在日期操作

這些問題，一度讓代碼變得復雜，而可以看到一個簡單的組件，還沒有復雜功能，涉及到的文件都太多了，這里頁面調用層引入標簽后：

<ui-calendar  is-show="" ></ui-calendar>

日歷的基本頁面就出來了：

這個日歷組件應該是在小程序中寫的最復雜的組件了，尤其是很多邏輯判斷的代碼都放在了WXML里面，根據之前的了解，小程序渲染在一個webview中，js邏輯在一個webview中，他這樣做的目的可能是想讓性能更好，這種UI組件使用的方式一般是直接使用，但是如果涉及到了頁面業務，便需要獨立出一個mod小模塊去操作對應組件的數據，如圖我們這里的日歷組件一般

<import src="./mod.searchbox.wxml" />
<view>
  <template is="searchbox" />
</view>
<include src="./mod/calendar.wxml"/>
<include src="../../utils/abstract-page.wxml"/>

/*
事實上一個mod就只是一個對象,只不過為了方便拆分,將對象分拆成一個個的mod
一個mod對應一個wxml,但是共享外部的css,暫時如此設計
所有日歷模塊的需求全部再此實現
*/
module.exports = {
  q: 1,
  ddd: function(){},

  data: {
    isCalendarShow: '',
    CalendarDisplayMonthNum: 2,
    CalendarDisplayTime: new Date(),
    CalendarSelectedDate: null
  }
}

於是代碼便非常好拆分了，這里請各位對比着github中的代碼閱讀，最終使用效果：

小程序中的數據請求與緩存

小程序使用這個接口請求數據，這里需要設置域名白名單：

wx.request(OBJECT)

可以看到數據請求已經回來了，但是我們一般來說一個接口不止會用於一個地方，每次重新寫好像有些費事，加之我這里想將重復的請求緩存起來，所以我們這里封裝一套數據訪問層出來

之前在瀏覽器中，我們一般使用localstorage存儲一些不太更改的數據，微信里面提供了接口處理這一切：

wx.setStorage(OBJECT)

我們這里需要對其進行簡單封裝，便與后面更好的使用，一般來說有緩存就一定要有過期，所以我們動態給每個緩存對象增加一個過期時間：

class Store {
  constructor(opts) {
    if(typeof opts === 'string') this.key = opts;
    else Object.assign(this, opts);

    //如果沒有傳過期時間,則默認30分鍾
    if(!this.lifeTime) this.lifeTime = 1;

    //本地緩存用以存放所有localstorage鍵值與過期日期的映射
    this._keyCache = 'SYSTEM_KEY_TIMEOUT_MAP';

  }
  //獲取過期時間,單位為毫秒
  _getDeadline() {
    return this.lifeTime * 60 * 1000;
  }

  //獲取一個數據緩存對象,存可以異步,獲取我同步即可
  get(sign){
    let key = this.key;
    let now = new Date().getTime();
    var data = wx.getStorageSync(key);
    if(!data) return null;
    data = JSON.parse(data);
    //數據過期
    if (data.deadLine < now) {
      this.removeOverdueCache();
      return null;
    }

    if(data.sign) {
      if(sign === data.sign) return data.data;
      else return null;
    }
    return null;
  }

  /*產出頁面組件需要的參數
  sign 為格式化后的請求參數，用於同一請求不同參數時候返回新數據，比如列表為北京的城市，后切換為上海，會判斷tag不同而更新緩存數據，tag相當於簽名
  每一鍵值只會緩存一條信息
  */
  set(data, sign) {
    let timeout = new Date();
    let time = timeout.setTime(timeout.getTime() + this._getDeadline());
    this._saveData(data, time, sign);
  }
  _saveData(data, time, sign) {
    let key = this.key;
    let entity = {
      deadLine: time,
      data: data,
      sign: sign
    };
    let scope = this;

    wx.setStorage({
      key: key,
      data: JSON.stringify(entity),
      success: function () {
        //每次真實存入前,需要往系統中存儲一個清單
        scope._saveSysList(key, entity.deadLine);
      }
    });
  }
  _saveSysList(key, timeout) {
    if (!key || !timeout || timeout < new Date().getTime()) return;
    let keyCache = this._keyCache;
    wx.getStorage({
      key: keyCache,
      complete: function (data) {
        let oldData = {};
        if(data.data) oldData = JSON.parse(data.data);
        oldData[key] = timeout;
        wx.setStorage({
          key: keyCache,
          data: JSON.stringify(oldData)
        });
      }
    });
  }
  //刪除過期緩存
  removeOverdueCache() {
    let now = new Date().getTime();
    let keyCache = this._keyCache;
    wx.getStorage({
      key: keyCache,
      success: function (data) {
        if(data && data.data) data = JSON.parse(data.data);
        for(let k in data) {
          if(data[k] < now) {
            delete data[k];
            wx.removeStorage({key: k, success: function(){}});
          }
        }
        wx.setStorage({
          key: keyCache,
          data: JSON.stringify(data)
        });
      }
    });
  }

}

module.exports = Store

這個類的使用也非常簡單，這里舉個例子：

1 sss = new global.Store({key: 'qqq', lifeTime: 1})
2 sss.set({a: 1}, 2)
3 sss.get()//因為沒有秘鑰會是null
4 sss.get(2)//sss.get(2)

這個時候我們開始寫我們數據請求的類：

首先還是實現了一個抽象類和一個業務基類，然后開始在業務層請求數據：

class Model {
  constructor() {
    this.url = '';
    this.param = {};
    this.validates = [];
  }
  pushValidates(handler) {
    if (typeof handler === 'function') {
      this.validates.push(handler);
    }
  }
  setParam(key, val) {
    if (typeof key === 'object') {
      Object.assign(this.param, key);
    } else {
      this.param[key] = val;
    }
  }
  //@override
  buildurl() {
    return this.url;
  }
  onDataSuccess() {
  }
  //執行數據請求邏輯
  execute(onComplete) {
    let scope = this;
    let _success = function(data) {
      let _data = data;
      if (typeof data == 'string') _data = JSON.parse(data);

      // @description 開發者可以傳入一組驗證方法進行驗證
      for (let i = 0, len = scope.validates.length; i < len; i++) {
        if (!scope.validates[i](data)) {
          // @description 如果一個驗證不通過就返回
          if (typeof onError === 'function') {
            return onError.call(scope || this, _data, data);
          } else {
            return false;
          }
        }
      }

      // @description 對獲取的數據做字段映射
      let datamodel = typeof scope.dataformat === 'function' ? scope.dataformat(_data) : _data;

      if (scope.onDataSuccess) scope.onDataSuccess.call(scope, datamodel, data);
      if (typeof onComplete === 'function') {
        onComplete.call(scope, datamodel, data);
      }
    };
    this._sendRequest(_success);
  }

  //刪除過期緩存
  _sendRequest(callback) {
    let url = this.buildurl();
    wx.request({
      url: this.buildurl(),
      data: this.param,
      success: function success(data) {
        callback && callback(data);
      }
    });
  }
}
module.exports = Model

這里是業務基類的使用辦法：

let Model = require('./abstract-model.js');

class DemoModel extends Model {
  constructor() {
    super();
    let scope = this;
    this.domain = 'https://apikuai.baidu.com';
    this.param = {
      head: {
        version: '1.0.1',
        ct: 'ios'
      }
    };

    //如果需要緩存,可以在此設置緩存對象
    this.cacheData = null;

    this.pushValidates(function(data) {
      return scope._baseDataValidate(data);
    });
  }

  //首輪處理返回數據，檢查錯誤碼做統一驗證處理
  _baseDataValidate(data) {
    if (typeof data === 'string') data = JSON.parse(data);
    if (data.data) data = data.data;
    if (data.errno === 0) return true;
    return false;
  }

  dataformat(data) {
    if (typeof data === 'string') data = JSON.parse(data);
    if (data.data) data = data.data;
    if (data.data) data = data.data;
    return data;
  }

  buildurl() {
    return this.domain + this.url;
  }

  getSign() {
    let param = this.getParam() || {};
    return JSON.stringify(param);
  }
  onDataSuccess(fdata, data) {
    if (this.cacheData && this.cacheData.set)
      this.cacheData.set(fdata, this.getSign());
  }

  //如果有緩存直接讀取緩存,沒有才請求
  execute(onComplete, ajaxOnly) {
    let data = null;
    if (!ajaxOnly && this.cacheData && this.cacheData.get) {
      data = this.cacheData.get(this.getSign());
      if (data) {
        onComplete(data);
        return;
      }
    }
    super.execute(onComplete);
  }

}

class CityModel extends DemoModel {
  constructor() {
    super();
    this.url = '/city/getstartcitys';
  }
}

module.exports = {
  cityModel: new CityModel

}

接下來是實際調用代碼：

let model = models.cityModel;
model.setParam({
  type: 1
});
model.execute(function(data) {
  console.log(data);
  debugger;
});

數據便請求結束了，有了這個類我們可以做非常多的工作，比如：

① 前端設置統一的錯誤碼處理邏輯

② 前端打點，統計所有的接口響應狀態

③ 每次請求相同參數做數據緩存

④ 這個對於錯誤處理很關鍵，一般來說前端出錯很大可能都是后端數據接口字段有變化，而這種錯誤是比較難尋找的，如果我這里做一個統一的收口，每次數據返回記錄所有的返回字段的標志上報呢，就以這個城市數據為例，我們可以這樣做：

class CityModel extends DemoModel {
  constructor() {
    super();
    this.url = '/city/getstartcitys';
  }
  //每次數據訪問成功，錯誤碼為0時皆會執行這個回調
  onDataSuccess(fdata, data) {
    super.onDataSuccess(fdata, data);
    //開始執行自我邏輯
    let o = {
      _indate: new Date().getTime()
    };
    for(let k in fdata) {
      o[k] = typeof fdata[k];
    }
    //執行數據上報邏輯
    console.log(JSON.stringify(o));
  }
}

這里就會輸出以下信息：

{"_indate":1533436847778,"cities":"object","hots":"object","total":"number","page":"string"}

如果對數據要求非常嚴苛，對某些接口做到字段層面的驗證，那么加一個Validates驗證即可，這樣對接口的控制會最大化，就算哪次出問題，也能很好從數據分析系統之中可以查看到問題所在，如果我現在想要一個更為具體的功能呢？我想要首次請求一個接口時便將其數據記錄下來，第二次便不再請求呢，這個時候我們之前設計的數據持久層便派上了用處：

let Store = require('./abstract-store.js');

class CityStore extends Store {
  constructor() {
    super();
    this.key = 'DEMO_CITYLIST';
    //30分鍾過期時間
    this.lifeTime = 30;
  }
}

module.exports = {
  cityStore: new CityStore
}

class CityModel extends DemoModel {
  constructor() {
    super();
    this.url = '/city/getstartcitys';
    this.cacheData = Stores.cityStore;
  }
  //每次數據訪問成功，錯誤碼為0時皆會執行這個回調
  onDataSuccess(fdata, data) {
    super.onDataSuccess(fdata, data);
    //開始執行自我邏輯
    let o = {
      _indate: new Date().getTime()
    };
    for(let k in fdata) {
      o[k] = typeof fdata[k];
    }
    //執行數據上報邏輯
    console.log(JSON.stringify(o));
  }
}

這個時候第二次請求時候便會直接讀取緩存了

結語

如果讀到這里，我相信大家應該清楚了，30分鍾當然是騙人的啦。。。。。。別說三十分鍾了，三個小時這些東西都讀不完，對於初學者的同學建議把代碼下載下來一邊調試一邊對着這里的文章做思考，這樣3天左右便可以吸收很多微信小程序的知識

寫這篇文章說實話還比較辛苦，近期小釵這邊工作繁忙，有幾段都是在和老板開會的時候偷偷寫的......，所以各位如果覺得文章還行麻煩幫忙點個贊

總結起來基本還是那句話，微信小程序從架構工程層面十分值得學習，而我這邊不出意外時間允許會深入的探索前端框架的實現，爭取實現一套能兼容小程序和web同時運行的代碼

我們實際工作中會直接使用上面的代碼，也會使用一些比較成熟的框架比如：https://tencent.github.io/wepy/，用什么，怎么做單看自己團隊項目的需求

我們在學習過程中做了一個實際的項目，完成度有60%，實際工作中便只需要完善細節即可，我這里便沒有再加強，一來是時間不足，二來是純粹業務代碼只會讓學習的代碼變得復雜，沒什么太大的必要，希望對初學者有一定幫助：