準備工作
官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1475052055990
開發(fā)工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364
開發(fā)工具安裝好后，新建一個項目，記得取消勾選“創(chuàng)建quick start項目”
10-40-43.jpg
從Hello，World！開始
了解下目錄結(jié)構
小程序 = app程序主體 + 頁面pages
app程序主體文件結(jié)構：
- app.js（必填）
小程序的邏輯。通過app()函數(shù)注冊一個小程序，并指定生命周期函數(shù)。 - app.json（必填）
小程序的公共設置。頁面路徑、窗口表現(xiàn)、tabBar、網(wǎng)絡超時等配置項。 - app.wxss
小程序公共樣式表。可以理解成common.css，不是必填，每個頁面可以有自己的樣式表，也可以引用公共樣式表。
頁面page文件結(jié)構：
- js文件（必填）
頁面邏輯。在這里注冊頁面，初始化數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。 - wxml文件（必填）
頁面結(jié)構，可以理解成html。 - wxss
頁面樣式表，理解成單個頁面的css文件，可以為頁面單獨設置樣式。 - json
頁面配置。只能配置window相關配置項，改變窗體表現(xiàn)。
創(chuàng)建app.js
通過開發(fā)工具的提示，使用App函數(shù)，快速生成一個小程序。
App({
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
}
})
創(chuàng)建app.json
一個app.json文件的配置項包含：
- pages（必填）---頁面路徑管理
一個數(shù)組，每一項是字符串“路徑+文件名”，指定小程序由哪些頁面組成，數(shù)組第一項作為初始頁面。文件名不需要后綴。
"pages":[
"pages/index/index"
"pages/logs/logs"
]
```
后面這幾個不是必備，等以后用到的時候再展開
- window---設置窗口表現(xiàn)
- tabBar---設置tabBar
- networkTimeout---設置網(wǎng)絡請求超時時間
- debug
所以我們的app.json代碼如下
{
"pages":[
"pages/index/index"
]
}
創(chuàng)建index頁面
為了便于管理，一般頁面會放在pages文件夾下，一個頁面一個子文件夾，里面包含js文件、wxml文件、wxss文件、json文件（4個文件名必須一致）。
12-10-11.jpg
index.js
用Page函數(shù)快速生成頁面實例
Page({
data:{
// text:"這是一個頁面"
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關閉
}
})
index.wxml
把view換成div是不是很容易理解
<view id="hello-world">
Hello,World!
<view>
index.wxss
樣式表的使用基本跟css一樣
#hello-world{
text-align: center;
margin-top: 75%;
}
編譯運行
12-26-57.jpg
好了，enjoy it！下回見：）
