微信小程序內(nei) 測至今也有20天左右，也有很多人作出了很多不錯的DEMO並發布到github了。前幾日看見了豆瓣電影這個(ge) demo，感覺很不錯，也跟著做了一個(ge) ，作為(wei) 複習(xi) 鞏固文檔API用。

廢話不多說，直接進入正題：

第一節隻寫(xie) 一個(ge) 首頁的展示，數據用的是自己寫(xie) 的虛擬的數據

新建一個(ge) demo，不要使用微信自帶的DEMO，直接從(cong) 零開始寫(xie) 起：

首先創建3個(ge) 文件：

app.json

app.js

apps.wxss

app.json  : 主要寫(xie) 配置項：內(nei) 容如下，具體(ti) 的每個(ge) key值對應的意思，這裏就不再細說了，可以看我之前的配置指南，

{

"pages":[
"pages/index/index",
"pages/rank/rank",
],
"window":{
"enablePullDownRefresh":true,

"backgroundColor":"#eee",

"navigationBarTitleText": "上導航標題文字",

"navigationBarTextStyle":"white" 
},

"tabBar": {
"color": "#d7ced5",

"selectedColor": "#535f71",

"borderStyle": "white", 
"backgroundColor": "#f9f9f9",

"list": [ 
{
"pagePath": "pages/index/index", 
"text": "推薦電影", 
"iconPath": "images/board.png", 
"selectedIconPath": "images/board-actived.png" 
},

{
"pagePath": "pages/rank/rank",
"text": "北美票房",
"iconPath": "images/note.png",
"selectedIconPath": "images/note-actived.png"
}
]
},

"networkTimeout": {
"request": 10000,
"downloadFile": 9000,
"uploadFile":8000,
"connectSocket":7000
},

"debug": true
}

app.js  :  主要用來注冊(ce) 一個(ge) 小程序的實例

App({
onLaunch: function () {

},
onShow: function () {

},
onHide: function () {

},
globalData: 'I am global data'
});

app.wxss : 公用樣式，基本等同於(yu) CSS，暫時不需要寫(xie) 內(nei) 容。

創建好3個(ge) 文件後，就可以開始寫(xie) 頁麵的內(nei) 容了：

新創建2個(ge) 文件夾images和pages，一個(ge) 放圖片一，個(ge) 放頁麵。

目前隻pages下麵再創建2個(ge) 文件夾index和rank，每個(ge) 文件下分別創建json,js,wxml,wxss文件，此時目錄如下：

雖然不一定4個(ge) 文件類型都需要用到，但為(wei) 了之後方便，建議還是先創建好，需要用到的時候就比較方便了，不用再去創建。

首先寫(xie) index.js:   (為(wei) 了模擬循環數組，data下麵的moivelist還需要多複製幾份，這裏隻寫(xie) 了一份出來，imgsrc路徑要寫(xie) 好)

Page({
    data:{
    moivelist:[{
    imgsrc: "../../images/AN2.jpg",
    title: "肖申克的救贖",
    introduce: "The shrakwos RedenpeTion(1994)",
    author: "弗蘭(lan) 克*德拉立邦",
    rank: "9.6"
}
]

}

,

onLoad: function(options) {
console.log(1);
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
}
})

這裏出現了很多on函數事件，對應頁麵的生命周期每個(ge) 過程對應的事件，這裏暫時先關(guan) 注data對象

小程序是以數據驅動的，頁麵進來的時候通過動態獲取數據，通過{{xxx}}將數據綁定，並將數據渲染到視圖層，這裏先以一個(ge) 虛擬的data數據模擬

然後寫(xie) index.wxml文件：

從(cong) 上麵顯示的首頁的圖片來看，主要是1個(ge) 標題，以及下麵一個(ge) 列表，列表用過循環來渲染出所有的數據

標題:  標題比較簡單，主要是寫(xie) css

<view class="head-title">
<text>豆瓣電影top250</text>
</view>

這裏主要講下麵的列表循環，可以發現我們(men) 隻要寫(xie) 好列表中的第一個(ge) 就可以了，其他的通過循環來展示

列表主要分為(wei) 左中右三塊，分別為(wei) 圖片，內(nei) 容，以及評分3塊

<block wx:for="{{moivelist}}">  //循環渲染，wx:for="{{ xxx }}" 代表循環js文件裏麵的data數據中的xxx

<view>

//微信循環時會(hui) 給出每個(ge) 項目的內(nei) 容以及每個(ge) 項目的下標，默認為(wei) item和index，item.imgsrc意為(wei) 對象的（imgsrc）  key值

圖片：

<image class="moive-img" style="" mode="" src="{{item.imgsrc}}" binderror="" bindload=""></image>

內(nei) 容：

<view class="moive-content">
     <view class="content-titile">
        <text >{{item.title}}</text>
    </view>

    <view class="content-introduce"> 
        <text >{{item.introduce}}</text>
    </view>

    <view class="content-author">
        < text >{{item.author}}</text>
    </view>
</view>

評分：

<text class="content-rank">{{item.rank}}</text>

</view>

</block>

基本都這裏wxml就結束了，樣式主要通過wxss來操作，樣式比較簡單，就不寫(xie) 了，主要講一下左中右這三塊

通過將左中右這三塊的父級設置為(wei) display:flex;

左邊和右邊都設置為(wei) 固定rpx，中間設置為(wei) flex:1。

這樣寫(xie) 代表中間這一塊的內(nei) 容占滿：左邊和右邊布局後生下來的空間 ，即左右布局好後，剩多少，flex：1就等於(yu) 多少。

第一節項目代碼見：demo1

https://github.com/linrunzheng/wx-samll-demo