十年專注于品牌網站建設 十余年專注于網站建設_小程序開發_APP開發,低調、敢創新、有情懷!
      南昌百恒網絡微信公眾號 掃一掃關注
      小程序
      tel-icon全國服務熱線:400-680-9298,0791-88117053
      掃一掃關注百恒網絡微信公眾號
      掃一掃打開百恒網絡微信小程序

      百恒網絡

      南昌百恒網絡

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

      小程序開發 admin 2020-06-22 6018
        內容主要涉及到小程序相關的五個方面。

        1、Text組件

        2、單位(RPX)

        3、生命周期

        4、template模板

        5、播放器插件

        逐一來看一下。

        一、Text組件

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

        很明顯,小程序給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,小程序會自動在不同的分辨率下進行轉換。從而達到適配的效果。

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

        可以理解:小程序中的RPX相當于就是移動端開發中PX/rem/em等單位用來表示視覺上與設備分辨率上的一個邏輯關系 。

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

        RPX是會根據不同機型去做自適應調整的,而有時候我們不需要去做這么一個調整。

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

        三、生命周期

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

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

        1、在React框架

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

        在willmount中我們可以使用this.state.xxx來初始化變量的值。

        2、小程序架構

        然而,在小程序的生命周期內,我們是否可以在onLoad中使用this.data.xxx來初始化變量呢?

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

        四、template

        WXML提供模板(template),可以在模板中定義代碼片段,然后在不同的地方調用。

        模板的使用非常簡單,文檔中的說的很清楚,那么關于這個清楚的描述,我對模板有兩點認識:

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

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

        2、模板化不是模塊化

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

        五、播放器插件

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

        在小程序的后臺管理中,按上面這幾個步驟申請一個插件。當中也有一些對應的插件使用方式。后臺如下所示。
      400-680-9298,0791-88117053
      掃一掃關注百恒網絡微信公眾號
      掃一掃打開百恒網絡小程序

      歡迎您的光顧,我們將竭誠為您服務×

      售前咨詢 售前咨詢
       
      售前咨詢 售前咨詢
       
      售前咨詢 售前咨詢
       
      售前咨詢 售前咨詢
       
      售前咨詢 售前咨詢
       
      售后服務 售后服務
       
      售后服務 售后服務
       
      備案專線 備案專線
       
      ×
      人妻熟妇乱又伦精品视频| 国产精品日韩AV在线播放| 日韩av无码久久精品免费| 久草视频精品在线| 小呦精品导航网站| 久久精品国产影库免费看| 日韩大片在线永久免费观看网站| 久久棈精品久久久久久噜噜| 九九热这里都是精品| 国产毛片片精品天天看视频| 一本色道久久88精品综合| 日韩精品无码永久免费网站| 久久精品国产99国产精2020丨| 亚洲熟妇AV日韩熟妇在线| 2022国产精品福利在线观看| 国产亚洲美女精品久久久久狼| 日韩视频在线精品视频免费观看| 国产精品林美惠子在线观看| 91精品一区二区三区久久久久| 久久露脸国产精品| 亚洲?V无码成人精品区日韩| 国产精品爽爽va在线观看无码| 精品毛片乱码1区2区3区| 四虎国产精品永久免费网址| 国产精品成人久久久久三级午夜电影| 欧洲精品在线观看| 精品国产乱码一区二区三区| 国产亚洲欧洲精品| 亚洲国产一二三精品无码| 国内精品久久久久影院薰衣草| 无码日韩人妻av一区免费| 色综合久久精品亚洲国产| 无码人妻精品一区二区三区在线| 国产精品jizz视频| 精品国精品国产自在久国产应用男 | 69国产成人精品午夜福中文| 久久精品成人影院| 久久久久这里只有精品| 国产一区二区精品久久岳| 日韩免费的视频在线观看香蕉| www.国产精品.com|