這是一門微信小程序入門課程，通過(guò)學(xué)習(xí)本節(jié)課程可以使你快速上手小程序開(kāi)發(fā)，在學(xué)習(xí)這門課之前，需要你先具備基本的前端開(kāi)發(fā)能力，包括html/css/JavaScrip，起碼你得會(huì)切圖，了解js語(yǔ)法。

為什么學(xué)習(xí)小程序

學(xué)習(xí)小程序之前要先了解，小程序是什么，有什么獨(dú)特的地方值得我們一定要去學(xué)習(xí)它，小程序是基于微信實(shí)現(xiàn)特定功能的一種載體，同樣基于微信實(shí)現(xiàn)功能的我們知道還有公眾號(hào)和微網(wǎng)站，那小程序的特點(diǎn)是什么，我們用HTML5做一個(gè)手機(jī)站不行嗎，再接入微信的SDK，功能也很強(qiáng)大，小程序最大的特點(diǎn)，就是可以擁有媲美原生App的流暢體驗(yàn)，這一點(diǎn)是非常誘人的，也是相比HTML5最大的優(yōu)勢(shì)，尤其學(xué)到后面你會(huì)發(fā)現(xiàn)小程序的開(kāi)發(fā)還特別簡(jiǎn)單，開(kāi)發(fā)又簡(jiǎn)單體驗(yàn)又好，天底下哪有這么便宜的事，但小程序就是這樣一個(gè)東西。

小程序?yàn)槭裁茨茏龅浇咏捏w驗(yàn)?zāi)?，這是因?yàn)樾〕绦蛟诘讓泳褪钦{(diào)用的原生組件，我們開(kāi)發(fā)小程序編寫的前端代碼，可以理解為是調(diào)用微信內(nèi)部原生組件的快捷方式，因此，開(kāi)發(fā)小程序使用的必然是一種全新的語(yǔ)言，不可能是HTML5，本節(jié)課程就是帶領(lǐng)大家一起來(lái)學(xué)習(xí)這門語(yǔ)言，并且完成一個(gè)小示例，讓大家可以快速的對(duì)小程序開(kāi)發(fā)有一個(gè)直觀的認(rèn)識(shí)。

小程序開(kāi)發(fā)語(yǔ)言介紹

小程序的開(kāi)發(fā)語(yǔ)言跟HTML5是非常相似的，視圖層的兩種語(yǔ)言WXML和WXSS就分別對(duì)應(yīng)了HTML和CSS，邏輯層就仍然還是Javascript，為了便于理解，下面我就用小程序和HMLT5對(duì)比的方式，來(lái)講解小程序的這三種開(kāi)發(fā)語(yǔ)言。

首先我們說(shuō)區(qū)別最小的，就是小程序里的這個(gè)JS，它跟web開(kāi)發(fā)中的JS只有兩點(diǎn)區(qū)別，第一，沒(méi)有任何DOM操作相關(guān)功能，這一點(diǎn)跟Nodejs是一樣的，大家知道Js語(yǔ)言本身就是不包括DOM操作的，DOM操作是瀏覽器環(huán)境為JS做的擴(kuò)展；第二點(diǎn)區(qū)別，小程序里的Js增加了一些微信特有的API，這個(gè)很好理解，像微信掃碼啊，上傳下載啊這些功能，肯定是要單獨(dú)提供API的?？偨Y(jié)一下，去掉了DOM操作，增加了一些API，另外值得一提的是小程序中的js是支持模塊化的，也支持ES6。

WXSS與CSS的區(qū)別，也是兩點(diǎn)，第一，增加了一個(gè)rpx單位，這個(gè)單位具有自動(dòng)適應(yīng)屏幕寬度的特點(diǎn)，規(guī)則是1rpx = 屏幕寬度/750，這是個(gè)很好用的單位，可以說(shuō)完美解決了屏幕適配的問(wèn)題，如果你用過(guò)HTML5里的vw單位，會(huì)發(fā)現(xiàn)他倆是一回事，只不過(guò)1vw = 屏幕寬度/100，比例不太一樣；第二個(gè)區(qū)別，WXSS支持的選擇器類型有限，目前只支持.class, #id, element, ele,ele, ::before, ::after，注意，后代選擇器是不支持的，這個(gè)我再開(kāi)發(fā)工具里測(cè)試發(fā)現(xiàn)可以支持，但文檔是明確說(shuō)只支持上面那些，那我們就聽(tīng)文檔的，后代選擇器就不要用了?？偨Y(jié)一下，WXSS相比CSS增加了rpx單位，不支持后代選擇器；

最后WXML這塊的內(nèi)容比較多，尤其有一部分HTML里完全沒(méi)有的東西，比如說(shuō)數(shù)據(jù)綁定、條件渲染、列表渲染、模板、引用，這些東西我在這里就不展開(kāi)講了，如果你之前用過(guò)任何的前端MVVM框架或者前端模板引擎，那對(duì)這塊內(nèi)容應(yīng)該是輕車熟路的，如果說(shuō)這些東西都不知道，那也沒(méi)關(guān)系，自己回去把文檔這塊內(nèi)容仔細(xì)的閱讀一遍，相信都能看明白是怎么回事。

這里我們就說(shuō)兩個(gè)東西，標(biāo)簽和事件，首先，標(biāo)簽徹底換了一套，所有的HTML標(biāo)簽都不能用，取而代之的是小程序提供的一套標(biāo)簽，官方把他們叫組件，不管叫什么，這個(gè)組件的寫法和HTML標(biāo)簽是一樣的，也是由標(biāo)簽名，屬性，內(nèi)容組成，也可以嵌套，也可以通過(guò)class，id，style來(lái)添加樣式，但是小程序組件相對(duì)來(lái)說(shuō)擁有更強(qiáng)大的功能，自帶樣式也更豐富，舉個(gè)例子，

1

<picker bindchange="pickerChange" value="{{index}}" range="{{array}}">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

{
"type":"tap",
"timeStamp":895,
"target": {
  "id": "tapTest",
  "dataset":  {
    "hi":"WeChat"
  }
},
"currentTarget":  {
  "id": "tapTest",
  "dataset": {
    "hi":"WeChat"
  }
},
"detail": {
  "x":53,
  "y":14
},
"touches":[{
  "identifier":0,
  "pageX":53,
  "pageY":14,
  "clientX":53,
  "clientY":14
}],
"changedTouches":[{
  "identifier":0,
  "pageX":53,
  "pageY":14,
  "clientX":53,
  "clientY":14
}]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

//app.js
App({
  onLaunch: function () {
    //調(diào)用API從本地緩存中獲取數(shù)據(jù)
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //調(diào)用登錄接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null,
    apiKey: "c2d3e04cc633644f1c3ae3f6eea94564"
  }
})

源碼：weapp-star