iKcamp出品｜微信小程序｜小試牛刀(視頻)+發佈流程｜基於最新版1.0開發者工具初中級教程分享

iKcamp官網：http://www.ikcamp.com

訪問官網更快閱讀所有免費分享課程：《iKcamp出品｜全網最新｜微信小程序｜基於最新版1.0開發者工具之初中級培訓教程分享》。
包含：文章、視頻、源代碼

第一章：小程序初級入門教程

小試牛刀【含視頻】

視頻地址：https://v.qq.com/x/page/i0554akzobq.html

這一章節中，咱們嘗試着寫一個最簡單的例子，包含 2 個靜態頁面，並增長菜單導航功能。小體驗一把。

Step 1. 清理結構

清理後以下結構，只保留了兩個 必備 文件，同時作以下修改：

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

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

  }
})

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

修改後，看下控制檯有報錯信息，由於咱們把頁面全都幹掉了。

從報錯信息來看，很明顯，小程序默認會從 pages 字段中讀取第一個地址，做爲首頁加載 -- 知識點。

Step 2. 增長 flex 頁面

ok，如今開始添加咱們的第一個頁面，給它起個名字叫 flex 吧，防止你們 誤覺得名字叫 index 的纔是默認打開的頁面 :)

增長 flex 頁面文件

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

在 app.json 中增長 flex 頁面的配置地址

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

想要 flex 頁面生效，須要在 flex.js 中調用全局函數：

// flex.js
Page({

})

Page() 函數接受一個 object 參數，其指定頁面的初始數據、生命週期函數、事件處理函數等。
這時候再看下顯示效果，已經沒有報錯信息了。
<div align="right">譁--!整個世界清淨了 —— 《大話西遊》</div>

Step 3. 書寫簡單的 flex 佈局頁面

如今咱們來實現一個簡單的 flex 佈局效果，就像微信官方平臺展現的那個樣子：

首先，在 flex.wxml 文件中增長佈局標籤：

<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp flex-row">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp flex-col">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

而後在 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;
}

這裏主要的東西就是關於 flex 的簡單佈局，想了解更多關於 flex 的同窗，能夠查閱下 flex 佈局教程

通常狀況下，不一樣的頁面，都應該有一個獨特的 title，這就須要咱們就給 flex 添加一個獨立的配置文件 flex.json：

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

注意，與最外層的 app.json 不一樣的地方是，flex.json 是對全局配置 app.json 的補充，且只能覆蓋 app.json 的 window 字段配置信息

Step 4. 增長 list 頁面

list 頁面，多少會比 flex 要複雜些。

剛進入到頁面時候，顯示沒有數據的提示信息。隨着用戶往下滑動，咱們須要動態的增長數據，每下滑一次，增長 3 條數據吧，最多 30 條數據。
一樣的，先增長鬚要的文件：

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

同時，咱們對小程序增長一個 底部導航菜單，方便測試咱們的頁面切換。
修改 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": "列表"
    }]
  }
}

咱們先來實現 js 部分的邏輯，因爲須要把數據顯示在視圖 wxml 中，咱們須要增長 data 字段 ：

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

這裏說明下，wxml 中的動態數據均來自對應 Page 的 data。當 data 中的數據經過 this.setData 發生變化時候，視圖會隨之更新變化。

由於咱們是在用戶下滑時候更新數據，這裏咱們調用下 onReachBottom 函數（當到達頁面底部時候觸發）：

Page({
  data: {
    arrList: []
  },
  //微信官方提供的事件處理函數，當頁面上拉觸底時候自動調用該函數
  onReachBottom(){
    console.log('到達頁面底部運行此函數')
  }
})

而後咱們開始增長數據的業務邏輯：

Page({
  data: {
    arrList: []
  },
  onReachBottom(){
    console.log('到達頁面底部運行此函數')
    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)=>`數據${1+i+length}`)
  }
})

當頁面到達底部，會調用 onReachBottom 函數，在 onReachBottom 的最後，咱們 尾調用 自定義的函數 updateArrList 來更新數據。
createData 函數的做用只是單純的返回包含 3 個元素的數組，最後拼接後的新數據，會經過 setData 更新數據 arrList，當數據更新後，視圖會自動更新。

接下來，咱們修改視圖文件 list.wxml：

<view class="container">
  <block wx:for="{{arrList}}" wx:key="">
    <view class="item">
      <text>{{item}}</text>
    </view>
  </block>
  <block wx:if="{{arrList.length==0}}">
    <view class="item">
      <text>下拉加載數據</text>
    </view>
  </block>
</view>

block 標籤並不屬於組件，不會在頁面中渲染，僅做接收控制屬性用
for 循環指令包裹的範圍內，子元素默認是 item，若是想從新定義它的名字，能夠在 wx:for="{{arrList}}" 後面增長 wx:for-item="item"，一樣的，也能夠指定數組下標 wx:for-index="index"

咱們對頁面樣式作簡單的優化，因爲當頁面高度不夠時候，難以操做觸發 onReachBottom，故咱們給當前的頁面外層標籤 page 加一個 150% 高度：

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

一樣的，咱們也給 list 頁面加一個 title，增長 list.json 文件：

{
  "navigationBarTitleText": "展現數據"
}

大功告成！！！預覽下小 demo 效果

若是以前有 appID，也能夠在手機端預覽

小程序：審覈發佈流程

官方文檔比較詳細了點擊查看

上一篇－iKcamp出品｜微信小程序｜工具安裝+目錄說明｜基於最新版1.0開發者工具初中級教程分享

下期更新內容：小程序初級入門教程－第二章：小程序中級實戰教程：預備篇

iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、噹噹開售。

---

相關文章：
據說 2017 你想寫前端？
前端開發者指南（2017）
翻譯連載 |《你不知道的JS》姊妹篇 | JavaScript 輕量級函數式編程
翻譯 | 關鍵CSS和Webpack: 減小阻塞渲染的CSS的自動化解決方案

iKcamp最新活動

報名地址：http://www.huodongxing.com/ev...