小程序模板網(wǎng)

前端系列——小程序開發(fā)記錄片

發(fā)布時間:2018-05-05 14:45 所屬欄目:小程序開發(fā)教程

概要

由于公司的業(yè)務(wù)需求,本想年底偷個懶,但是開發(fā)小程序的任務(wù)襲來。

第一次開發(fā)這玩意,記錄一些需要注意的點,以后再次開發(fā)時可以快速解決。

如果你是新手,推薦你先看官方文檔,如果你在開發(fā)小程序過程中遇到一些不懂的地方,可以看看這篇文章會不會給你啟發(fā)。

細則

1、優(yōu)先使用rpx替代px。

2、設(shè)計圖通常按照iPhone6的基準。

3、當使用一些交互組件時,優(yōu)先從官方組件里面挑選,沒有再自定義組件。

4、自定義組件通常按照以下格式來寫js。

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

5、自定義組件還需要增加json文件。

{
  "component": true
}

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

7、事件通常以catch或者bind開頭,事件函數(shù)用雙引號括起來,當然單引號也是可以的。catch和bind的區(qū)別是前者不會冒泡,后者支持冒泡。

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

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

8、如果你的page引用了某個自定義組件,需要在json配置路徑,否則不能在page里面調(diào)用。

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

9、在page里面調(diào)用自定義組件也很簡單,下面這種方式。_handleClcik對應自定義組件里面的triggerEvent。

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

10、組件中的事件如何傳遞參數(shù)呢?這就需要用到HTML5的 data-xx 了。

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

接著你可以根據(jù)上面用到的triggerEvent傳遞的e,將數(shù)據(jù)和函數(shù)一起傳遞給父組件中獲取執(zhí)行。

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

11、小程序沒有window對象,所有原生組件(包括view)、自定義組件等,通過操作它們的實例,可以獲取到組件的信息(比如高度)。

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

12、onReady是確保你的組件已經(jīng)實例并且渲染完成的函數(shù)。

13、更新數(shù)據(jù)通過 this.setData({}) 來完成,這種行為很像React,但在小程序中是同步的操作。

14、給組件綁定數(shù)據(jù)就很簡單了,2個大括號 {{data}}。

15、在組件中設(shè)置三元表達式。有時候,我們需要用三元表達式判斷樣式。

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

總結(jié)

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


 
 
 


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24253.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢