前端系列——小程序開發記錄片

概要

因爲公司的業務需求，本想年末偷個懶，可是開發小程序的任務襲來。

第一次開發這玩意，記錄一些須要注意的點，之後再次開發時能夠快速解決。

若是你是新手，推薦你先看官方文檔，若是你在開發小程序過程當中遇到一些不懂的地方，能夠看看這篇文章會不會給你啓發。

小程序裏面的不少寫法，和vue很是像，若是你是vue開發者，學習小程序不須要任何學習成本。

細則

一、優先使用rpx替代px。

二、設計圖一般按照iPhone6的基準。

三、當使用一些交互組件時，優先從官方組件裏面挑選，沒有再自定義組件。

四、自定義組件一般按照如下格式來寫js。

Component({
  options: {
    multipleSlots: true
  },
  properties: {
    data: {
      type: String
    }
  },
  methods: {
    handleClcik: function (e) {
      if (!!e) {
        //handleClcik相似一個回調函數，點擊當前自定義組件的某個按鈕觸發
        this.triggerEvent('_handleClcik', e)
      }
    }
  }
})

五、自定義組件還須要增長json文件。

{
  "component": true
}

六、自定義組件的wxml和wxss和官方組件寫法同樣。

七、事件一般以catch或者bind開頭，事件函數用雙引號括起來，固然單引號也是能夠的。catch和bind的區別是前者不會冒泡，後者支持冒泡。

<view catchtap="handleClcik"></view>

<view bindtap="handleClcik"></view>

八、若是你的page引用了某個自定義組件，須要在json配置路徑，不然不能在page裏面調用。

{
  "usingComponents": {
    "myComponent": "/components/MyComponent/myComponent"
  }
}

九、在page裏面調用自定義組件也很簡單，下面這種方式。_handleClcik對應自定義組件裏面的triggerEvent。

<myComponent
    data="{{data}}"
    bind:_handleClcik="_handleClcik"
></myComponent>

十、組件中的事件如何傳遞參數呢？這就須要用到HTML5的 data-xx 了。

<view 
    bindtap="handleClcik"
    data-item="{{data}}"
>{{data}}</view>

接着你能夠根據上面用到的triggerEvent傳遞的e，將數據和函數一塊兒傳遞給父組件中獲取執行。

_handleClcik: function(e) {
    console.log(e) //打印它，你會看到當前點擊對象的實例。
}

十一、小程序沒有window對象，全部原生組件（包括view）、自定義組件等，經過操做它們的實例，能夠獲取到組件的信息（好比高度）。

let query = wx.createSelectorQuery()
    query.select('#id').boundingClientRect()
    query.exec((res) => {
      console.log(res) //當前組件實例的屬性
    })

十二、onReady是確保你的組件已經實例而且渲染完成的函數。

1三、更新數據經過 this.setData({}) 來完成，這種行爲很像React，但在小程序中是同步的操做。

1四、給組件綁定數據就很簡單了，2個大括號 {{data}}。

1五、在組件中設置三元表達式。有時候，咱們須要用三元表達式判斷樣式。

<view
    style="color: {{isRed ? '#f00' : '#fff'}}"
></view>

1六、若是你想在小程序渲染HTML格式的內容，可使用rich-text組件。

<rich-text nodes='{{html}}'></rich-text>

總結

暫時只想到這些，更多的用法在官方文檔有詳細說明。