iKcamp官網：www.ikcamp.com
訪問官網更快閱讀全部免費分享課程：《iKcamp出品｜全網最新｜微信小程式｜基於最新版1.0開發者工具之初中級培訓教程分享》。 包含：文章、視訊、原始碼
第一章：小程式初級入門教程
小試牛刀【含視訊】
視訊地址：v.qq.com/x/page/i055…
這一章節中，我們嘗試著寫一個最簡單的例子，包含 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 引數，其指定頁面的初始資料、生命週期函式、事件處理函式等。
這時候再看下顯示效果，已經沒有報錯資訊了。
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原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、噹噹開售。
相關文章： 聽說 2017 你想寫前端？ 前端開發者指南（2017） 翻譯連載 |《你不知道的JS》姊妹篇 | JavaScript 輕量級函數語言程式設計 翻譯 | 關鍵CSS和Webpack: 減少阻塞渲染的CSS的自動化解決方案
iKcamp最新活動
2019年，iKcamp原創新書《Koa與Node.js開發實戰》已在京東、天貓、亞馬遜、噹噹開售啦！