會HTML語言的同學(xué)做好以下三點(diǎn)就可熟練掌握微信小程序開發(fā)
發(fā)布時間:2017-01-25 09:37:27 | 發(fā)布者:海拔網(wǎng)絡(luò) | 瀏覽次數(shù):34171 | 返回列表 | 返回首頁
微信小程序現(xiàn)在很火,如果企業(yè)想要更大拓展空間那么這個領(lǐng)域值得涉足,合肥APP開發(fā)公司認(rèn)為如果掌握了一些開發(fā)語言設(shè)計小程序并不難。
在語言方面,小程序看似重新定義了一套標(biāo)準(zhǔn)。但實(shí)際上,它們與「前端三件套」——HTML、CSS 和 Java——差不太多。
下面,我們就來對比一下小程序開發(fā)語言和「前端三件套」有什么異同點(diǎn):
HTML 與 WXML:兩者差異比較大,如果之前沒有接觸過 Android 開發(fā),可能會覺得有些頭疼。事實(shí)上,WXML 更像是 Android 開發(fā)中的界面 XML 描述文件,適合于程序界面的構(gòu)建;而 HTML 則傾向于文章的展示(這與 HTML 的歷史有關(guān)),以及互聯(lián)網(wǎng)頁面的構(gòu)建。
WXSS 與 CSS:兩者在語言上幾乎沒有差別,可以直接通用。
JS 文件:小程序的 JS 文件與前端開發(fā)使用的 JS 幾乎沒有區(qū)別,只是小程序的 JS 新增了微信的一些 API 接口,并去除了一些不必要的功能(如 DOM)。
在語言上,小程序完全向?qū)W習(xí)成本最低的前端開發(fā)看齊,但這不代表所有前端開發(fā)者都能無縫遷移。
如果你是從前端開發(fā)轉(zhuǎn)向小程序,就需要注意這兩個點(diǎn):
HTML 與 WXML 兩種文件的構(gòu)建思想差異較大,如果之前只接觸過前端開發(fā),需要一點(diǎn)時間才能適應(yīng) WXML 的編寫方法。
雖然小程序使用的是前端語言,但不代表可以繼續(xù)沿用前端的開發(fā)思想進(jìn)行開發(fā)。小程序?qū)η岸碎_發(fā)的要求從「構(gòu)建界面」升級成「開發(fā)完整應(yīng)用」,前端開發(fā)需要在意識上進(jìn)行轉(zhuǎn)變。
界面構(gòu)建
1. 基本邏輯
WXML 和 WXSS 兩種文件是小程序界面元素聲明及樣式描述文件。
WXML 最大的特點(diǎn)是以視圖(view)的方式串聯(lián)界面元素,并通過程序邏輯(AppService),將信息更新實(shí)時傳遞至視圖層。
view 類似于 HTML 中的 div 元素。在構(gòu)建的時候,view 可以被多級嵌套,view 內(nèi)可以放置任意視覺元素。
需要注意的是,元素一旦超出屏幕之外,用戶就無法看到了,這與 HTML 有較大不同。
比如,我們將手機(jī)屏幕想像成一個舞臺,舞臺之外的演員是無法被觀眾看到的。
小程序有專門用于滾動的視圖。
如果希望界面是一個可以自由滾動的界面(例如列表等),可以使用 scroll-view 視圖,在 WXSS 中將其大小調(diào)整為整個屏幕,并設(shè)置 scroll-y(上下滾動)或 scroll-x(左右滾動)為 true。
小程序中不能直接使用 DOM 控制 WXML 元素。如果需要進(jìn)行數(shù)據(jù)更新,就得使用 WXML 提供的數(shù)據(jù)綁定及元素渲染方法。
還有一點(diǎn)需要注意的是:小程序的柵格排版系統(tǒng)使用的是 Flex 布局,它是 W3C 在 2009 年提出的一種排版標(biāo)準(zhǔn)。
2. 綁定數(shù)據(jù)
對于單個字段,開發(fā)者可以使用數(shù)據(jù)綁定的方法進(jìn)行信息更新。
綁定的數(shù)據(jù)除了在加載的時候可以更新,也可以在 JS 主程序中以函數(shù)形式進(jìn)行更新,更新同樣可以反映到界面上被綁定的數(shù)據(jù)中。
3. 條件渲染與列表(循環(huán))渲染
條件渲染適用于有意外情況提示的頁面(如無法加載列表或詳情時,做出提示等等)。
它的渲染帶有觸發(fā)條件,即符合條件時渲染這個頁面,否則忽略或渲染另一段代碼。
以上就是合肥網(wǎng)站建設(shè)的小編分享的內(nèi)容,希望能為您帶來幫助。更多詳情請關(guān)注:
http://m.nncao1.com/