小程序官網(wǎng)
開始了解小程序可以直接到官網(wǎng)糠馆，因為該官網(wǎng)非常詳細和友好嘶伟。
小程序開發(fā)準備
在官網(wǎng)上直接注冊小程序賬號九昧，可以管理你的小程序的權(quán)限绊袋，查看數(shù)據(jù)報表，發(fā)布小程序等操作铸鹰。登錄賬號癌别，獲取對應的小程序的 AppID（創(chuàng)建小程序項目需要用到）。
接著下載微信開發(fā)者工具蹋笼，建立了“普通快速啟動模板”（選擇空目錄下才有此選項）展姐，或者直接選擇小程序官方Demo或者weui小程序版UI當做學習Demo
小程序代碼構(gòu)成
wxml文件
WXML（WeiXin Markup Language）是框架設(shè)計的一套標簽語言，結(jié)合基礎(chǔ)組件剖毯、事件系統(tǒng)圾笨，可以構(gòu)建出頁面的結(jié)構(gòu)。
這個其實就是“html”逊谋，不能使用W3C的標簽擂达，轉(zhuǎn)而使用的是微信自定義的標簽，常見的就是用<view>代替<div>胶滋，具體有哪些標簽可以查看官網(wǎng)微信基礎(chǔ)組件板鬓。頁面結(jié)構(gòu)是以<page>為父節(jié)點節(jié)點，沒有<html>和<body>究恤。
下面代碼就是簡單的數(shù)據(jù)綁定和事件：
<!-- wxml代碼 -->
<view bindtap="add"> {{count}} </view>
Page({
data: {
count: 1
},
add: function(e) {
this.setData({
count: this.data.count + 1
})
}
})
js文件
App() 函數(shù)用來注冊一個小程序俭令。接受一個 object 參數(shù)，其指定小程序的生命周期函數(shù)等丁溅。App() 必須在 根目錄下的app.js 中注冊唤蔗，且不能注冊多個。
App({
onLaunch: function(options) {
// 當小程序初始化完成時窟赏，會觸發(fā) onLaunch（全局只觸發(fā)一次）
},
onShow: function(options) {
// 當小程序啟動妓柜，或從后臺進入前臺顯示，會觸發(fā) onShow
},
onHide: function() {
// 當小程序從前臺進入后臺涯穷，會觸發(fā) onHide
},
onError: function(msg) {
// 當小程序發(fā)生腳本錯誤棍掐，或者 api 調(diào)用失敗時，會觸發(fā) onError 并帶上錯誤信息
console.log(msg)
},
globalData: {
// 全局變量拷况，注意App()和Page不同作煌，一個是globalData,一個是data
name: 'Gensen'
}
//開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 Object 參數(shù)中，用 this 可以訪問
myMethod: function() {
console.log(this.globalData.globalData); // "Gensen"
}
})
Page()函數(shù)用來注冊一個頁面赚瘦。接受一個 object 參數(shù)粟誓，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)起意、事件處理函數(shù)等鹰服。相對一個全局一個局部，對應每個頁面都有一個。
Page({
data: {
// 頁面的初始數(shù)據(jù)
text: "This is page data."
},
onLoad: function(options) {
// 生命周期函數(shù)--監(jiān)聽頁面加載
// 一個頁面只會調(diào)用一次悲酷，可以在 onLoad 中獲取打開當前頁面所調(diào)用的 query 參數(shù)套菜。
},
onReady: function() {
// 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
// 一個頁面只會調(diào)用一次，代表頁面已經(jīng)準備妥當设易，可以和視圖層進行交互逗柴。
// 對界面的設(shè)置如wx.setNavigationBarTitle請在onReady之后設(shè)置。
},
onShow: function() {
// 生命周期函數(shù)--監(jiān)聽頁面顯示
},
onHide: function() {
// 生命周期函數(shù)--監(jiān)聽頁面隱藏
// 當navigateTo或底部tab切換時調(diào)用顿肺。
},
onUnload: function() {
// 生命周期函數(shù)--監(jiān)聽頁面卸載
// 當redirectTo或navigateBack的時候調(diào)用戏溺。
},
onPullDownRefresh: function() {
// 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
// 需要在app.json中的`window`選項中或頁面配置page.json中開啟`enablePullDownRefresh`。
// 當處理完數(shù)據(jù)刷新后挟冠，`wx.stopPullDownRefresh`可以停止當前頁面的下拉刷新于购。
},
onReachBottom: function() {
// 頁面上拉觸底事件的處理函數(shù)
},
onShareAppMessage: function () {
// 用戶點擊右上角轉(zhuǎn)發(fā)
return {
title: '自定義轉(zhuǎn)發(fā)標題',
path: '/page/logs/logs'
}
},
onPageScroll: function() {
// 頁面滾動觸發(fā)事件的處理函數(shù)
},
onTabItemTap(item) {
// 當前是 tab 頁時，點擊 tab 時觸發(fā)
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 object 參數(shù)中知染，在頁面的函數(shù)中用 this 可以訪問
viewTap: function() {
// 直接修改 this.data 而不調(diào)用 this.setData 是無法改變頁面的狀態(tài)的肋僧，還會造成數(shù)據(jù)不一致
this.setData({
text: 'Set some data for updating view.'
}, function() {
// 回調(diào)函數(shù)
})
},
customData: {
hi: 'MINA'
}
})
js部分還包括路由、模塊控淡、API（小程序開發(fā)框架提供豐富的微信原生 API嫌吠，可以方便的調(diào)起微信提供的能力，如獲取用戶信息掺炭，本地存儲辫诅，支付功能等）后續(xù)再細講。
wxss文件
WXSS(WeiXin Style Sheets)是一套樣式語言涧狮，用于描述 WXML 的組件樣式炕矮。其實就是CSS改了個后綴名，不同的地方是多了rpx尺寸單位和樣式導入者冤，樣式選擇器只能使用一部分肤视，像后代子代選擇器就不能用了，目前支持的選擇器如下：
| 選擇器 | 樣例 | 樣例描述 |
|---|---|---|
| .class | .intro | 選擇所有擁有 class="intro" 的組件 |
| #id | #firstname | 選擇擁有 id="firstname" 的組件 |
| element | view | 選擇所有 view 組件 |
| element, element | view, checkbox | 選擇所有文檔的 view 組件和所有的 checkbox 組件 |
| ::after | view::after | 在 view 組件后邊插入內(nèi)容 |
| ::before | view::before | 在 view 組件前邊插入內(nèi)容 |
定義在 app.wxss 中的樣式為全局樣式涉枫，作用于每一個頁面邢滑。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面愿汰，并會覆蓋 app.wxss 中相同的選擇器困后。
配置文件
app.json
用來對微信小程序進行全局配置，決定頁面文件的路徑衬廷、窗口表現(xiàn)摇予、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多 tab 等吗跋。程序啟動默認的第一個頁面侧戴，就是app.json的pages中的第一個頁面。
注意：json文件不能注釋，不然會報錯（上面圖片大誤）
page.json
每一個小程序頁面也可以使用.json文件來對本頁面的窗口表現(xiàn)進行配置救鲤。 頁面的配置比app.json全局配置簡單得多，只是設(shè)置 app.json 中的 window 配置項的內(nèi)容秩冈，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項本缠。
結(jié)尾
先簡單介紹下微信小程序代碼結(jié)構(gòu)和不同文件對應的功能和作用，后續(xù)有空將細講某個模塊或者一些常用的應用場景入问。
