準備工作

官方文檔：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！開始

了解下目錄結構

小程序 = app程序主體 + 頁面pages

app程序主體文件結構：

1. app.js（必填）
   小程序的邏輯。通過app()函數(shù)注冊一個小程序，并指定生命周期函數(shù)。
2. app.json（必填）
   小程序的公共設置。頁面路徑、窗口表現(xiàn)、tabBar、網(wǎng)絡超時等配置項。
3. app.wxss
   小程序公共樣式表。可以理解成common.css，不是必填，每個頁面可以有自己的樣式表，也可以引用公共樣式表。

頁面page文件結構：

1. js文件（必填）
   頁面邏輯。在這里注冊頁面，初始化數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
2. wxml文件（必填）
   頁面結構，可以理解成html。
3. wxss
   頁面樣式表，理解成單個頁面的css文件，可以為頁面單獨設置樣式。
4. 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文件的配置項包含：

1. pages（必填）---頁面路徑管理
   一個數(shù)組，每一項是字符串“路徑+文件名”，指定小程序由哪些頁面組成，數(shù)組第一項作為初始頁面。文件名不需要后綴。

"pages":[
"pages/index/index"
"pages/logs/logs"
]
```
后面這幾個不是必備，等以后用到的時候再展開

2. window---設置窗口表現(xiàn)
3. tabBar---設置tabBar
4. networkTimeout---設置網(wǎng)絡請求超時時間
5. 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為頁面跳轉所帶來的參數(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！下回見：）