前言

上周微信小程序公測了，允許開發(fā)者將應(yīng)用提交到微信公眾平臺審核，但暫時(shí)還不能發(fā)布。
微信小程序是不用下載即能使用的應(yīng)用，它相比原生app更新實(shí)時(shí)、跨平臺、開發(fā)成本低、使用門檻低，一經(jīng)宣布，便受到業(yè)內(nèi)的強(qiáng)烈關(guān)注。最近動手嘗試了下微信小程序。
這篇文章將繼續(xù)以iOS開發(fā)的視角介紹微信小程序的開發(fā)心得。

項(xiàng)目結(jié)構(gòu)

首先介紹一下小程序的結(jié)構(gòu)目錄：

按官方文檔的說明，app.js用于處理小程序邏輯，用于監(jiān)聽小程序的生命周期、聲明全局變量。app.wxss用于管理小程序公共樣式，app.json文件用來對微信小程序進(jìn)行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。在iOS中，相當(dāng)于AppDelegate類。
如下所示，pages設(shè)置頁面路徑，window設(shè)置默認(rèn)頁面的窗口表現(xiàn)，tabbar設(shè)置底部 tab 的表現(xiàn)，networkTimeout設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間，debug設(shè)置是否開啟 debug 模式。

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

每個(gè)頁面又是由.js、.wxml、.wxss、.json文件構(gòu)成，.js是頁面邏輯，.wxml處理頁面結(jié)構(gòu)，.wxss處理頁面樣式，.json處理頁面配置。

生命周期

小程序的生命周期如下圖

在iOS中，onLaunch方法類似于application:didFinishLaunchingWithOptions:，onHide類似于applicationDidEnterBackground:，onShow類似于applicationWillEnterForeground:
頁面的生命周期如下

onLoad相當(dāng)于loadView，onReady相當(dāng)于viewDidLoad，onShow相當(dāng)于viewDidApear:，onUnload相當(dāng)于viewDidDisappear:。與iOS不同的是，小程序先調(diào)用onShow方法再調(diào)用onReady，onHide表示頁面隱藏，當(dāng)navigateTo或底部tab切換時(shí)調(diào)用。

頁面跳轉(zhuǎn)

小程序的頁面中轉(zhuǎn)比較簡單，主要有三個(gè)方法：
wx.navigateTo(OBJECT)：保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，使用wx.navigateBack可以返回到原頁面。相當(dāng)于iOS中的push跳轉(zhuǎn)。
wx.redirectTo(OBJECT)：關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。
wx.navigateBack()：關(guān)閉當(dāng)前頁面，回退前一頁面。相當(dāng)于iOS中的pop返回。

數(shù)據(jù)綁定

小程序有一套UI與數(shù)據(jù)的綁定機(jī)制，有點(diǎn)類似MVVM模式，它是單向綁定的，只能從Data更新到View，而且要手動調(diào)用setData方法才能更新view。
語法類似這樣，在.wxml文件中用雙大括號將變量包起來，在.js文件中修改數(shù)據(jù)，調(diào)用setData方法，UI根據(jù)這個(gè)數(shù)據(jù)的最新結(jié)果刷新。

//page.wxml
<view> {{ message }} </view>

//page.js
Page({
  data: {
    message: ''
  },
  onLoad: function(options) {
    this.setData({
      message:'Hello world' 
    })
  }
})

小程序的數(shù)據(jù)綁定還支持表達(dá)式，如條件表達(dá)式、算術(shù)表達(dá)式、字符串表達(dá)式、三元表達(dá)式。

//用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：
<view wx:if="{{condition}}"> True </view>

//wx:for控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

豆瓣科幻小說demo

接下來我們一起寫一個(gè)小程序demo。效果如下：

demo搭建與配置

首先創(chuàng)建項(xiàng)目，設(shè)置項(xiàng)目名稱，選擇項(xiàng)目位置，這里選擇了無Appid

創(chuàng)建兩個(gè)頁面，一個(gè)主頁index和一個(gè)詳情頁book

在app.json文件中對app進(jìn)行配置，在pages屬性中，添加文件路徑，路徑是相對位置。在window屬性中，設(shè)置窗體的顏色、標(biāo)題等。

{
  "pages":[
    "pages/index/index",
    "pages/book/book"
  ],
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "豆瓣科幻小說",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  },
  "tabBar": {
    "color":"#030303",
    "selectedColor":"#111",
    "backgroundColor":"#fff",
    "borderStyle":"black",
    "list":[{"pagePath":"pages/index/index",
    "text":"首頁"},
    {"pagePath":"pages/index/me",
    "text":"我"}]
  },
  "networkTimeout":{
    "request":10000,
    "downloadFile":10000
  },
  "debug":true
}

我們從豆瓣api中獲取科幻小說列表數(shù)據(jù)，不像iOS取數(shù)據(jù)那么麻煩，小程序提供了簡單的api進(jìn)行網(wǎng)絡(luò)通信，而且也不用建立model，取到的數(shù)據(jù)直接使用。看首頁代碼，data內(nèi)的幾個(gè)鍵值對相當(dāng)于變量初始化，如books表示存放書籍的數(shù)組，當(dāng)onLoad頁面加載完成后向網(wǎng)絡(luò)請求數(shù)據(jù)，這里獲取科幻小說列表，拿到數(shù)據(jù)后調(diào)用setData更新當(dāng)前頁面。

var app = getApp()
var API_URL = "https://api.douban.com/v2/book/search"
Page({
  data: {
    size: 100,
    title: "數(shù)據(jù)加載中...",
    books: [],
    loading: true
  },

  onLoad: function() {
    var _this = this
    console.log(_this.data)

    var params = {
      tag: "科幻",
      start: 0,
      count: _this.data.size
    }

    wx.request({
      url: API_URL,
      data: params,
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
            header: {"Content-Type":"application/json"},
      success: function(res){
        // success
        _this.setData({
         books: res.data.books,
         loading: false
        })
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },

})

在index.wxml中，放置加載動畫loading和滾動組件scroll-view，加載動畫綁定了loading屬性，決定是否顯示或隱藏。navigator表示點(diǎn)擊即重定向到書籍詳情頁，相當(dāng)于push到詳情頁。\<view class="item"\>相當(dāng)于cell，cell內(nèi)的每個(gè)控件都綁定book，當(dāng)books更新時(shí)，刷新UI。

<loading hidden="{{!loading}}">
    {{title}}
</loading>

<scroll-view scroll-y="true" class="page-body" >
    <navigator url="../book/book?id={{item.id}}" wx:for="{{books}}">
        <view class="item">
            <image class="poster" src="{{item.images.small}}"></image>
            <view class="meta">
                <text class="title">{{item.title}}</text>
                <view class="author">
                    <text wx:for="{{item.author}}">{{item}}</text>
                </view>
                <text class="subtitle">{{item.publisher}} / {{item.pubdate}}</text>
            </view>
            <view class="rating">
                <text>{{item.rating.average}}</text>
            </view>
        </view>
    </navigator>

</scroll-view>

index.wxss是樣式表文件，控制首頁的布局和樣式。css布局不熟悉，跟iOS差別還是比較大的，需要多寫一些。

page {
  font-family: -apple-system-font, 'Helvetica Neue', Helvetica, 'Microsoft YaHei', sans-serif;
  font-family:;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  justify-content: center;
  border-bottom: 1rpx solid #ccc;
}

.page-header-text {
  padding: 20rpx 40rpx;
  color: #999;
  font-size: 38rpx;
  text-align: center;
}

.page-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
}

.item {
  display: flex;
  padding: 20rpx 40rpx;
  border-bottom: 1rpx solid #eee;
  cursor: pointer;
}

.item .poster {
  width: 128rpx;
  height: 128rpx;
  margin-right: 20rpx;
}

.item .meta {
  flex: 1;
}

.item .meta .title,
.item .meta .sub-title {
  display: block;
  margin-bottom: 15rpx;
}

.item .meta .title {
  font-size: 32rpx;
}

.item .meta .sub-title {
  font-size: 22rpx;
  color: #c0c0c0;
}

.item .meta .subtitle {
  font-size: 26rpx;
  color: #999;
}

.item .meta .author {
  font-size: 26rpx;
  color: #999;
}

.item .rating {
  font-size: 28rpx;
  font-weight: bold;
  color: #f74c31;
}

.tips {
  font-size: 28rpx;
  text-align: center;
  padding: 50rpx;
  color: #ccc;
}

.tips image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.tips image,
.tips text {
  vertical-align: middle;
}

書籍詳情頁跟列表頁比較類似，也更簡單，就不貼代碼了，具體看demo，demo已上傳github：https://github.com/superzcj/DouBanNovelDemo

總結(jié)

在iOS開發(fā)中，MVVM其實(shí)很少用的，不過寫了這個(gè)小程序demo，發(fā)現(xiàn)MVVM還是挺棒的，代碼寫的更簡潔、優(yōu)雅。小程序比較輕量，相對iOS開發(fā)還是挺簡單的，很多功能都被封裝，比如tabbar的配置、網(wǎng)絡(luò)api的使用以及json的直接使用，這樣開發(fā)就更簡單，更容易快速出產(chǎn)品。
作為一個(gè)iOS開發(fā)，對前端開發(fā)不熟悉，文章中難免有錯(cuò)誤有不足，希望大家多多指正。
如果覺得我的這篇文章對你有幫助，請?jiān)谙路近c(diǎn)個(gè)贊支持一下，謝謝!