微信小程序入門

微信小程序（下面簡稱小程序）近些月來刷爆了咱們這些程序猿們的圈子，能夠說無數的程序猿磨刀霍霍，準備在這快蛋糕上殺出一片天地。那麼做爲前端開發人員，小程序開發和咱們日常的開發有什麼不一樣的地方呢？讓咱們一塊兒來走進門裏看看。

咱們從下面幾個方向來了解一下小程序的開發： 
1.開發工具 
2.佈局差別 
3.JS差別 
4.其它

序

先看一張小程序初始化的目錄：

 

小程序包含一個描述總體程序的 app 和多個描述各自頁面的 page。一個小程序主體部分由三個文件組成，必須放在項目的根目錄，以下：app.js、app.json、app.wxss；一個小程序頁面由四個文件組成，分別是：js、wxml、wxss、json。 
詳情傳送門請戳-->https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html?t=20161107

1、開發工具

　　

 

    微信提供了一款 ’ 微信開發者工具 ‘ ，能夠直接在小程序的官網下載（https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161107）。 
    微信開發者工具集成了開發調試、代碼編輯及程序發佈。關於工具自己沒什麼好介紹的，用了一段時間，從代碼編輯的習慣來講，比較相似sublime text3，各類特性也都和st3相差不大,估計也是內置了emmet，上手仍是比較輕鬆的。 
    須要注意一點的問題是在使用微信開發者工具時，要習慣使用」編譯「功能，有的人會遇到本身在編輯器裏明明修改了某些地方，可是頁面裏卻沒有發生變化，這個時候其實只須要從新編譯一次，就妥妥的解決了。同時，遇到一些奇怪問題的時候，也不妨清理一下緩存，也許會有意外收穫。

2、佈局差別

1.標籤

    小程序的標籤和咱們習慣的div,p,span等標籤有較大的差別，小程序裏徹底取消了這些咱們所熟悉標籤，取而代之的標籤又被叫作組件，分別是視圖容器、基礎內容、表單組件、操做反饋（將會廢棄，改成API）、導航、媒體組件、地圖和畫布這八類。（傳送門：https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=20161107） 
    組件的用法和標籤同樣，好比view組件< view>< / view>、text組件< text>< /view>。從寫法上看起來和標籤寫法沒什麼區別，可是這些組件和標籤最大的區別就是，組件自己設置了樣式，好比icon組件：

<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view>

   

 

    咱們只須要使用icon組件，不須要去本身設置樣式就能夠獲得對應的icon樣式。 
    在平常小程序開發中，比較經常使用的組件有view和text，其中用的最多的就是view，view自己並無默認太多的樣式，只有一個display:block樣式，因此在我看來view就相似於div，咱們也就把它看成div來使用就好了，而後你就會發現佈局的時候處處都是view~，就像下圖：

 　

 

    滿眼全是view這種寫法不須要像html同樣考慮語義、seo神馬的，很是的簡單粗暴~。 

    額外提一下text組件，text擁有view所沒有的一個特性就是text組件內的文本能夠被複制、能夠被複制、能夠被複制（重要的事情說三遍~）。若是你但願某段文本能夠被複制，那麼你只能使用text組件。同時須要注意的一點，text組件內部不能嵌套view組件！嵌套無效！

2.樣式

    若是說html的標籤發生了較大變化的話，那麼css則幾乎是沒有什麼變化，這意味着咱們能夠很是快速的在小程序裏重構咱們的移動端網頁（直接把樣式拷貝過來便可）。可是有幾點問題咱們須要注意下： 
   1.小程序引入了新的單位rpx:能夠根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。 
   2.不支持less、sass等寫法 
   3.不支持不支持級聯選擇器，例如: .test:nth-child(2)、.test:last-child等 
   4.支持::before和::after

   注：想了解更多請戳-->https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html?t=20161107

2、JS差別

    雖然小程序的交互採用的是js的語法，可是最大的變化就在於小程序沒法使用選擇器獲取到頁面的某個’dom’（應該不叫dom），這也是咱們前端人員須要思路轉變的地方，以往咱們習慣於獲取某個dom，而後這個dom上綁定各類事件，同時對頁面進行一些改變操做，可是小程序並無提供這種咱們習慣的方法。 
    不能獲取dom，也不能直接操做dom，那咱們該怎麼寫呢？

1. bind 和 catch

    bind和catch的做用從字面意思就能夠大體猜出是用來綁定某些東西的，沒錯，這是小程序提供綁定事件的兩個方法，而他們的區別在於bind不阻止冒泡，而catch阻止冒泡。小程序不提供獲取dom的操做，而是讓咱們直接將事件綁定寫入到組件內，以下代碼：

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

    看到這你們可能發現了bind後面跟着一個tap，這個tap是什麼東東？

2. tap

    tap其實就是一個事件，你能夠理解爲click，不過在手機端叫作tap，其它的事件還有：touchstart、touchmove、touchcancel、touchend、longtap。

    bindtap=」tapName」組合起來就是綁定個tap事件,tapName則是對應的方法名，在這裏須要注意一點，調用方法時不可以使用tapName(「txt」)這種形式來傳參，小程序不支持。那麼若是咱們想要給方法傳遞一些參數該怎麼作呢？接着往下看。

3.event

咱們先看一段代碼：

Page({
  tapName: function(event) {
    console.log(event)
  }
})

打印出來的結果:

{
"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
}]
}

    看到這麼一堆東西你們可能有點暈，沒事，咱們來捋一捋。這個event想來你們應該明白是什麼，event包含了目標對象的相關信息。那意味着，咱們只要去修改目標對象的相關信息，就能夠給tapName方法傳輸參數了。 
    那麼如何修改目標對象的相關信息呢？在這以前咱們必需要先了解下currentTarget和target兩個屬性，前者是綁定事件的組件，後者是觸發事件的組件源。理解清楚這兩個屬性很重要！若是是上面例子這種狀況，只有一個view組件，那麼這兩個屬性的值沒什麼區別，可是若是換成下面的這個例子，就不同了：

<view id="tap1" data-hi="綁定組件" bindtap="tapName">
    <view id="tap2" data-hi="觸發組件源"></view>
</view>

咱們再輸出看看（爲了方便對比，只保留下currentTarget和target兩個屬性）:

{
  "target": {
    "id": "tap2",
    "dataset":  {
      "hi":"觸發組件源"
    }
  },
  "currentTarget":  {
    "id": "tap1",
    "dataset": {
      "hi":"綁定組件"
    }
  }
}

    經過這個例子就能夠很清楚的發現，currentTarget對應的就是外層綁定了tapName方法的view組件，而target對應的則是內部的view組件。 
    經過兩個例子，相信你們也注意到了兩個屬性，data-hi和dataset，這兩個屬性有什麼關係呢？你們應該猜到了，dataset的值其實就是咱們設置的data-xxx的值，而xxx則是dataset裏面的key。你們對於data-xxx的寫法應該不陌生，就是html中常見的自定義屬性的寫法，而在小程序中，則被用來傳參。

4. 改變樣式

    前面就提到了小程序並不提供獲取和操做dom的能力，這就又帶來了一個問題，咱們如何去動態的改變樣式呢？咱們先看下例子：

<view class="container" style="overflow: {{screenType?'hidden':'scroll-y'}}" bindtap="bindType" >
Page({
  data: {
    screenType: ''
  },
  bindType: function(){
    this.setData({
        screenType: '1'
    })
  }
 })

    你們是否是有點明白了呢，咱們沒有辦法直接獲取dom而後去改變他的樣式，因此咱們只能經過data裏的屬性來控制樣式的變化，如上面的代碼，overflow的值取決於screenType的值是否存在，若是存在，則overflow: hidden，反之overflow: scroll-y；那麼咱們只須要改變screenType的值。要改變screenType的值也簡單了，小程序提供了this.setData方法，能夠設置data內的值。

4、其它

    最後提一下咱們熟悉的ajax請求，在小程序裏，它不叫ajax，而叫作wx.request。用法和ajax沒什麼區別，惟一須要特別注意的是，請求必須是https請求！而不是日常的http請求！除了必需要是https請求之外，還須要到小程序的後臺裏設置合法域名，不然沒法請求。

    瞭解了這些東西，基本小程序就能算是入門了，至於小程序其它更多的功能，你們能夠在工做或者學習中本身去熟悉。有不懂的能夠留言。