小程序的模板化編程

筆記內(nèi)容：小程序的模板化編程
筆記日期：2018-01-08

將業(yè)務中的數(shù)據(jù)分離到單獨的數(shù)據(jù)文件中

之前編寫的新聞列表頁面中，我們把示例數(shù)據(jù)都放在了js文件中，但實際上數(shù)據(jù)是不應該寫在js文件中的，所以我們得把這些數(shù)據(jù)分離到一個單獨的數(shù)據(jù)文件中。然后post.js文件就加載這個數(shù)據(jù)文件中的數(shù)據(jù)即可，這樣也可以模擬一下加載服務器數(shù)據(jù)的過程。

1.新建一個data目錄，并在該目錄下創(chuàng)建一個.js文件：

2.將數(shù)據(jù)剪切到該新建的文件中：

// 將數(shù)據(jù)整合成數(shù)組類型
var local_database = [
  {
    date: "Jan 06 2018",
    title: "正是蝦肥蟹壯時",
    imgSrc: "/images/post/crab.png",
    avatar: "/images/avatar/1.png",
    content: "“山明水凈夜來霜，數(shù)樹深紅出淺黃。試上高樓清入骨，豈如春色嗾人狂?！苯鹎飼r節(jié)，天高云淡，秋風送爽，氣候宜人。秋風秋陽中，碩果墜掛枝頭，玉米撫須含笑，高粱引頸高歌，豆莢飽滿圓潤。",
    reading: "112",
    collection: "96",
  },
  {
    date: "Jan 03 2018",
    title: "比利·林恩的中場戰(zhàn)事",
    imgSrc: "/images/post/bl.png",
    avatar: "/images/avatar/2.png",
    content: "伊拉克戰(zhàn)爭時期，來自美國德州的19歲技術(shù)兵比利·林恩（喬·阿爾文 Joe Alwyn 飾）因為一段偶然拍攝的視頻而家喻戶曉。那是一次規(guī)模不大卻激烈非常的遭遇戰(zhàn)，戰(zhàn)斗中林恩所在的B班班長（范·迪塞爾 Vin Diesel 飾）遭到當?shù)匚溲b分子的伏擊和劫持，而林恩為了營救班長不惜鋌而走險沖鋒陷陣。",
    reading: "92",
    collection: "65",
  },
  {
    date: "Jan 05 2018",
    title: "肖申克的救贖",
    imgSrc: "/images/post/xs.jpg",
    avatar: "/images/avatar/3.png",
    content: "20世紀40年代末，小有成就的青年銀行家安迪（蒂姆·羅賓斯 Tim Robbins 飾）因涉嫌殺害妻子及她的情人而鋃鐺入獄。在這座名為肖申克的監(jiān)獄內(nèi)，希望似乎虛無縹緲，終身監(jiān)禁的懲罰無疑注定了安迪接下來灰暗絕望的人生。",
    reading: "92",
    collection: "65",
  },
  {
    date: "Jan 01 2018",
    title: "霸王別姬",
    imgSrc: "/images/post/bj.jpg",
    avatar: "/images/avatar/4.png",
    content: "段小樓（張豐毅）與程蝶衣（張國榮）是一對打小一起長大的師兄弟，兩人一個演生，一個飾旦，一向配合天衣無縫，尤其一出《霸王別姬》，更是譽滿京城，為此，兩人約定合演一輩子《霸王別姬》。但兩人對戲劇與人生關系的理解有本質(zhì)不同，段小樓深知戲非人生，程蝶衣則是人戲不分。",
    reading: "92",
    collection: "65",
  },
  {
    date: "Jan 08 2018",
    title: "這個殺手不太冷",
    imgSrc: "/images/post/ss.jpg",
    avatar: "/images/avatar/5.png",
    content: "里昂（讓·雷諾飾）是名孤獨的×××，受人雇傭。一天，鄰居家小姑娘馬蒂爾達（納塔麗·波特曼飾)敲開他的房門，要求在他那里暫避殺身之禍。原來鄰居家的主人是警方緝毒組的眼線，只因貪污了一小包×××而遭惡警（加里·奧德曼飾）殺害全家的懲罰。",
    reading: "92",
    collection: "65",
  },
  {
    date: "Jan 04 2018",
    title: "阿甘正傳",
    imgSrc: "/images/post/ag.jpg",
    avatar: "/images/avatar/1.png",
    content: "阿甘（湯姆·漢克斯 飾）于二戰(zhàn)結(jié)束后不久出生在美國南方阿拉巴馬州一個閉塞的小鎮(zhèn)，他先天弱智，智商只有75，然而他的媽媽是一個性格堅強的女性，她常常鼓勵阿甘“傻人有傻?！?，要他自強不息。",
    reading: "92",
    collection: "65",
  },
]

這個文件實際上充當了一個本地數(shù)據(jù)庫，到時候腳本文件從這個文件中加載數(shù)據(jù)即可。注意：我把一些屬性名稱更改了，wxml文件中的名稱也要跟著更改。

使用require方法加載js模塊文件

1.在數(shù)據(jù)文件中增加以下代碼，設置一個數(shù)據(jù)出口：

// 設置一個數(shù)據(jù)出口，當前這個文件相當于是一個js模塊
module.exports = {
  // 輸出的是一個Array對象
  postList: local_database,
}

2.然后在腳本文件中通過require方法加載js模塊文件：

// 注意：這里只能使用相對路徑
var postsData = require('../../data/posts-data.js')

Page({
  data: {
  },

  onLoad: function (options) {
    this.setData({
      // 通過postsData來拿到postList對象
      posts_key: postsData.postList
    });
  },
})

以上就完成了數(shù)據(jù)與邏輯的分離，在我們平時開發(fā)中，應盡量避免這種數(shù)據(jù)與邏輯或者邏輯與視圖代碼混雜在一塊的情況。

關于setData方法的一些問題：
1.直接修改 this.data 而不調(diào)用 this.setData 是無法改變頁面的狀態(tài)的，還會造成數(shù)據(jù)不一致。
2.單次設置的數(shù)據(jù)不能超過1024kB，請盡量避免一次設置過多的數(shù)據(jù)。
3.請不要把 data 中任何一項的 value 設為 undefined ，否則這一項將不被設置并可能遺留一些潛在問題。

template模板的使用

之前我們使用for循環(huán)改寫了新聞列表頁面，解決了重復代碼的問題，但是使用for循環(huán)只能解決當前頁面代碼重復的問題，如果別的頁面也要使用相同的代碼的話，就無法使用for循環(huán)來解決了。不過小程序給我們提供了一個template模板，使用template模板就能解決這種問題。因為template可以讓多個頁面共享一個模板文件中的代碼，如果熟悉23種設計模式的話，就應該知道這種模式類似于模板設計模式。

1.在posts目錄下創(chuàng)建一個目錄，并在該目錄下創(chuàng)建一個wxml和wxss文件：

注：js文件無法作為模板文件，即便創(chuàng)建了也不會運行，因為小程序沒有模塊化的編程，只有模板化的編程

2.將post.wxml中需要被復用的代碼剪切到post-item-template.wxml模板文件中：

<!-- 模板文件需要使用template標簽包圍 -->
<template name="postItem">
  <view class='post-container'>
      <view class='post-author-date'>
        <image src='{{item.avatar}}' class='post-author'></image>
        <text class="post-date">{{item.date}}</text>
      </view>
      <text class='post-title'>{{item.title}}</text>
      <image class='post-image' src='{{item.imgSrc}}'></image>
      <text class='post-content'>{{item.content}}</text>
      <view class='post-like'>
        <image src='../../images/icon/chat.png' class='post-like-img'></image>
        <text class='post-like-font'>{{item.reading}}</text>
        <image src='../../images/icon/view.png' class='post-like-img'></image>
        <text class='post-like-font'>{{item.collection}}</text>
      </view>
    </view>
</template>

3.接著在post.wxml中引入模板文件，代碼如下：

<!-- 通過import標簽引入模板文件，可以使用相對路徑也可以使用絕對路徑 -->
<import src="post-item/post-item-template.wxml" />
<view>
  <!-- 需要在父節(jié)點里定義寬高，indicator-dots屬性指定顯示輪播圖的小點，縱向滾動則使用vertical屬性 -->
  <swiper indicator-dots='true' autoplay='true' interval='5000'>
    <!-- 每一項里都放了一個圖片 -->
    <swiper-item>
      <!-- 使用絕對對路徑 -->
      <image src='/images/wx.png'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/vr.png'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/iqiyi.png'></image>
    </swiper-item>
  </swiper>

  <!-- wx:for需要接收一個數(shù)組、集合類型的值，wx:for-item用于設置一個變量來代表子元素 -->
  <!-- wx:for-index用于設置一個變量來代表下標值 -->
  <block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="index" >
    <!-- is的值是模板文件中定義的模板名稱，data是將循環(huán)出來的子元素對象傳遞到模板文件中 -->
    <template is="postItem" data="{{item}}" />
  </block>
</view>

4.以上完成了wxml代碼的模板，現(xiàn)在還需要把一些可復用的wxss代碼也做成模板，首先剪切post.wxss樣式文件中的代碼到模板文件中：
post-item-template.wxss文件內(nèi)容如下：

.post-author-date{
  margin: 10rpx 0px 20rpx 10rpx ;
}
.post-author{
  width: 30px;
  height: 60rpx;
  vertical-align: middle;
}
.post-date{
  margin-left: 20rpx;
  vertical-align: middle;
  margin-bottom: 5px;
  font-size: 26rpx;
}
.post-title{
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  margin-left: 10px;
}
.post-image{
  margin-left: 16px;
  width: 100%;
  height: 340rpx;
  margin: auto 0;
}
.post-content{
  color: #666;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  letter-spacing: 2rpx;
  line-height: 40rpx;
  margin-top: 15px;
}
.post-like{
  font-size: 13px;
  flex-direction: row;
  line-height: 16px;
  margin-left: 10px;
}
.post-like-img{
  height: 16px;
  width: 16px;
  margin-right: 8px;
  vertical-align: middle;
}
.post-like-font{
  vertical-align: middle;
  margin-right: 20px;
}

5.然后在post.wxss文件里引用模板樣式：

<!-- 使用@import來引用模板樣式 -->
@import "post-item/post-item-template.wxss";

swiper{
  width:100%;
  height:600rpx
}

swiper image{
  width:100%;
  height:600rpx
}
.post-container{
  display: flex;
  flex-direction: column;
  margin-top:20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  padding-bottom: 5px;
}

完成以上操作后，我們就構(gòu)建了兩個模板——wxml模板以及wxss模板，在這之后哪個頁面文件需要復用這些樣式或wxml代碼就只需引入相應的模板即可。通過這種模板化的編程就很好的提高了代碼的復用性，可惜小程序不支持模塊化，不然就可以把一些可復用的js代碼做成模板，這樣就可以再進一步的進行代碼的復用了。