小程序wxml頁面

 下面代碼就是簡單的數據綁定和事件： 
  {{count}} 
 Page({
 data: {
 count: 1
 },
 add: function(e) {
 this.setData({
 count: this.data.count + 1
 })
 }
 })

js文件

App() 函數用來註冊一個小程序。接受一個 object 參數，其指定小程序的生命週期函數等。App() 必須在 根目錄下的app.js 中註冊，且不能註冊多個。

 App({
 onLaunch: function(options) {
 // 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
 },
 onShow: function(options) {
 // 當小程序啟動，或從後臺進入前臺顯示，會觸發 onShow
 },
 onHide: function() {
 // 當小程序從前臺進入後臺，會觸發 onHide
 },
 onError: function(msg) {
 // 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 並帶上錯誤信息 

 console.log(msg)
 },
 globalData: {
 // 全局變量，注意App()和Page不同，一個是globalData,一個是data
 name: 'Gensen'
 }
 //開發者可以添加任意的函數或數據到 Object 參數中，用 this 可以訪問
 myMethod: function() {
 console.log(this.globalData.globalData); // "Gensen"
 }
 })

Page()函數用來註冊一個頁面。接受一個 object 參數，其指定頁面的初始數據、生命週期函數、事件處理函數等。相對一個全局一個局部，對應每個頁面都有一個。

Page({
 data: {
 // 頁面的初始數據
 text: "This is page data."
 },
 onLoad: function(options) {
 // 生命週期函數--監聽頁面加載
 // 一個頁面只會調用一次，可以在 onLoad 中獲取打開當前頁面所調用的 query 參數。
 },
 onReady: function() {
 // 生命週期函數--監聽頁面初次渲染完成
 // 一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。
 // 對界面的設置如wx.setNavigationBarTitle請在onReady之後設置。 

 },
 onShow: function() {
 // 生命週期函數--監聽頁面顯示
 },
 onHide: function() {
 // 生命週期函數--監聽頁面隱藏
 // 當navigateTo或底部tab切換時調用。
 },
 onUnload: function() {
 // 生命週期函數--監聽頁面卸載
 // 當redirectTo或navigateBack的時候調用。
 },
 onPullDownRefresh: function() {
 // 頁面相關事件處理函數--監聽用戶下拉動作
 // 需要在app.json中的`window`選項中或頁面配置page.json中開啟`enablePullDownRefresh`。
 // 當處理完數據刷新後，`wx.stopPullDownRefresh`可以停止當前頁面的下拉刷新。
 },
 onReachBottom: function() {
 // 頁面上拉觸底事件的處理函數
 },
 onShareAppMessage: function () {
 // 用戶點擊右上角轉發
 return {
 title: '自定義轉發標題',
 path: '/page/logs/logs'
 }
 },
 onPageScroll: function() {
 // 頁面滾動觸發事件的處理函數
 },
 onTabItemTap(item) {
 // 當前是 tab 頁時，點擊 tab 時觸發
 console.log(item.index)
 console.log(item.pagePath) 

 console.log(item.text)
 },
 // 開發者可以添加任意的函數或數據到 object 參數中，在頁面的函數中用 this 可以訪問
 viewTap: function() {
 // 直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的，還會造成數據不一致
 this.setData({
 text: 'Set some data for updating view.'
 }, function() {
 // 回調函數
 })
 },
 customData: {
 hi: 'MINA'
 }
})

Page 實例的生命週期

js部分還包括路由、模塊、API（小程序開發框架提供豐富的微信原生 API，可以方便的調起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等）後續再細講。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 組件後邊插入內容 ::before view::before 在 view 組件前邊插入內容 定義在 app.wxss 中的樣式為全局樣式，作用於每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面，並會覆蓋 app.wxss 中相同的選擇器。

小程序全局樣式設置

配置文件

app.json

用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。程序啟動默認的第一個頁面，就是app.json的pages中的第一個頁面。

注意：json文件不能註釋，不然會報錯（上面圖片大誤）page.json

每一個小程序頁面也可以使用.json文件來對本頁面的窗口表現進行配置。 頁面的配置比app.json全局配置簡單得多，只是設置 app.json 中的 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

結尾

先簡單介紹下微信小程序代碼結構和不同文件對應的功能和作用，後續有空將細講某個模塊或者一些常用的應用場景。