資(zī)訊

精準傳達 • 有效溝通

從品牌網站建設到網絡營銷策劃,從策略到執行的一(yī)站式服務

小(xiǎo)程序開(kāi)發需要關注的幾個知(zhī)識點

來源:山东亚青网络科技有限公司 | 2020.08.27

内容主要涉及到小(xiǎo)程序相關的五個方面。

  1、Text組件

  2、單位(RPX)

  3、生(shēng)命周期

  4、template模闆

  5、播放(fàng)器插件

  逐一(yī)來看一(yī)下(xià)。

  一(yī)、Text組件

  小(xiǎo)程序中(zhōng)view組件的使用相當于就是一(yī)個div标簽,而text組件相當于就是一(yī)個文本标簽b/span這樣子,然而,其實一(yī)段文字我(wǒ)們可以使用text組件來包裹,也可以不用text組件而直接使用view組件來包裹,那二者有什麽區别呢?

  很明顯,小(xiǎo)程序給TEXT組件賦予了特殊能力。而且使用TEXT組件包裹文件更容易控制它的樣式。所以,通過一(yī)些個對比和測試,我(wǒ)對text組件的認識就是兩點:

  1、用TEXT組件包裹的内容好寫樣式,來控制它的顯示UI。

  2、在小(xiǎo)程序中(zhōng)隻有TEXT包圍的文本才可長按選中(zhōng),這一(yī)點小(xiǎo)程序給text組件賦予了一(yī)個屬性。
  二、單位RPX

  談一(yī)下(xià)我(wǒ)對RPX這個單位的認識, 小(xiǎo)程序特有的一(yī)個單位。首先,小(xiǎo)程序開(kāi)發可以看成是一(yī)個移動web的開(kāi)發。 竟然是一(yī)個移動端的開(kāi)發,那麽我(wǒ)們就應該用移動端的思維去(qù)寫代碼,就移動端有一(yī)些特殊的特征需要我(wǒ)們去(qù)考慮,比如:

  1、最重要的!,如何在不同的機型上做适配。

  2、模拟器ip6分(fēn)辨率375和設計稿750的因爲所以然關系。

  這張圖我(wǒ)已經在多個地方講過了,通過這張圖我(wǒ)們可以知(zhī)道,模拟器ip6的375是一(yī)個邏輯分(fēn)辨率的概念,單位可以認爲是PT,它和我(wǒ)們日常布局中(zhōng)的CSS像素在數值大(dà)小(xiǎo)上是同一(yī)個東西,而物(wù)理分(fēn)辨率(如上750*1334)才是設備真正分(fēn)辨率的概念,它和前面說的邏輯像素數值上有一(yī)個對應的關系(Reader)。也就是表示一(yī)個邏輯像素包含幾個物(wù)理像素問題。知(zhī)道了這些之後,我(wǒ)們就來看一(yī)下(xià)小(xiǎo)程序序裏RPX那點事。

  我(wǒ)們來看一(yī)下(xià)RPX的作用,看它解決了一(yī)個什麽問題。

  1、ip6下(xià)1px =1rpx=0.5pt

  這裏說的PX指的是物(wù)理分(fēn)辨率1px。這個就是小(xiǎo)程序的規定,以ip6的物(wù)理像素750X1334爲視覺稿進行設計,隻不過小(xiǎo)程序定了個不一(yī)樣的單位叫RPX(responsive pixel)。然而,使用RPX,小(xiǎo)程序會自動在不同的分(fēn)辨率下(xià)進行轉換。從而達到适配的效果。

  小(xiǎo)程序開(kāi)發需要關注的幾個知(zhī)識點

  可以理解:小(xiǎo)程序中(zhōng)的RPX相當于就是移動端開(kāi)發中(zhōng)PX/rem/em等單位用來表示視覺上與設備分(fēn)辨率上的一(yī)個邏輯關系 。

  2、不是所有的單位都适合用rpx。

  RPX是會根據不同機型去(qù)做自适應調整的,而有時候我(wǒ)們不需要去(qù)做這麽一(yī)個調整。

  比如,對于一(yī)些個文字介紹,使用RPX後,小(xiǎo)屏幕看起來就完全不可控,顯示效果上看着比較小(xiǎo),甚至出現看不清楚的情況,還有一(yī)些标題的情況,可能我(wǒ)們在任何機型上想要看到的就是一(yī)個加粗定大(dà)的效果。這種情況下(xià),其實我(wǒ)覺得我(wǒ)們還是可以使用PX作爲單位來控制比較适合一(yī)些。

  三、生(shēng)命周期

  小(xiǎo)程序也有生(shēng)命周期,其實整個開(kāi)發流程和前端框架React/vue等都類似,所以,這個我(wǒ)對比着來看一(yī)下(xià)小(xiǎo)程序中(zhōng)的生(shēng)命同期的概念。

  對于那些對外(wài)暴露的方法,onLoad/onShow/onReady都好理解。在頁面初始化數據的處理方式上有一(yī)點需要注意的地方:

  1、在React框架

  實際上跑完willmount之後會産生(shēng)render,然後在執行didmount,如果在didmount中(zhōng)如果有數據發生(shēng)變化,使用setState處理變化後,再去(qù)執行render。

  在willmount中(zhōng)我(wǒ)們可以使用this.state.xxx來初始化變量的值。

  2、小(xiǎo)程序架構

  然而,在小(xiǎo)程序的生(shēng)命周期内,我(wǒ)們是否可以在onLoad中(zhōng)使用this.data.xxx來初始化變量呢?

  答案是不行的,可能之前的版本是可以的,查了一(yī)下(xià)小(xiǎo)程序文檔。

  四、template

  WXML提供模闆(template),可以在模闆中(zhōng)定義代碼片段,然後在不同的地方調用。

  模闆的使用非常簡單,文檔中(zhōng)的說的很清楚,那麽關于這個清楚的描述,我(wǒ)對模闆有兩點認識:

  1、區别于腳本引入可以使用絕對路徑

  腳本的引入是隻能使用相對地址的,而模闆的引入可以使用絕對路徑。

  2、模闆化不是模塊化

  有沒有發現在模闆文件中(zhōng)其實少了一(yī)個文件,shipin-item-template.js,對,這裏是不能加這個腳本文件的,所以從業務角度上來說,無法将邏輯單獨出來。因此,小(xiǎo)程序時原模闆隻是一(yī)個模闆不是一(yī)個模塊。

十八年 建站經驗

多一(yī)份參考,總有益處

聯系客服,免費(fèi)獲得專屬《策劃方案》及報價

咨詢相關問題或預約面談,可以通過以下(xià)方式與我(wǒ)們聯系

業務熱線:400-606-8008 / 大(dà)客戶專線 濟南(nán):15589999555