前言

微信小程序于今日內(nèi)測了喉脖，一下子成為了程序員們的熱門話題淆院。本人以前是java程序員,前一段時間開始學(xué)習(xí)前端相關(guān)的知識，陸陸續(xù)續(xù)看了HTML饵较，CSS，JS和Node(正在學(xué)習(xí))遭赂，最近在工作中也開始從事一些前端工作(Flex開發(fā))循诉。小程序是否會成為微信公眾平臺開發(fā)的又一個成功產(chǎn)品，不得而知撇他，但引起了我濃厚的興趣:首先茄猫，它降低了開發(fā)簡單APP的門檻，有豐富的API可以調(diào)用困肩，其次划纽，如果小程序的發(fā)布只需要微信官方的審核，而不用政府有關(guān)部門的審核锌畸，這將會大大節(jié)省繁瑣的APP審核成本勇劣，不論時間還是金錢上。我也想趁此機會，跟深入的學(xué)習(xí)前端技術(shù)比默，所以寫這一個入門教程幻捏，權(quán)當是筆記和分享，有不足的地方請多指教命咐。

1 環(huán)境搭建

首先篡九，安裝微信小程序開發(fā)工具。由于是在內(nèi)測階段醋奠，所以沒有內(nèi)測資格的人只能使用破解的程序,地址:破解版榛臼。務(wù)必下載地址中的Demo，通過這個Demo钝域，我們可以邊看代碼變學(xué)習(xí)微信小程序的開發(fā)讽坏。當然锭魔，你還需要是一個微信公眾平臺開發(fā)者例证，因為需要輸入Appid進入工具

2 需要的知識

如果你是做前端開發(fā)的，請忽略這一節(jié)迷捧。如果你是菜鳥织咧，那么你需要有基本的HTML，CSS和Javascript,Node的基礎(chǔ)知識漠秋。真的只需要比較基礎(chǔ)的知識笙蒙，個人認為。

3 開發(fā)工具

屏幕快照 2016-09-23 12.07.16.png

屏幕快照 2016-09-23 12.19.00.png

我們先運行個小程序看看棍现。首先把之前下的Demo導(dǎo)入到開發(fā)工具中调煎，然后這個項目會自動啟動。在調(diào)試界面己肮，可以在右邊的console標簽下看到App打印的日志士袄。

屏幕快照 2016-09-23 13.53.07.png

看一下日志內(nèi)容，很容易知道App的啟動是通過WAService這個js谎僻，這應(yīng)該是微信開發(fā)的框架代碼娄柳，有興趣的可以研究一下它的源碼。其中的信息如“onLaunch have been invoked”艘绍，有經(jīng)驗的程序員應(yīng)該知道這個
信息是在說明某個方法被調(diào)用了赤拒。那這個方法是在哪邊定義的呢？不要急诱鞠，我已經(jīng)幫你找到了挎挖。

4 app.js

打開項目根目錄的app.js:

App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
   console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
  globalData: {
    hasLogin: false
  }
})

看吧，onLaunch,onShow方法都定義在這里(其中還有一個onHide方法航夺，這個方法App切換到后臺運行的時候調(diào)用)蕉朵。所以,在App啟動的時候，這個App會最先被加載,并執(zhí)行它的onLaunch方法阳掐，然后始衅，當它界面準備顯示出來的時候，它會調(diào)用onShow方法缭保。
然后是一堆“Register Page:xxxxx”的信息汛闸，字面意思是在注冊頁面文件，是在哪配置要注冊哪些文件的呢涮俄？這有涉及到另一個文件：app.json蛉拙。學(xué)過Node的同學(xué)肯定此刻肯定會心一笑。沒錯彻亲，這是類似package.json的項目配置文件孕锄，關(guān)于App的核心都放在這里面。打開這個文件:

{
"pages": [
  "page/component/index",
  "page/component/navigation-pages/controller/controller",
  "page/component/navigation-pages/form/form",
  "page/component/navigation-pages/media/media",
  "page/component/navigation-pages/view/view",
  "page/component/component-pages/wx-action-sheet/wx-action-sheet",
  "page/component/component-pages/wx-audio/wx-audio",
  "page/component/component-pages/wx-button/wx-button",
  ...
  ]
"window": {
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "小程序演示",
  "navigationBarBackgroundColor": "#fbf9fe",
  "backgroundColor": "#fbf9fe"
  },
"tabBar": {
  "color": "#dddddd",
  "selectedColor": "#3cc51f",
  "borderStyle": "black",
  "backgroundColor": "#ffffff",
  "list": [{
    "pagePath": "page/component/index",
    "iconPath": "image/wechat.png",
    "selectedIconPath": "image/wechatHL.png",
    "text": "組件"
   }, {
    "pagePath": "page/API/index/index",
    "iconPath": "image/wechat.png",
    "selectedIconPath": "image/wechatHL.png",
    "text": "接口"
  }]
},
"networkTimeout": {
 "request": 10000,
 "connectSocket": 10000,
 "uploadFile": 10000,
 "downloadFile": 10000
},
"debug": true
}

目前由于我沒有官方的開發(fā)教程苞尝，所以接下來說的都是我通過自己分析得出的一些結(jié)論畸肆，有錯誤請多多包涵。

5 app.json配置說明

5.1 pages

它配置的就是剛剛?cè)罩纠锬切﹔egister的頁面宙址，所以我們在App中新加了一個頁面轴脐，需要把頁面路徑寫到這個配置中。

5.2 window

它用來配置窗體的樣式。

具體配置項的說明:

• navigationBarTitleText:導(dǎo)航欄的標題
• navigationBarTextStyle:文本樣式
• navigationBarBackgroundColor:導(dǎo)航欄背景色
• backgroundColor:頁面背景色

這里的導(dǎo)航欄指頁面最上面的一部分大咱。我們拿“接口->基礎(chǔ)能力->微信登錄”這個界面舉例子恬涧。

屏幕快照 2016-09-23 15.01.02.png

導(dǎo)航欄部分在圖中以紅圈標出。你看碴巾，這個和原生的APP的頂部導(dǎo)航欄非常像溯捆，幾乎以假亂真，這也算是微信小程序的 一個優(yōu)勢吧厦瓢。

5.3 tabBar

這是配置下部導(dǎo)航欄的提揍。也就是最開始的頁面下面“組件”和“接口”所在的位置:

屏幕快照 2016-09-23 15.20.33.png

• color和selectedColor:圖標下方的文字在一般狀態(tài)的顏色和在選中狀態(tài)的顏色

• borderStyle:邊框樣式(目前發(fā)現(xiàn)還有一個white樣式)

• backgroundColor:背景色

• list:導(dǎo)航欄包含的選項按鈕

  • pagePath:頁面的路徑劳跃，點擊按鈕會轉(zhuǎn)到該頁面
  • iconPath:一般狀態(tài)下的按鈕的icon的路徑
  • selectedIconPath:選中狀態(tài)下的按鈕的icon的路徑
  • text:按鈕icon下發(fā)的文字

5.4 networkTimeout

配置網(wǎng)絡(luò)的超時時間，單位都是毫秒浙垫。

具體配置項說明:

• request:請求超時時間
• connectSocket: websocket是超時時間
• uploadFile:上傳文件的超市時間
• downloadFile:下載文件的超市時間

5.5 debug

配置debug開啟(true)還是關(guān)閉(false),關(guān)閉了只會打印開發(fā)者自己代碼里的輸出信息刨仑，開啟了可以打印底層框架的日志。

6 app.wxss樣式

基本就是css換了個名字绞呈，沒啥新東西贸人。

結(jié)語

這是系列教程的第一章间景。從下載開發(fā)工具到現(xiàn)在寫完這個教程佃声，我只花了差不多七個小時，看吧倘要，入門就是這么簡單圾亏。