至于為什么做小程序的文檔教程，原因有以下幾點(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程序不一樣，它不存在安裝卸載的過程映砖，一切操作都是在微信中進(jìn)行间坐，且可以做到快速開發(fā)、便捷使用。且由于是在微信內(nèi)部進(jìn)行使用竹宋，它無疑可以統(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ì)于有過編程經(jīng)驗(yàn)的人來說，學(xué)習(xí)成本非常低雀监，所以每個(gè)人都可以著手双吆。
• 個(gè)人原因的話，自從自己換了公司会前，對(duì)于技術(shù)的學(xué)習(xí)好乐，也慢了下來，所以打算做一篇比較全的文檔瓦宜，自己邊學(xué)習(xí)邊分享蔚万，提升自己，也福利他人歉提。

以上只是一些無傷大雅的話笛坦，真正的干貨，由下面開始苔巨。

一：獲取AppID

小程序的AppID需要公司的營(yíng)業(yè)執(zhí)照編號(hào)版扩，沒有的可以跳過這一步，沒有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)的小程序頁面
5. 在設(shè)置中即可看到自己的AppID信息闺魏，每個(gè)AppID可以綁定10個(gè)微信賬號(hào)

二： 開始階段

在開發(fā)之前未状，我們需要安裝微信官方提供的開發(fā)者工具（點(diǎn)擊鏈接即可下載頁面），安裝完開發(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è)頁面，每個(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)的就是小程序使用起來非常的簡(jiǎn)單，當(dāng)然震肮，也由此可見小程序團(tuán)隊(duì)下了非常多的功夫称龙。這也是當(dāng)一名開發(fā)者在造輪子的時(shí)候所必備的優(yōu)秀品質(zhì)，使用者使用起來越簡(jiǎn)單戳晌，這個(gè)產(chǎn)品就越受歡迎鲫尊，這也是為什么vue.js這么火的原因，所以小程序也會(huì)如此沦偎。

小程序局限性很大疫向，比如說他的入口只能通過搜索按鈕和掃描二維碼才能進(jìn)入竞帽，這將會(huì)導(dǎo)致很多的公司止步于小程序，當(dāng)然鸿捧，我幻想過如果我做一款類似安卓或者蘋果的應(yīng)用商店的話屹篓，我會(huì)不會(huì)靠這個(gè)發(fā)財(cái)，走向人生巔峰匙奴，但是堆巧，我覺得微信肯定不能容忍這種行為的，所以有這個(gè)想法的人泼菌，打消你們的念頭吧谍肤。此處我也通過開發(fā)一款簡(jiǎn)單的類似豆瓣電影的小程序來介紹其中的要點(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": "首頁",
      "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è)頁面的路徑。
• window設(shè)置默認(rèn)頁面的狀態(tài)欄虐块、導(dǎo)航條俩滥、標(biāo)題、窗口背景色贺奠，比如導(dǎo)航欄的背景顏色霜旧，導(dǎo)航欄的標(biāo)題顏色，導(dǎo)航欄的文字內(nèi)容等等儡率。
• 如果我們的小程序是一個(gè)多 tab 應(yīng)用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面）挂据，那么我們可以通過 tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁面儿普。tabBar的配置參數(shù)也非常多崎逃，我們可以配置tab上文字的默認(rèn)顏色、文字選中的顏色箕肃、文字的背景色等等婚脱。
• networkTimeout可以設(shè)置各種網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間。這些都有默認(rèn)值勺像，一般無特殊情況下障贸，不推薦自主設(shè)置。
• debug可以設(shè)置是否開啟debug模式吟宦，在該模式下篮洁，可以打開控制臺(tái)面板，可以查看路由跳轉(zhuǎn)時(shí)候的一些生命周期等等殃姓， 可以幫助開發(fā)者快速定位一些常見的問題袁波。
• 每一個(gè)頁面的.json文件也可以設(shè)置當(dāng)前頁面下window的一些基本信息

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

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

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

• onLaunch函數(shù)戳杀，它會(huì)監(jiān)聽小程序初始化，只在小程序初始化完成之后調(diào)用夭苗，小程序的整個(gè)運(yùn)行過程中信卡，它只會(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.組件

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

• 視圖容器

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

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

  • icon
    icon標(biāo)簽是小圖標(biāo)譬淳，微信只提供了不超過10種圖標(biāo)档址，主要是用在做提示性消息。
  • text
    text是文本標(biāo)簽邻梆，所有的文本只能寫在test標(biāo)簽內(nèi)守伸，而且text標(biāo)簽只能嵌套一層text標(biāo)簽。
  • progress
    progress標(biāo)簽是用來做進(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)支持三種選擇器诗轻，通過mode來區(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)簽主要是用來播放音頻，video標(biāo)簽主要是用來播放視頻匙握，它們與h5中新增的audio咆槽、video用法基本一致
  • image
    image標(biāo)簽是用來顯示圖片。其中有一個(gè)非常有趣的屬性mode圈纺，該屬性下有13個(gè)值秦忿，其中 4 種是縮放模式麦射，9 種是裁剪模式。善用該屬性會(huì)使你的圖片能達(dá)到你的預(yù)期樣式灯谣。

• 地圖

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

• 畫布

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

4.API

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

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

• 文件上傳和下載

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

• 媒體

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

• 文件

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

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

  wx.setStorage(Object)可以數(shù)據(jù)緩存起來蒂培，這是一個(gè)異步接口再愈。
  wx.setStorageSync(key,data)也是做緩存，但是一個(gè)同步接口护戳。
  wx.getStorage(Object)用來異步地獲取緩存的數(shù)據(jù)翎冲。
  wx.getStorageSync(key)用來同步地獲取緩存的數(shù)據(jù)。
  wx.removeStorage(Object)用來異步地刪除指定的數(shù)據(jù)緩存媳荒。
  wx.removeStorageSync(key)用來同步地刪除指定的數(shù)據(jù)緩存抗悍。
  wx.clearStorage()用來異步地清理整個(gè)數(shù)據(jù)緩存驹饺。
  wx.clearStorageSync()用來同步地清理整個(gè)數(shù)據(jù)緩存。

• 位置

  wx.getLocation(Object)可以獲取當(dāng)前位置缴渊、速度赏壹。
  wx.chooseLocation(Object)可以打開地圖選擇位置。
  wx.openLocation(Object)可以調(diào)用微信內(nè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è)頁面擎鸠，這一點(diǎn)和react-native非常的相似。
    wx.redirectTo(Object)關(guān)閉當(dāng)前頁面缘圈，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面劣光。
    wx.switchTab(Object)跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面
    wx.navigateBack(Object)關(guān)閉當(dāng)前頁面糟把，返回上一頁面或多級(jí)頁面绢涡。
  • 動(dòng)畫
    wx.createAnimation(Object)用來創(chuàng)建一個(gè)動(dòng)畫實(shí)例。
  • 繪圖
    主要還是canvas中的一些繪圖方法
  • 下拉刷新
    wx.onPullDownRefresh()用來監(jiān)聽該頁面用戶下拉刷新事件遣疯。
    wx.stopPullDownRefresh()用來停止當(dāng)前頁面下拉刷新雄可。

• 開放性接口

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

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

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

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

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

2.首頁

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

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

<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>

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

3.搜索

搜索頁面主要也是調(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.詳情頁面

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

未完待續(xù)~~~