摘要:第一次開發這玩意,記錄一些需要注意的點,以后再次開發時可以快速解決。小程序里面的很多寫法,和非常像,如果你是開發者,學習小程序不需要任何學習成本。更新數據通過來完成,這種行為很像,但在小程序中是同步的操作。
概要
由于公司的業務需求,本想年底偷個懶,但是開發小程序的任務襲來。
第一次開發這玩意,記錄一些需要注意的點,以后再次開發時可以快速解決。
如果你是新手,推薦你先看官方文檔,如果你在開發小程序過程中遇到一些不懂的地方,可以看看這篇文章會不會給你啟發。
小程序里面的很多寫法,和vue非常像,如果你是vue開發者,學習小程序不需要任何學習成本。
細則1、優先使用rpx替代px。
2、設計圖通常按照iPhone6的基準。
3、當使用一些交互組件時,優先從官方組件里面挑選,沒有再自定義組件。
4、自定義組件通常按照以下格式來寫js。
Component({ options: { multipleSlots: true }, properties: { data: { type: String } }, methods: { handleClcik: function (e) { if (!!e) { //handleClcik類似一個回調函數,點擊當前自定義組件的某個按鈕觸發 this.triggerEvent("_handleClcik", e) } } } })
5、自定義組件還需要增加json文件。
{ "component": true }
6、自定義組件的wxml和wxss和官方組件寫法一樣。
7、事件通常以catch或者bind開頭,事件函數用雙引號括起來,當然單引號也是可以的。catch和bind的區別是前者不會冒泡,后者支持冒泡。
8、如果你的page引用了某個自定義組件,需要在json配置路徑,否則不能在page里面調用。
{ "usingComponents": { "myComponent": "/components/MyComponent/myComponent" } }
9、在page里面調用自定義組件也很簡單,下面這種方式。_handleClcik對應自定義組件里面的triggerEvent。
10、組件中的事件如何傳遞參數呢?這就需要用到HTML5的 data-xx 了。
{{data}}
接著你可以根據上面用到的triggerEvent傳遞的e,將數據和函數一起傳遞給父組件中獲取執行。
_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是確保你的組件已經實例并且渲染完成的函數。
13、更新數據通過 this.setData({}) 來完成,這種行為很像React,但在小程序中是同步的操作。
14、給組件綁定數據就很簡單了,2個大括號 {{data}}。
15、在組件中設置三元表達式。有時候,我們需要用三元表達式判斷樣式。
16、如果你想在小程序渲染HTML格式的內容,可以使用rich-text組件。
總結
暫時只想到這些,更多的用法在官方文檔有詳細說明。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/107081.html
摘要:微信小程序應用號開發資源匯總文檔工具教程代碼插件組件文檔從搭建一個微信小程序開始小程序開發文檔小程序設計指南工具小程序開發者工具官方支持微信小程序實時預覽的支持的微信小程序組件化開發框架轉在線工具小程序云端增強社區微信小程序 微信(小程序or應用號)開發資源匯總-文檔-工具-教程-代碼-插件-組件 文檔 從搭建一個微信小程序開始 小程序開發文檔 小程序設計指南 工具 小程序開發者...
摘要:和都是輔助小程序開發的開源庫,本文對兩者做個對比。微信的這種限制決定了小程序一般只是用于實現核心功能,不會用作復雜功能。在筆者了解的很多小程序,甚至大都是用原生開發的。 grace和wepy都是輔助小程序開發的開源庫,本文對兩者做個對比。 注:本文是作者本人的一些拙見,純粹的技術討論,不想引起技術信仰之爭,歡迎積極、正向的討論及建議。 如果你還不了解Grace, 請參考:微信小程序開發...
閱讀 1899·2021-11-25 09:43
閱讀 1959·2019-08-30 13:56
閱讀 1222·2019-08-30 12:58
閱讀 3426·2019-08-29 13:52
閱讀 759·2019-08-26 12:17
閱讀 1464·2019-08-26 11:32
閱讀 940·2019-08-23 13:50
閱讀 1304·2019-08-23 11:53