十年專注于品牌網(wǎng)站建設(shè) 十余年專注于網(wǎng)站建設(shè)_小程序開(kāi)發(fā)_APP開(kāi)發(fā),低調(diào)、敢創(chuàng)新、有情懷!
      南昌百恒網(wǎng)絡(luò)微信公眾號(hào) 掃一掃關(guān)注
      小程序
      tel-icon全國(guó)服務(wù)熱線:400-680-9298,0791-88117053
      掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號(hào)
      掃一掃打開(kāi)百恒網(wǎng)絡(luò)微信小程序

      百恒網(wǎng)絡(luò)

      南昌百恒網(wǎng)絡(luò)

      小程序開(kāi)發(fā)需要關(guān)注的幾個(gè)知識(shí)點(diǎn)

      小程序開(kāi)發(fā) admin 2020-06-22 6021
        內(nèi)容主要涉及到小程序相關(guān)的五個(gè)方面。

        1、Text組件

        2、單位(RPX)

        3、生命周期

        4、template模板

        5、播放器插件

        逐一來(lái)看一下。

        一、Text組件

        小程序中view組件的使用相當(dāng)于就是一個(gè)div標(biāo)簽,而text組件相當(dāng)于就是一個(gè)文本標(biāo)簽b/span這樣子,然而,其實(shí)一段文字我們可以使用text組件來(lái)包裹,也可以不用text組件而直接使用view組件來(lái)包裹,那二者有什么區(qū)別呢?

        很明顯,小程序給TEXT組件賦予了特殊能力。而且使用TEXT組件包裹文件更容易控制它的樣式。所以,通過(guò)一些個(gè)對(duì)比和測(cè)試,我對(duì)text組件的認(rèn)識(shí)就是兩點(diǎn):

        1、用TEXT組件包裹的內(nèi)容好寫(xiě)樣式,來(lái)控制它的顯示UI。

        2、在小程序中只有TEXT包圍的文本才可長(zhǎng)按選中,這一點(diǎn)小程序給text組件賦予了一個(gè)屬性。
        二、單位RPX

        談一下我對(duì)RPX這個(gè)單位的認(rèn)識(shí), 小程序特有的一個(gè)單位。首先,小程序開(kāi)發(fā)可以看成是一個(gè)移動(dòng)web的開(kāi)發(fā)。 竟然是一個(gè)移動(dòng)端的開(kāi)發(fā),那么我們就應(yīng)該用移動(dòng)端的思維去寫(xiě)代碼,就移動(dòng)端有一些特殊的特征需要我們?nèi)タ紤],比如:

        1、最重要的!,如何在不同的機(jī)型上做適配。

        2、模擬器ip6分辨率375和設(shè)計(jì)稿750的因?yàn)樗匀魂P(guān)系。

        這張圖我已經(jīng)在多個(gè)地方講過(guò)了,通過(guò)這張圖我們可以知道,模擬器ip6的375是一個(gè)邏輯分辨率的概念,單位可以認(rèn)為是PT,它和我們?nèi)粘2季种械腃SS像素在數(shù)值大小上是同一個(gè)東西,而物理分辨率(如上750*1334)才是設(shè)備真正分辨率的概念,它和前面說(shuō)的邏輯像素?cái)?shù)值上有一個(gè)對(duì)應(yīng)的關(guān)系(Reader)。也就是表示一個(gè)邏輯像素包含幾個(gè)物理像素問(wèn)題。知道了這些之后,我們就來(lái)看一下小程序序里RPX那點(diǎn)事。

        我們來(lái)看一下RPX的作用,看它解決了一個(gè)什么問(wèn)題。

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

        這里說(shuō)的PX指的是物理分辨率1px。這個(gè)就是小程序的規(guī)定,以ip6的物理像素750X1334為視覺(jué)稿進(jìn)行設(shè)計(jì),只不過(guò)小程序定了個(gè)不一樣的單位叫RPX(responsive pixel)。然而,使用RPX,小程序會(huì)自動(dòng)在不同的分辨率下進(jìn)行轉(zhuǎn)換。從而達(dá)到適配的效果。

        小程序開(kāi)發(fā)需要關(guān)注的幾個(gè)知識(shí)點(diǎn)

        可以理解:小程序中的RPX相當(dāng)于就是移動(dòng)端開(kāi)發(fā)中PX/rem/em等單位用來(lái)表示視覺(jué)上與設(shè)備分辨率上的一個(gè)邏輯關(guān)系 。

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

        RPX是會(huì)根據(jù)不同機(jī)型去做自適應(yīng)調(diào)整的,而有時(shí)候我們不需要去做這么一個(gè)調(diào)整。

        比如,對(duì)于一些個(gè)文字介紹,使用RPX后,小屏幕看起來(lái)就完全不可控,顯示效果上看著比較小,甚至出現(xiàn)看不清楚的情況,還有一些標(biāo)題的情況,可能我們?cè)谌魏螜C(jī)型上想要看到的就是一個(gè)加粗定大的效果。這種情況下,其實(shí)我覺(jué)得我們還是可以使用PX作為單位來(lái)控制比較適合一些。

        三、生命周期

        小程序也有生命周期,其實(shí)整個(gè)開(kāi)發(fā)流程和前端框架React/vue等都類似,所以,這個(gè)我對(duì)比著來(lái)看一下小程序中的生命同期的概念。

        對(duì)于那些對(duì)外暴露的方法,onLoad/onShow/onReady都好理解。在頁(yè)面初始化數(shù)據(jù)的處理方式上有一點(diǎn)需要注意的地方:

        1、在React框架

        實(shí)際上跑完willmount之后會(huì)產(chǎn)生render,然后在執(zhí)行didmount,如果在didmount中如果有數(shù)據(jù)發(fā)生變化,使用setState處理變化后,再去執(zhí)行render。

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

        2、小程序架構(gòu)

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

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

        四、template

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

        模板的使用非常簡(jiǎn)單,文檔中的說(shuō)的很清楚,那么關(guān)于這個(gè)清楚的描述,我對(duì)模板有兩點(diǎn)認(rèn)識(shí):

        1、區(qū)別于腳本引入可以使用絕對(duì)路徑

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

        2、模板化不是模塊化

        有沒(méi)有發(fā)現(xiàn)在模板文件中其實(shí)少了一個(gè)文件,shipin-item-template.js,對(duì),這里是不能加這個(gè)腳本文件的,所以從業(yè)務(wù)角度上來(lái)說(shuō),無(wú)法將邏輯單獨(dú)出來(lái)。因此,小程序時(shí)原模板只是一個(gè)模板不是一個(gè)模塊。

        五、播放器插件

        小程序插件功能是前端不久開(kāi)放出來(lái)的,對(duì)于它的認(rèn)識(shí)談一下申請(qǐng)流程。

        在小程序的后臺(tái)管理中,按上面這幾個(gè)步驟申請(qǐng)一個(gè)插件。當(dāng)中也有一些對(duì)應(yīng)的插件使用方式。后臺(tái)如下所示。
      400-680-9298,0791-88117053
      掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號(hào)
      掃一掃打開(kāi)百恒網(wǎng)絡(luò)小程序

      歡迎您的光顧,我們將竭誠(chéng)為您服務(wù)×

      售前咨詢 售前咨詢
       
      售前咨詢 售前咨詢
       
      售前咨詢 售前咨詢
       
      售前咨詢 售前咨詢
       
      售前咨詢 售前咨詢
       
      售后服務(wù) 售后服務(wù)
       
      售后服務(wù) 售后服務(wù)
       
      備案專線 備案專線
       
      ×
      亚洲国产精品成人网址天堂| 亚洲依依成人精品| 日韩成人精品日本亚洲| 精品久久国产字幕高潮| 99re6这里有精品热视频| 亚欧人成精品免费观看| 久久99国产精品久久99| 国产精品久久久久乳精品爆| 99精品视频在线视频免费观看| 国产精品成人观看视频| 无码日韩精品一区二区人妻| 日韩一区二区免费视频| 亚洲精品无码久久久久牙蜜区| 亚洲精品中文字幕乱码影院| 久久99精品久久久久久久久久 | 嫖妓丰满肥熟妇在线精品| 国产精品精品自在线拍| 国产在线精品免费aaa片| 91视频国产精品| 国产自偷在线拍精品热| 人妻少妇精品视频二区| 国产办公室秘书无码精品99| 国内精品久久久久伊人av| 国产99视频精品免费视频76| 日韩欧毛片免费视频| 国产精品亚洲专区无码不卡| 国产精品va无码二区| 在线播放精品一区二区啪视频 | 91精品日韩人妻无码久久不卡| 久久国产精品久久国产片| 国产亚洲精品xxx| 北条麻妃久久99精品| 在线精品自拍无码| 手机看片在线精品观看| 国产亚洲精品自在线观看| 99久久国产宗和精品1上映| 国产精品日韩深夜福利久久| 亚洲欧洲久久久精品| 精品久久久久久无码人妻热| 精品人妻伦一二三区久久| 中国大陆精品视频XXXX|