至于為什么做小程序的文檔教程，原因有以下幾點(diǎn)

• 小程序在1月9號(hào)正式對(duì)外公測(cè)，業(yè)界大佬們紛紛入駐小程序，當(dāng)天就推出小程序的大公司有大眾點(diǎn)評(píng)+，滴滴出行DiDi，美團(tuán)外賣+等等；小程序即將在中國(guó)互聯(lián)網(wǎng)占領(lǐng)很大的市場(chǎng)，如果發(fā)展趨勢(shì)好，很可能達(dá)到公眾號(hào)那樣的高度。而且據(jù)我所了解，很多公司已經(jīng)打算將用戶從公眾號(hào)上轉(zhuǎn)移至小程序。
• 微信小程序和一般的App程序不一樣，它不存在安裝卸載的過(guò)程，一切操作都是在微信中進(jìn)行，且可以做到快速開發(fā)、便捷使用。且由于是在微信內(nèi)部進(jìn)行使用，它無(wú)疑可以統(tǒng)一Android、IOS、WP三大平臺(tái)，實(shí)現(xiàn)了一套程序，在多處運(yùn)行，這就相當(dāng)于微信成為了一個(gè)系統(tǒng)架構(gòu)，避開了原始的微信搭載環(huán)境。
• 當(dāng)你真正探究小程序的時(shí)候，你會(huì)發(fā)現(xiàn)，小程序入手會(huì)非常的簡(jiǎn)單，對(duì)于有過(guò)編程經(jīng)驗(yàn)的人來(lái)說(shuō)，學(xué)習(xí)成本非常低，所以每個(gè)人都可以著手。
• 個(gè)人原因的話，自從自己換了公司，對(duì)于技術(shù)的學(xué)習(xí)，也慢了下來(lái)，所以打算做一篇比較全的文檔，自己邊學(xué)習(xí)邊分享，提升自己，也福利他人。

以上只是一些無(wú)傷大雅的話，真正的干貨，由下面開始。

一：獲取AppID

小程序的AppID需要公司的營(yíng)業(yè)執(zhí)照編號(hào)，沒(méi)有的可以跳過(guò)這一步，沒(méi)有AppID也可以開發(fā)應(yīng)用。

1. 登錄微信公眾平臺(tái)，點(diǎn)擊注冊(cè)按鈕，并在賬號(hào)類型中選擇小程序
2. 郵箱選項(xiàng)為自己正在使用的郵箱，并設(shè)置密碼
3. 進(jìn)入郵箱激活之后，登錄自己剛剛設(shè)置的賬號(hào)
4. 填寫自己公司的基本信息，即可進(jìn)入微信公眾號(hào)的小程序頁(yè)面
5. 在設(shè)置中即可看到自己的AppID信息，每個(gè)AppID可以綁定10個(gè)微信賬號(hào)

二： 開始階段

在開發(fā)之前，我們需要安裝微信官方提供的開發(fā)者工具（點(diǎn)擊鏈接即可下載頁(yè)面），安裝完開發(fā)者工具之后，我們可以使用微信號(hào)掃碼登錄。

1. 新建項(xiàng)目，如果之前在AppID設(shè)置中綁定了你的微信號(hào)，那么你可以在AppID選項(xiàng)中填寫自己的AppID，你可以使用開發(fā)者工具中更多的功能。
2. 微信官方會(huì)默認(rèn)提供一個(gè)小demo，有興趣的可以去看一下代碼，此處我們就不講述這個(gè)demo的細(xì)節(jié)代碼，只介紹一下代碼的整體思想。
3. 整個(gè)代碼由兩個(gè)文件夾和三個(gè)文件構(gòu)成。pages文件夾下有兩個(gè)文件夾，對(duì)應(yīng)兩個(gè)頁(yè)面，每個(gè)文件夾下有三個(gè)文件，分別是.js、.wxml、.wxss，分別對(duì)應(yīng)js邏輯、html代碼、css樣式。utils文件夾主要是寫了一下公共的js邏輯。app.js是小程序的腳本代碼。我們可以在這個(gè)文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。 app.json是對(duì)整個(gè)小程序的全局配置。我們可以在這個(gè)文件中配置小程序的路由，配置小程序的窗口?背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。app.wxss是整個(gè)小程序的公共樣式。
4. 明白了整個(gè)代碼構(gòu)成，我們就可以新建自己的項(xiàng)目。

三：技術(shù)棧

參考：小程序官方文檔

小程序最吸引我一點(diǎn)的就是小程序使用起來(lái)非常的簡(jiǎn)單，當(dāng)然，也由此可見小程序團(tuán)隊(duì)下了非常多的功夫。這也是當(dāng)一名開發(fā)者在造輪子的時(shí)候所必備的優(yōu)秀品質(zhì)，使用者使用起來(lái)越簡(jiǎn)單，這個(gè)產(chǎn)品就越受歡迎，這也是為什么vue.js這么火的原因，所以小程序也會(huì)如此。

小程序局限性很大，比如說(shuō)他的入口只能通過(guò)搜索按鈕和掃描二維碼才能進(jìn)入，這將會(huì)導(dǎo)致很多的公司止步于小程序，當(dāng)然，我幻想過(guò)如果我做一款類似安卓或者蘋果的應(yīng)用商店的話，我會(huì)不會(huì)靠這個(gè)發(fā)財(cái)，走向人生巔峰，但是，我覺得微信肯定不能容忍這種行為的，所以有這個(gè)想法的人，打消你們的念頭吧。此處我也通過(guò)開發(fā)一款簡(jiǎn)單的類似豆瓣電影的小程序來(lái)介紹其中的要點(diǎn)，至于做豆瓣，原因純粹是因?yàn)槎拱暧鞋F(xiàn)成的api。

1.配置

小程序的最外層有一個(gè)app.json，這個(gè)就是整個(gè)小程序的配置文件。

{
  "pages":[
    "pages/index/index",
    "pages/list/list",
    "pages/search/search",
    "pages/shoucang/shoucang",
    "pages/my/my"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#48C23D",
    "navigationBarTitleText": "豆瓣電影",
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁(yè)",
      "iconPath":"icons/nohotIndex.png",
      "selectedIconPath":"icons/hotIndex.png"
    }, {
      "pagePath": "pages/list/list",
      "text": "分類",
      "iconPath":"icons/nohotList.png",
      "selectedIconPath":"icons/hotList.png"
    }, {
      "pagePath": "pages/search/search",
      "text": "搜索",
      "iconPath":"icons/nohotSearch.png",
      "selectedIconPath":"icons/hotSearch.png"
    },{
      "pagePath": "pages/shoucang/shoucang",
      "text": "收藏",
      "iconPath":"icons/nohotShoucang.png",
      "selectedIconPath":"icons/hotShoucang.png"
    },{
      "pagePath": "pages/my/my",
      "text": "我們",
      "iconPath":"icons/nohotMy.png",
      "selectedIconPath":"icons/hotMy.png"
    }],
    "color": "#888",
    "selectedColor": "#48C23D",
    "borderStyle": "white"
  }
}

• 其中pages配置的是小程序的路由，數(shù)組中的每一條數(shù)據(jù)都是對(duì)應(yīng)一個(gè)頁(yè)面的路徑。
• window設(shè)置默認(rèn)頁(yè)面的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色，比如導(dǎo)航欄的背景顏色，導(dǎo)航欄的標(biāo)題顏色，導(dǎo)航欄的文字內(nèi)容等等。
• 如果我們的小程序是一個(gè)多 tab 應(yīng)用（客戶端窗口的底部或頂部有 tab 欄可以切換頁(yè)面），那么我們可以通過(guò) tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。tabBar的配置參數(shù)也非常多，我們可以配置tab上文字的默認(rèn)顏色、文字選中的顏色、文字的背景色等等。
• networkTimeout可以設(shè)置各種網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間。這些都有默認(rèn)值，一般無(wú)特殊情況下，不推薦自主設(shè)置。
• debug可以設(shè)置是否開啟debug模式，在該模式下，可以打開控制臺(tái)面板，可以查看路由跳轉(zhuǎn)時(shí)候的一些生命周期等等， 可以幫助開發(fā)者快速定位一些常見的問(wèn)題。
• 每一個(gè)頁(yè)面的.json文件也可以設(shè)置當(dāng)前頁(yè)面下window的一些基本信息

如圖，是我配置完的一個(gè)App的雛形，TabBar和路由跳轉(zhuǎn)已經(jīng)完成了。

2.生命周期函數(shù)

小程序的生命周期函數(shù)是最容易被人忽視的一點(diǎn)，但是如果利用好生命周期函數(shù)，可以做很多的事情。

• onLaunch函數(shù)，它會(huì)監(jiān)聽小程序初始化，只在小程序初始化完成之后調(diào)用，小程序的整個(gè)運(yùn)行過(guò)程中，它只會(huì)被調(diào)用一次。
• onShow函數(shù)，它是小程序從后臺(tái)進(jìn)入前臺(tái)的時(shí)候調(diào)用的。
• onHide函數(shù)，它是小程序從前臺(tái)進(jìn)入后臺(tái)的時(shí)候調(diào)用的。
• onError函數(shù)，它是當(dāng)小程序發(fā)生腳本錯(cuò)誤，或者 api 調(diào)用失敗時(shí)，會(huì)觸發(fā) onError 并帶上錯(cuò)誤信息。
• 小程序還允許自定義生命周期，如官方demo中的getUserInfo函數(shù)。

3.組件

小程序提供了很多的組件，這些組件使用起來(lái)非常的簡(jiǎn)單，而且基本能幫你完成所有的事情。往下看你會(huì)發(fā)現(xiàn)，小程序很多地方都與react-native“不謀而合”。

• 視圖容器

  • view
    view的使用方式就和html中的div標(biāo)簽（小程序中不能使用div標(biāo)簽）一樣，相當(dāng)于一個(gè)塊容器。
  • scroll-view
    做過(guò)移動(dòng)端的可能對(duì)這個(gè)東西應(yīng)該非常的熟悉，開發(fā)移動(dòng)端時(shí)，我們經(jīng)常使用IScroll這個(gè)插件，好在小程序幫我們封裝了，但論體驗(yàn)的話，小程序還是很差的。
  • swiper
    swiper大家應(yīng)該也很熟悉，用過(guò)bootstrap或者引過(guò)swipper這個(gè)插件的人應(yīng)該都知道，這個(gè)主要是用來(lái)做輪播圖的，而且小程序提供的參數(shù)也非常的全。

• 基礎(chǔ)內(nèi)容

  • icon
    icon標(biāo)簽是小圖標(biāo)，微信只提供了不超過(guò)10種圖標(biāo)，主要是用在做提示性消息。
  • text
    text是文本標(biāo)簽，所有的文本只能寫在test標(biāo)簽內(nèi)，而且text標(biāo)簽只能嵌套一層text標(biāo)簽。
  • progress
    progress標(biāo)簽是用來(lái)做進(jìn)度條的，也支持進(jìn)度條的動(dòng)畫，動(dòng)畫也非常流暢。

• 表單組件

  • button、input、checkbox、label、radio、textarea
    button標(biāo)簽支持定義button類型、是否透明、是否禁用、是否帶loading小圖標(biāo)等等，input標(biāo)簽也綁定了很多回調(diào)函數(shù)，其他標(biāo)簽與html表單中的標(biāo)簽基本一致。
  • picker
    picker標(biāo)簽可以從底部彈起選擇器，現(xiàn)支持三種選擇器，通過(guò)mode來(lái)區(qū)分，分別是普通選擇器，時(shí)間選擇器，日期選擇器，默認(rèn)是普通選擇器。
  • slider
    slider標(biāo)簽相當(dāng)于html表單中的range類型，它是一個(gè)滑動(dòng)選擇器，可以設(shè)置最大值和最小值。
  • switch
    switch是開關(guān)選擇器。

• 導(dǎo)航

  • navigator
    navigator標(biāo)簽的主要 作用是路由跳轉(zhuǎn)，url屬性用作跳轉(zhuǎn)，redirect屬性用作重定向。

• 媒體組件

  • audio、video
    audio標(biāo)簽主要是用來(lái)播放音頻，video標(biāo)簽主要是用來(lái)播放視頻，它們與h5中新增的audio、video用法基本一致
  • image
    image標(biāo)簽是用來(lái)顯示圖片。其中有一個(gè)非常有趣的屬性mode，該屬性下有13個(gè)值，其中 4 種是縮放模式，9 種是裁剪模式。善用該屬性會(huì)使你的圖片能達(dá)到你的預(yù)期樣式。

• 地圖

  • map
    map標(biāo)簽是用來(lái)做地圖的，非常的實(shí)用，而且這個(gè)標(biāo)簽的屬性和api也非常多，我就不一一細(xì)說(shuō)，非常感興趣的可以參考官方文檔中的地圖map。

• 畫布

  • canvas
    小程序基本上h5中的canvas全部搬了過(guò)來(lái)，而且用法也基本不變，用來(lái)做動(dòng)畫的話還是非常給力的。

4.API

• 網(wǎng)絡(luò)請(qǐng)求

  wx.request(Object)是用來(lái)做https請(qǐng)求的，它的用法和$.ajax非常的相似，我就不詳細(xì)介紹了。

• 文件上傳和下載

  • wx.uploadFile(Object)
    小程序?yàn)槲覀兲峁┝艘粋€(gè)上傳文件的方法，我們將文件上傳至開制定的發(fā)者服務(wù)器，來(lái)存儲(chǔ)我們的文件。
  • wx.downloadFile(Object)
    同時(shí)，小程序也為我們提供了下載文件的方法，我們可以下載指定的url下的文件。
• WebSocket
  小程序提供了socket讓服務(wù)端和客戶端進(jìn)行通信，監(jiān)聽WebSocket事件的函數(shù)也非常全，具體可移至官方文檔查看，有一點(diǎn)要切記，小程序同時(shí)最多只能有一個(gè)socket。

• 媒體

  小程序提供了調(diào)用底層的一些方法。如拍照、錄音、音頻播放、視頻播放

• 文件

  小程序提供了保存文件、刪除本地文件、新開頁(yè)面打開文檔等等方法

• 數(shù)據(jù)緩存

  wx.setStorage(Object)可以數(shù)據(jù)緩存起來(lái)，這是一個(gè)異步接口。
  wx.setStorageSync(key,data)也是做緩存，但是一個(gè)同步接口。
  wx.getStorage(Object)用來(lái)異步地獲取緩存的數(shù)據(jù)。
  wx.getStorageSync(key)用來(lái)同步地獲取緩存的數(shù)據(jù)。
  wx.removeStorage(Object)用來(lái)異步地刪除指定的數(shù)據(jù)緩存。
  wx.removeStorageSync(key)用來(lái)同步地刪除指定的數(shù)據(jù)緩存。
  wx.clearStorage()用來(lái)異步地清理整個(gè)數(shù)據(jù)緩存。
  wx.clearStorageSync()用來(lái)同步地清理整個(gè)數(shù)據(jù)緩存。

• 位置

  wx.getLocation(Object)可以獲取當(dāng)前位置、速度。
  wx.chooseLocation(Object)可以打開地圖選擇位置。
  wx.openLocation(Object)可以調(diào)用微信內(nèi)置的地圖來(lái)查看自己當(dāng)前的位置。

• 設(shè)備

  小程序提供了獲取系統(tǒng)信息、網(wǎng)絡(luò)狀態(tài)、重力感應(yīng)、羅盤、撥打電話、掃描二維碼等設(shè)備接口。

• 界面

  • Toast
    wx.showToast(Object)可以顯示消息提示框
    wx.hideToast()隱藏消息提示框
    wx.showModal(Object)?顯示模態(tài)彈窗
    wx.showActionSheet(Object)顯示操作菜單
  • 導(dǎo)航
    wx.navigateTo(Object)用于跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，這一點(diǎn)和react-native非常的相似。
    wx.redirectTo(Object)關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。
    wx.switchTab(Object)跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面
    wx.navigateBack(Object)關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面。
  • 動(dòng)畫
    wx.createAnimation(Object)用來(lái)創(chuàng)建一個(gè)動(dòng)畫實(shí)例。
  • 繪圖
    主要還是canvas中的一些繪圖方法
  • 下拉刷新
    wx.onPullDownRefresh()用來(lái)監(jiān)聽該頁(yè)面用戶下拉刷新事件。
    wx.stopPullDownRefresh()用來(lái)停止當(dāng)前頁(yè)面下拉刷新。

• 開放性接口

  小程序還提供了獲取用戶信息、微信支付、客服消息、分享、獲取二維碼等api。

四：項(xiàng)目開發(fā)

前面介紹過(guò)了，我打算做一個(gè)類似豆瓣電影的小程序。

1.獲取數(shù)據(jù)

開發(fā)階段我們需要有數(shù)據(jù)來(lái)支持我們的小程序，正好豆瓣提供了一套完整的API供開發(fā)者來(lái)開發(fā)，詳情可以點(diǎn)擊豆瓣電影API,本項(xiàng)目全程采用此處提供的API進(jìn)行開發(fā)。

2.首頁(yè)

首頁(yè)主要展示一些正在熱映的電影類目，我們根據(jù)API將數(shù)據(jù)渲染在頁(yè)面上。此處展示我已經(jīng)獲取到的數(shù)據(jù)。

通過(guò)wx:for語(yǔ)法糖來(lái)循環(huán)顯示數(shù)據(jù)，這等同于angular中的ng-repeat、vuejs中的v-for。每個(gè)影片點(diǎn)擊進(jìn)去都將跳轉(zhuǎn)至詳情頁(yè)，所以我們應(yīng)該使用navigator標(biāo)簽和其url屬性，并將影片的id帶過(guò)去，代碼如下：

<navigator wx:for="{{movieList.subjects}}" wx:for-item="item" url="/pages/detail/detail?id={{item.id}}">
    <li>
      <image src="{{item.images.medium}}" class="image50"></image>
      <p class="title">{{item.title}}</p>
      <p class="price">評(píng)分<span>{{item.rating.average}}</span></p>
    </li>
  </navigator>

完成之后的效果圖如下所示（雖說(shuō)太過(guò)于簡(jiǎn)單，但基本效果還是有(⊙o⊙)…）：

3.搜索

搜索頁(yè)面主要也是調(diào)用豆瓣提供的API：搜索api，搜索框使用的小程序提供的，搜索按鈕使用的是小程序中的Icon字體，完成后的代碼和效果圖如下所示：

<view class="searchBox">
    <input type="text" placeholder="請(qǐng)輸入電影名/演員/類目進(jìn)行查詢" auto-focus  class="searchInput"/>
    <icon  type="search" class="searchIcon"></icon>
  </view>

4.詳情頁(yè)面

詳情頁(yè)面可以通過(guò)點(diǎn)擊某個(gè)電影信息進(jìn)入，我們?cè)邳c(diǎn)擊時(shí)已經(jīng)將電影的id傳至詳情頁(yè)面。所以我們可以在詳情頁(yè)面取id之后調(diào)取豆瓣API中的通過(guò)id獲取電影信息。

未完待續(xù)~~~