摘要：官網(wǎng)訪問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程出品全網(wǎng)最新微信小程序基于最新版開(kāi)發(fā)者工具之初中級(jí)培訓(xùn)教程分享。

iKcamp官網(wǎng)：http://www.ikcamp.com
訪問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程：《iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開(kāi)發(fā)者工具之初中級(jí)培訓(xùn)教程分享》。
包含：文章、視頻、源代碼

這一章節(jié)中，我們嘗試著寫(xiě)一個(gè)最簡(jiǎn)單的例子，包含 2 個(gè)靜態(tài)頁(yè)面，并增加菜單導(dǎo)航功能。小體驗(yàn)一把。

清理后如下結(jié)構(gòu)，只保留了兩個(gè) 必備 文件，同時(shí)做如下修改：

├── app.js
├── app.json

//app.js
App({
  onLaunch: function () {

  }
})

{
  "pages":[
  ],
  "window":{
    "navigationBarBackgroundColor": "#09ba07",
    "navigationBarTextStyle": "#fff",
    "navigationBarTitleText": "牛刀小試",
    "backgroundColor": "#fbf9fe",
    "backgroundTextStyle": "light"
  }
}

修改后，看下控制臺(tái)有報(bào)錯(cuò)信息，因?yàn)槲覀儼秧?yè)面全都干掉了。

從報(bào)錯(cuò)信息來(lái)看，很明顯，小程序默認(rèn)會(huì)從 pages 字段中讀取第一個(gè)地址，作為首頁(yè)加載 -- 知識(shí)點(diǎn)。

ok，現(xiàn)在開(kāi)始添加我們的第一個(gè)頁(yè)面，給它起個(gè)名字叫 flex 吧，防止大家 誤以為名字叫 index 的才是默認(rèn)打開(kāi)的頁(yè)面 :)

增加 flex 頁(yè)面文件

├─ mypages/
│   ├─ flex/
│       ├─ flex.js        // 空文件
│       ├─ flex.wxml      // 空文件
│       ├─ flex.wxss      // 空文件
├── app.js
├── app.json

在 app.json 中增加 flex 頁(yè)面的配置地址

"pages":[
  "mypages/flex/flex"  
]

想要 flex 頁(yè)面生效，需要在 flex.js 中調(diào)用全局函數(shù)：

// flex.js
Page({

})

Page() 函數(shù)接受一個(gè) object 參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
這時(shí)候再看下顯示效果，已經(jīng)沒(méi)有報(bào)錯(cuò)信息了。

現(xiàn)在我們來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 flex 布局效果，就像微信官方平臺(tái)展示的那個(gè)樣子：

首先，在 flex.wxml 文件中增加布局標(biāo)簽：

  flex-direction: row
  
    1
    2
    3
  


  flex-direction: column
  
    1
    2
    3
  

然后在 flex.wxss 中，增加各 class 的樣式：

.section__title{
  padding: 40rpx;
}
.flex-wrp{
  display: flex;
  flex-direction: row;
}
.flex-row{
  flex-direction: row;
}
.flex-col{
  flex-direction: column;
}
.flex-item{
  color: #fff;
  width: 200rpx;
  height: 200rpx;
  text-align: center;
  line-height: 200rpx;
}
.bc_green{
  background-color: #09ba07;
}
.bc_red{
  background-color: #f76160;
}
.bc_blue{
  background-color: #0faeff;
}

這里主要的東西就是關(guān)于 flex 的簡(jiǎn)單布局，想了解更多關(guān)于 flex 的同學(xué)，可以查閱下 flex 布局教程

一般情況下，不同的頁(yè)面，都應(yīng)該有一個(gè)獨(dú)特的 title，這就需要我們就給 flex 添加一個(gè)獨(dú)立的配置文件 flex.json：

{
  "navigationBarTitleText": "Flex-布局"
}

注意，與最外層的 app.json 不同的地方是，flex.json 是對(duì)全局配置 app.json 的補(bǔ)充，且只能覆蓋 app.json 的 window 字段配置信息

list 頁(yè)面，多少會(huì)比 flex 要復(fù)雜些。

剛進(jìn)入到頁(yè)面時(shí)候，顯示沒(méi)有數(shù)據(jù)的提示信息。隨著用戶往下滑動(dòng)，我們需要?jiǎng)討B(tài)的增加數(shù)據(jù)，每下滑一次，增加 3 條數(shù)據(jù)吧，最多 30 條數(shù)據(jù)。
同樣的，先增加需要的文件：

├─ mypages/
│   ├─ flex/
│       ├─ flex.js
│       ├─ flex.wxml
│       ├─ flex.wxss
│       ├─ flex.json
│   ├─ list/
│       ├─ list.js
│       ├─ list.wxml
│       ├─ list.wxss
├── app.js
├── app.json

同時(shí)，我們對(duì)小程序增加一個(gè) 底部導(dǎo)航菜單，方便測(cè)試我們的頁(yè)面切換。
修改 app.json 文件：

{
  "pages":[
    "mypages/flex/flex",
    "mypages/list/list"
  ],
  "window": {
    "navigationBarBackgroundColor": "#09ba07",
    "navigationBarTextStyle": "#fff",
    "navigationBarTitleText": "牛刀小試",
    "backgroundColor": "#fbf9fe",
    "backgroundTextStyle": "light"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#2EBF76",
    "borderStyle": "white",
    "backgroundColor": "#f6f8f9",
    "position": "bottom",
    "list": [{
      "pagePath": "mypages/flex/flex",
      "text": "布局"
    }, {
      "pagePath": "mypages/list/list",
      "text": "列表"
    }]
  }
}

我們先來(lái)實(shí)現(xiàn) js 部分的邏輯，由于需要把數(shù)據(jù)顯示在視圖 wxml 中，我們需要增加 data 字段 ：

Page({
  data: {
    arrList: []
  }
})

這里說(shuō)明下，wxml 中的動(dòng)態(tài)數(shù)據(jù)均來(lái)自對(duì)應(yīng) Page 的 data。當(dāng) data 中的數(shù)據(jù)通過(guò) this.setData 發(fā)生變化時(shí)候，視圖會(huì)隨之更新變化。

因?yàn)槲覀兪窃谟脩粝禄瑫r(shí)候更新數(shù)據(jù)，這里我們調(diào)用下 onReachBottom 函數(shù)（當(dāng)?shù)竭_(dá)頁(yè)面底部時(shí)候觸發(fā)）：

Page({
  data: {
    arrList: []
  },
  //微信官方提供的事件處理函數(shù)，當(dāng)頁(yè)面上拉觸底時(shí)候自動(dòng)調(diào)用該函數(shù)
  onReachBottom(){
    console.log("到達(dá)頁(yè)面底部運(yùn)行此函數(shù)")
  }
})

然后我們開(kāi)始增加數(shù)據(jù)的業(yè)務(wù)邏輯：

Page({
  data: {
    arrList: []
  },
  onReachBottom(){
    console.log("到達(dá)頁(yè)面底部運(yùn)行此函數(shù)")
    this.updateArrList();
  },
  updateArrList(){
    let arr = this.data.arrList
    arr.push( ...this.createData() )
    this.setData({
      arrList: arr
    })
  },
  createData(){
    let length = this.data.arrList.length
    if(length >= 30 ) return [];
    return Array.from({length: 3},(v, i)=>`數(shù)據(jù)${1+i+length}`)
  }
})

當(dāng)頁(yè)面到達(dá)底部，會(huì)調(diào)用 onReachBottom 函數(shù)，在 onReachBottom 的最后，我們 尾調(diào)用 自定義的函數(shù) updateArrList 來(lái)更新數(shù)據(jù)。
createData 函數(shù)的作用只是單純的返回包含 3 個(gè)元素的數(shù)組，最后拼接后的新數(shù)據(jù)，會(huì)通過(guò) setData 更新數(shù)據(jù) arrList，當(dāng)數(shù)據(jù)更新后，視圖會(huì)自動(dòng)更新。

接下來(lái)，我們修改視圖文件 list.wxml：

  
    
      {{item}}
    
  
  
    
      下拉加載數(shù)據(jù)
    
  

block 標(biāo)簽并不屬于組件，不會(huì)在頁(yè)面中渲染，僅作接收控制屬性用
for 循環(huán)指令包裹的范圍內(nèi)，子元素默認(rèn)是 item，如果想重新定義它的名字，可以在 wx:for="{{arrList}}" 后面增加 wx:for-item="item"，同樣的，也可以指定數(shù)組下標(biāo) wx:for-index="index"

我們對(duì)頁(yè)面樣式做簡(jiǎn)單的優(yōu)化，由于當(dāng)頁(yè)面高度不夠時(shí)候，難以操作觸發(fā) onReachBottom，故我們給當(dāng)前的頁(yè)面外層標(biāo)簽 page 加一個(gè) 150% 高度：

page{
  height: 150%;
}
.item{
  background-color:#f6f8f9;
  color:#9a9a9a;
  font-size:14px;
  padding: 10px 20px;
  margin-bottom:15px;
}

同樣的，我們也給 list 頁(yè)面加一個(gè) title，增加 list.json 文件：

{
  "navigationBarTitleText": "展示數(shù)據(jù)"
}

大功告成！??！預(yù)覽下小 demo 效果

如果之前有 appID，也可以在手機(jī)端預(yù)覽

官方文檔比較詳細(xì)了點(diǎn)擊查看

上一篇－iKcamp出品｜微信小程序｜工具安裝+目錄說(shuō)明｜基于最新版1.0開(kāi)發(fā)者工具初中級(jí)教程分享
下期更新內(nèi)容：小程序初級(jí)入門教程－第二章：小程序中級(jí)實(shí)戰(zhàn)教程：預(yù)備篇

iKcamp原創(chuàng)新書(shū)《移動(dòng)Web前端高效開(kāi)發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開(kāi)售。

相關(guān)文章：
聽(tīng)說(shuō) 2017 你想寫(xiě)前端？
前端開(kāi)發(fā)者指南（2017）
翻譯連載 |《你不知道的JS》姊妹篇 | JavaScript 輕量級(jí)函數(shù)式編程
翻譯 | 關(guān)鍵CSS和Webpack: 減少阻塞渲染的CSS的自動(dòng)化解決方案

報(bào)名地址：http://www.huodongxing.com/ev...