一、開發前準備
申請賬號、安裝開發者工具
二、文件與目錄結構
1、程序主體：
app.js
app.json 程序配置
1.1、程序配置
pages 頁面路徑
window 頁面的窗口表現
tabBar 底部tab切換
networkTimeout
debug
{
"pages":[ //哪個寫在上面，哪個就是入口文件
"pages/index/index",
"pages/movie/movie",
"pages/logs/logs"
]
}app.wxss 公共樣式
2、頁面：
index.js
index.json 頁面配置
2.1、頁面配置
window 頁面的窗口表現
index.wxss 頁面樣式
index.wxml 頁面結構
三、註冊程序與頁面
1、註冊app，只需要註冊一次，可以得到一個程序的實例，可以被其他頁面訪問
在其他頁面，通過getApp全局函數獲取應用實例 const app = getApp(); 獲取全局數據：app.gldData; //{a:1}
App({
gldData:{ a:1 },
onLaunch:function(){ //一運行小程序就會執行
//初始化代碼
}
})
2、註冊page，有幾個頁面，在每個頁面內都需要註冊
Page({
data:{
b:2
},
onLoad:function(){ //一進入頁面就會執行
console.log( this.data ) //{b:2} 通過this，獲取單個頁面內數據
}
})四、程序生命週期
1、App
App({
//在小程序運行期間，只會執行一次
//程序銷燬之後(過了一段時間沒有運行或者手動刪除小程序)，再次啓動小程序就會執行
onLaunch(){
console.log('小程序啓動時執行')
},
//每次從後臺切換出來就會執行
onShow(){
console.log('切換到小程序時執行')
},
//每次切換到後臺就會執行
onHide(){
console.log('小程序被隱藏在後臺時執行')
}
})2、Page
Page({
//tab之間的切換，不會讓頁面重新加載，也不會卸載，只會讓頁面顯示與隱藏
//在進行NavigatorTo鏈接跳轉的時候，目標頁面會被加載onLoad，原始頁面會被隱藏onHide
//此時點擊導航條上的回退按鈕NavigatorBack，目標頁面會onShow，不會onLoad，原始頁面會被卸載onUnload
//頁面加載的時候執行，只會執行一次
onLoad(){ },
//頁面第一次渲染完成之後執行，只會執行一次
onReady(){ },
//頁面顯示就會執行，會執行多次，比如tab切換從a頁面切換到b頁面，那麼也就是等於b頁面顯示了
onShow(){ },
//頁面隱藏就會執行，會執行多次，比如tab切換從a頁面切換到b頁面，那麼也就是等於a頁面隱藏了
onHide(){ },
//頁面卸載的時候執行，只會執行一次
onUnload(){ },
})五、數據與列表渲染
1、數據在index.js裏面的data裏面定義，
Page({
data:{ //數據類型，可以是字符串、數組、對象、數值等等
name:'kate'
}
})
要輸出到頁面上，直接就是<view>{{name}}</view>即可2、渲染數組 wx:for wx:key
Page({
data:{
names:[ 'kate','jim','lily' ],
age:['1','2','3']
}
})
<view wx:for="{{names}}" wx:key="*this">{{item}}</view>3、條件渲染 變量爲true，即滿足條件就進行渲染，反之就不進行渲染
<view wx:if="{{ score>60 && score<90 }}">等級B</view>
<view wx:elif="{{ score<60 && score>0 }}">等級C</view>
<view wx:else>等級A</view>4、塊級渲染block，block是虛擬組件，不會出現在頁面上
同時顯示多個元素
<block wx:if="{{ score==80 }}">
<view>{{ name }}</view>
<view>{{ score }}</view>
<view>等級A</view>
</block>
<block wx:else>
<view>{{ name }}</view>
<view>{{ score }}</view>
<view>等級B</view>
</block>5、使用模板
Page({
data:{
names:[ 'kate','jim','lily' ],
age:['1','2','3'],
score:80,
name:'aaa'
}
})
先定義模板：
<template name="myTemplate1">
<view>我是模板</view>
<view>{{name}}</view>
</template>
<template name="myTemplate2">
<block wx:for="{{age}}" wx:key="*this">
<view>{{item}}</view>
<view>啦啦啦</view>
</block>
</template>
<template name="myTemplate3">
<block wx:if="{{score==80}}">
<view>{{name}}</view>
<view>{{score}}</view>
<view>等級A</view>
</block>
<block wx:else>
及格
</block>
</template>
使用：
<view>
<template is="myTemplate1" data="{{name:'kate'}}"></template>
<template is="myTemplate2" data="{{age:age}}"></template>
<template is="myTemplate3" data="{{name,score}}"></template> //data="{{name,score}}等價於data="{{name:name , score:score}}
</view>
6、import與include
可以把模板定義在專門的template.wxml裏面
要使用裏面的模板，只需要在對應的wxml裏面
<import src="template.wxml"> //import引入的模板，你需要在頁面上告知使用的是哪一個模板，<template is="myTemplate1" data="{{name:'kate'}}"></template>
<include src="template.wxml"> //include引入模板，在頁面上什麼位置寫上，那麼模板代碼就在什麼地方顯示
六、事件
零碎知識點
1、對象被轉爲字符串就變成了[ object object ]