微信小程序開發06-一個業務頁面的完成

前言

接上文：微信小程序開發05-日歷組件的實現

github地址：https://github.com/yexiaochai/wxdemo

這里來說一說我們的理念，我們也學習小程序開發有一周多了，從近期的使用上來說，小程序可以作為底層，但是缺少一個框架層，這個框架層需要提供：

① 組件庫

② 更好的代碼組織方式，也就是讓我們可以做到輕松的組件化開發

我們從最開始到現在，都在沿着這個方向去分解小程序學習，其實小程序本身的東西差不多了，但是我們代碼過程中有時候卻越高越復雜，多了很多封裝，其實這所有的復雜都是為了設置一個基本的架構，一個標准的開發模式，讓后面寫業務代碼的同學能更高效的寫代碼，經過一年多的發展，事實上這種較為成熟的框架已經有了，比如我們正在使用的：

https://tencent.github.io/wepy/

但是，可以看到小程序基本還是原生JS，這其實是個非常好的學習整理機會，所以我這邊一步步和大家對小程序進行了拆分，期望能形成一套還能用的雛形，幫助大家理解，所以我們繼續今天的學習吧，為了降低單頁面難度，我們將首頁進行下改造。

首頁

首頁做了一點改造，變成了這個樣式了：

這里需要三個點擊時間點，因為日歷組件，我們昨天就做好了，而他這個出發日期事實上就是我們日歷組件的selecedDate，處理這塊邏輯：

<template name="searchbox">
  <view class="c-row search-line" data-flag="start">
    <view class="c-span3">
      出發</view>
    <view class="c-span9 js-start search-line-txt">
      請選擇出發地</view>
  </view>
  <view class="c-row search-line" data-flag="arrive">
    <view class="c-span3">
      到達</view>
    <view class="c-span9 js-arrive search-line-txt">
      請選擇到達地</view>
  </view>
  <view class="c-row search-line" data-flag="arrive">
    <view class="c-span3">
      出發日期</view>
    <view class="c-span9 js-arrive search-line-txt">
      {{calendarSelectedDate || '請選擇出發日期'}} </view>
  </view>
  <view class="c-row " data-flag="arrive">
    <span class="btn-primary full-width js_search_list">查詢</span>
  </view>
</template>

<view class="c-row search-line" data-flag="arrive">
  <view class="c-span3">
    出發日期</view>
  <view class="c-span9 js-arrive search-line-txt">
    {{calendarSelectedDate || '請選擇出發日期'}} </view>
</view>

點擊時候我們彈出我們的日歷，這個時候我們日歷模塊釋放一個事件顯示日歷：

PS:template不與頁面級別WXML共享一個作用域，所以我暫時都采用的include引入

<view class="c-row search-line" data-flag="start">
  <view class="c-span3">
    出發</view>
  <view class="c-span9 js-start search-line-txt">
    請選擇出發地</view>
</view>
<view class="c-row search-line" data-flag="arrive">
  <view class="c-span3">
    到達</view>
  <view class="c-span9 js-arrive search-line-txt">
    請選擇到達地</view>
</view>
<view class="c-row search-line" data-flag="arrive" ontap="showCalendar">
  <view class="c-span3">
    出發日期</view>
  <view class="c-span9 js-arrive search-line-txt">
    {{calendarSelectedDateStr}}</view>
</view>
<view class="c-row " data-flag="arrive">
  <span class="btn-primary full-width js_search_list">查詢</span>
</view>
<include src="./mod/calendar.wxml" />
<include src="../../utils/abstract-page.wxml" />

<view class="c-row search-line" data-flag="arrive" ontap="showCalendar">
  <view class="c-span3">
    出發日期</view>
  <view class="c-span9 js-arrive search-line-txt">
    {{calendarSelectedDateStr}}</view>
</view>

/*
事實上一個mod就只是一個對象,只不過為了方便拆分,將對象分拆成一個個的mod
一個mod對應一個wxml,但是共享外部的css,暫時如此設計
所有日歷模塊的需求全部再此實現
*/
const util = require('../../../utils/util.js')

let selectedDate = new Date();

module.exports = {
  showCalendar: function () {
    this.setData({
      isCalendarShow: ''
    });
  },
  onCalendarDayTap: function (e) {
    let data = e.detail;
    var date = new Date(data.year, data.month, data.day);
    console.log(date)
    this.setData({
      calendarSelectedDate: date,
      calendarSelectedDateStr: util.dateUtil.format(date, 'Y年M月D日')
    });
  },
  data: {
    isCalendarShow: 'none',
    calendarDisplayMonthNum: 2,
    calendarDisplayTime: new Date(),
    calendarSelectedDate: selectedDate,
    calendarSelectedDateStr: util.dateUtil.format(selectedDate, 'Y年M月D日')
  }
}

顯然，這里的日歷這樣擺設有點丑，我們這里將其封裝成一個彈出層，所以我們這里再做一個容器類組件，專門用於裝載頁面樣式用：

<view class="cm-modal " style="z-index: {{uiIndex}}; position: fixed; display: {{isShow}}; ">
  <slot ></slot>
</view>
<view class="cm-overlay" bindtap="onMaskEvent" style="z-index: {{maskzIndex}}; display: {{isShow}}" >
</view>

<ui-container bindonContainerHide="onContainerHide" is-show="{{isCalendarShow}}" >
    <view class="calendar-wrapper-box">
      <view class="box-hd">
        <text class="fl icon-back js_back "></text>
        <text class="fr icon-next js_next"></text>
      </view>
      <ui-calendar bindonDayTap="onCalendarDayTap" displayTime="{{calendarDisplayTime}}" 
selectedDate="{{calendarSelectedDate}}" displayMonthNum="{{calendarDisplayMonthNum}}" 
is-show="{{isCalendarShow}}"></ui-calendar>
    </view>
</ui-container>

但是這里也引起了其他問題，因為引入了shadow-dom概念，我的樣式不能重用，組件內部樣式與外部是不能通信的，但是這里是頁面級別容器，內容的樣式肯定是來源頁面的，這里沒什么問題，所以我們這里顯示的是正確的，但是我這里想做一個出格一點的操作，我想用樣式將這里日歷月標題換個位置：

而日歷組件和外部是不能通信的，我們這里該如何處理呢，我這里想了兩個方案：

① 設置一個全局使用的組件庫樣式，讓所有組件繼承，但是不知道這里對性能是否有影響，因為這樣的話體積不會太小

② 小程序設計了可以傳入組件的方法，比如我們這里的日歷組件我們可以這樣改變其樣式

.calendar-cm-month {
    position: absolute;
    top: 0;
    height: 90rpx;
    line-height: 90rpx;
    width: 100%;
    color: #00b358;
    text-align: center;
}

Component({
 2 externalClasses: ['ex-class'],  3   behaviors: [
    View
  ],
  properties: {
    displayMonthNum: {
      type: Number
    },
    displayTime: {
      type: Date
    },
    selectedDate: {
      type: Date
    }
  },
  data: {
    weekDayArr: ['日', '一', '二', '三', '四', '五', '六'],
  },

  attached: function () { 
    //console.log(this)
    // debugger
  },
  methods: {
    onDayTap: function (e) {
      this.triggerEvent('onDayTap', e.currentTarget.dataset)
    }
  }
})

<ui-container bindonContainerHide="onContainerHide" is-show="{{isCalendarShow}}" >
    <view class="calendar-wrapper-box">
      <view class="box-hd">
        <text class="fl icon-back js_back "></text>
        <text class="fr icon-next js_next"></text>
      </view>
      <ui-calendar ex-class="calendar-cm-month" bindonDayTap="onCalendarDayTap" 
displayTime="{{calendarDisplayTime}}" selectedDate="{{calendarSelectedDate}}" 
displayMonthNum="{{calendarDisplayMonthNum}}" is-show="{{isCalendarShow}}"></ui-calendar>
    </view>
</ui-container>

具體各位去github上查看，總而言之，我們的頁面變成了這個樣子了：

PS：這里發現一個不知道是不是坑點的點，我們這里屬性傳遞的是一個date對象，但是到了組件層之間變成了對象，不知微信底層做了什么：

calendarDisplayTime: new Date()

好像變成了一個空對象，這里可能發生的情況是，經過傳遞的日期對象會被某種特殊處理，但是具體發生了什么事情就不知道了，這個卻引起了我們不小的麻煩，這里大概去翻開了一下源碼：

極有可能，小程序本身就不支持date屬性的傳遞，我們的日歷組件能跑起來的原因是什么，我這里都有點疑惑了......

而且就算以對象方式傳遞到組件的date類型都會變成莫名其妙的東西：

    ttt: {
      key: 'date',
      value: selectedDate
    },

這個特性有點令人抓不住頭腦了，這里根據探查，很有可能Component將date對象傳入WXML解釋時候，自動轉為了日期字符串了，所以我們這里看上去是對象的東西其實是字符串，這里的建議是：跟組件的date傳遞，暫時全部使用字符串代替，以免自我麻煩，然后我們先將之前的日歷操作全部變成字符串，再為我們的前后按鈕加上事件：

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)
    this.setData({
      isCalendarShow: 'none',
      calendarSelectedDate: date.toString(),
      calendarSelectedDateStr: util.dateUtil.format(date, 'Y年M月D日')
    });
  },
  onContainerHide: function () {
    this.hideCalendar();
  },

  data: {
    ttt: {
      key: 'date',
      value: selectedDate
    },
    isCalendarShow: '',
    calendarDisplayMonthNum: 1,
    calendarDisplayTime: new Date(2018, 9).toString(),
    calendarSelectedDate: selectedDate,
    calendarSelectedDateStr: util.dateUtil.format(new Date(selectedDate), 'Y年M月D日')
  }
}

雖然看上去惡心了一點，但是總是不會出什么明顯的問題，忍一忍吧......日期部分基本結束了，還有些小的限制沒有做上，比如哪些時段能選，哪些不能，這塊就有待各位發現吧，我們這里畢竟是學習，做細了很花功夫，我們接下來做出發目的地選擇部分。

數據請求

城市列表

城市列表這里看起來需要新開一個頁面，但是我這里想做在一個頁面中，考慮篇幅，我們使用彈出層容器組件看並且盡量削弱一些特性，幾天下來別說寫的還有些累......

這個又作為首頁的一個模塊而存在：

<view style="display: {{isCityShow}}; " class="city-wrapper"  >
    <view class="city-list">
        <view class="list-name">A</view>
        <view class="list-item">成都</view>
        <view class="list-item">成都</view>
        <view class="list-item">成都</view>
        <view class="list-item">成都</view>
        <view class="list-item">成都</view>
        <view class="list-item">成都</view>
    </view>
    <view class="city-list">
        <view class="list-name">A</view>
        <view class="list-item">成都</view>
        <view class="list-item">成都</view>
        <view class="list-item">成都</view>
        <view class="list-item">成都</view>
        <view class="list-item">成都</view>
        <view class="list-item">成都</view>
    </view>
</view>

/*
事實上一個mod就只是一個對象,只不過為了方便拆分,將對象分拆成一個個的mod
一個mod對應一個wxml,但是共享外部的css,暫時如此設計
所有日歷模塊的需求全部再此實現
*/
const util = require('../../../utils/util.js')

let selectedDate = new Date().toString();

module.exports = {
  showCitylist: function (e) {
    let flag = e.currentTarget.dataset.flag;

    if(flag === 'start') {

    } else {

    }
  },
  //用於設置城市數據
  setCityData: function (data) {

  },
  showCity: function () {
      this.setData({
        isCityShow: ''
      });
  },
  shideCity: function () {
    this.setData({
      isCityShow: 'none'
    });
  },
  data: {
    isCityShow: ''
  }
}

首頁調用代碼：

//獲取公共ui操作類實例
const _page = require('../../utils/abstract-page.js');
let modCalendar = require('./mod/calendar.js');
let modCity = require('./mod/city.js');

//獲取應用實例
const app = getApp()

Page(_page.initPage({
  data: {
  },
  // methods: uiUtil.getPageMethods(),
  methods: {
  },
  onShow: function () {
    global.sss = this;
    let scope = this;
  },
  onLoad: function () {
    // this.setPageMethods();
  }
}, {
  modCalendar: modCalendar,
  modCity: modCity
}))

這里我們開始有數據請求模塊了，小程序使用這個接口請求數據，這里比較尷尬的是他要設置域名白名單：

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

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

sss = new global.Store({key: 'qqq', lifeTime: 1})
sss.set({a: 1}, 2)
sss.get()//因為沒有秘鑰會是null
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));
  }
}

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

接下來便可以回到我們的頁面渲染邏輯了，這個時候就變得非常簡單了：

<view style="display: {{isCityShow}}; " class="city-wrapper">
  <block wx:for="{{cityData}}" wx:key="k">
    <view class="city-list">
      <block wx:for="{{item}}" wx:key="kk" wx:for-index="key" wx:for-item="value">
        <view class="list-name">{{key}}</view>
        <block wx:for="{{value}}" wx:key="kkk" wx:for-index="i" wx:for-item="v">
          <view class="list-item" data-cnname="{{v.name}}" data-id="{{v.regionid}}">{{v.cnname}}</view>
        </block>
      </block>
    </view>
  </block>
</view>

//用於設置城市數據
  setCityData: function(data) {
    data = data.cities;
    let citys = {}, sortCitys = [];
    let k, gname, name, i, tmp = {}, index;

    //首先處理每個name生成唯一K
    for (k in data) {
      name = data[k].name;
      if (!name) {
        continue;
      }
      gname = name[0].toUpperCase();
      if (!citys[gname]) citys[gname] = [];
      citys[gname].push(data[k]);
    }

    for (i = 65; i < 91; i++) {
      tmp = {};
      tmp[String.fromCharCode(i)] = [];
      sortCitys.push(tmp);
    }

    for (k in citys) {
      index = k.charCodeAt() - 65;
      tmp = {};
      tmp[k] = citys[k];
      sortCitys[index] = tmp;
    }

    this.setData({
      cityData: sortCitys,
      isCityShow: ''
    });
  },

然后我們這里為組件綁定事件等就比較簡單了，大家可以自己看github，於是我們首頁的功能便完成了：

經過一個多星期的學習，我們慢慢的完成了我們的首頁，好像也就幾個元素，但是后面的一切卻不簡單啊，我們明天繼續完成list頁面邏輯，便開始總結小程序開發