小程序開發需要關注的幾個知識點

許久之前做過一次分享，是關於小程序開發的，而在那之前，我並沒真正開搞過一個上線的的小程序業務。所以，當時，作為一個即將要接觸小程序業務的前端開發者來說，也只是想談一下自己對小程序提供的一些個功能的看法和研究。當時就是搞一些個測試demo驗證了一些東西，今天，我把當時的PPT內容寫成文字給大家分享一下。

好了，費話不多說。

內容主要涉及到小程序相關的五個方面。

1、Text組件

2、單位（RPX）

3、生命周期

4、template模板

5、播放器插件

逐一來看一下。

一、Text組件

小程序中view組件的使用相當於就是一個div標籤，而text組件相當於就是一個文本標籤b/span這樣子，然而，其實一段文字我們可以使用text組件來包裹，也可以不用text組件而直接使用view組件來包裹，那二者有什麼區別呢？

先來做一個測試。

GIF

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

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

2、在小程序中只有TEXT包圍的文本才可長按選中（這一點小程序給text組件賦予了一個屬性，如上圖）。

二、單位RPX

談一下我對RPX這個單位的認識， 小程序特有的一個單位。首先，小程序開發可以看成是一個移動web的開發。 竟然是一個移動端的開發，那麼我們就應該用移動端的思維去寫代碼，就移動端有一些特殊的特徵需要我們去考慮，比如：

1、最重要的！，如何在不同的機型上做適配。

2、模擬器ip6解析度375和設計稿750的因為所以然關係。

先來看一張圖：

這張圖我已經在多個地方講過了，通過這張圖我們可以知道，模擬器ip6的375是一個邏輯解析度的概念，單位可以認為是PT，它和我們日常布局中的CSS像素在數值大小上是同一個東西，而物理解析度（如上750*1334）才是設備真正解析度的概念，它和前面說的邏輯像素數值上有一個對應的關係（Reader）。也就是表示一個邏輯像素包含幾個物理像素問題。知道了這些之後，我們就來看一下小程序序里RPX那點事。

我們來看一下RPX的作用，看它解決了一個什麼問題。

1、ip6下1px =1rpx=0.5pt

這裡說的PX指的是物理解析度1px。這個就是小程序的規定，以ip6的物理像素750X1334為視覺稿進行設計，只不過小程序定了個不一樣的單位叫RPX（responsive pixel）。然而，使用RPX，小程序會自動在不同的解析度下進行轉換。從而達到適配的效果。

GIF

可以理解：小程序中的RPX相當於就是移動端開發中PX/rem/em等單位用來表示視覺上與設備解析度上的一個邏輯關係 。

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

RPX是會根據不同機型去做自適應調整的，而有時候我們不需要去做這麼一個調整。如下圖：

GIF

比如，對於一些個文字介紹，使用RPX後，小屏幕看起來就完全不可控，顯示效果上看著比較小，甚至出現看不清楚的情況，還有一些標題的情況，可能我們在任何機型上想要看到的就是一個加粗定大的效果。這種情況下，其實我覺得我們還是可以使用PX作為單位來控制比較適合一些。

三、生命周期

小程序也有生命周期，其實整個開發流程和前端框架React/vue等都類似，所以，這個我對比著來看一下小程序中的生命同期的概念。

如下圖：

對於那些對外暴露的方法，onLoad/onShow/onReady都好理解。在頁面初始化數據的處理方式上有一點需要注意的地方：

1、在React框架

實際上跑完willmount之後會產生render，然後在執行didmount，如果在didmount中如果有數據發生變化，使用setState處理變化後，再去執行render。

2、小程序架構

答案是不行的，可能之前的版本是可以的，查了一下小程序文檔。

四、template

WXML提供模板（template），可以在模板中定義代碼片段，然後在不同的地方調用。

模板的使用非常簡單，文檔中的說的很清楚，那麼關於這個清楚的描述，我對模板有兩點認識：

1、區別於腳本引入可以使用絕對路徑

腳本的引入是只能使用相對地址的，而模板的引入可以使用絕對路徑。

2、模板化不是模塊化

有沒有發現在模板文件中其實少了一個文件，shipin-item-template.js，對，這裡是不能加這個腳本文件的，所以從業務角度上來說，無法將邏輯單獨出來。因此，小程序時原模板只是一個模板不是一個模塊。

五、播放器插件

小程序插件功能是前端不久開放出來的，對於它的認識談一下申請流程。

在小程序的後台管理中，按上面這幾個步驟申請一個插件。當中也有一些對應的插件使用方式。後台如下所示。

總結一下：

上面這些，只是出於一些好奇，測試了一些功能，小程序開發要點遠不只這些了，要想做好小程序開發，需要不斷的地去實踐總結。上面說的這些純屬個人認識，如有不對，歡迎留言指正。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！