微信小程序出來已有段時間,雖還在內(nèi)測階段。利用空閑時間,我把蜂貸微信項目部分遷移到小程序上。1.目錄結(jié)構(gòu)小程序的主體由三個文件組成,這三個文件要放在項目的根目錄下,分別是app.js 配置小程序的邏輯app.json ...
微信小程序出來已有段時間,雖還在內(nèi)測階段。利用空閑時間,我把蜂貸微信項目部分遷移到小程序上。
小程序的主體由三個文件組成,這三個文件要放在項目的根目錄下,分別是
app.js 配置小程序的邏輯
app.json 公共設置
app.wxss 公共樣式
小程序可以自定義 page,但是 page 需要在 app.json 中做出聲明,不然IDE會報錯,找不到頁面。小程序的頁面由四個文件組成,分別是
.js文件 頁面邏輯
.wxml 視圖層文件,頁面結(jié)構(gòu)
.wxss 樣式文件,頁面樣式表
.json 文件,配置文件,頁面配置
app.json 決定頁面文件的路徑、窗口表現(xiàn)、設置網(wǎng)絡超時時間、設置多少 tab 。
在 pages 對象里定義頁面路徑,pages 接受由字符串組成的數(shù)組,pages數(shù)組的第一個元素就是小程序的首頁。
window 用于設置小程序的狀態(tài)欄、導航條、標題、窗口背景色。
tabBar 配置項指定 tab 欄的表現(xiàn),以及 tab 切換時顯示的對應頁面。
networkTimeout 用來設置各種網(wǎng)絡請求超時時間
debug 是布爾類型,用來配置是否在開發(fā)者工具中開啟 debug 模式
在小程序中,你不能繼續(xù)用 html 中的標簽來構(gòu)造你的頁面,MANA 框架有特定的容器組件,view,scroll-view 以及 swiper。
view 是視圖容器,類似于 html 中的 div ,但是不同的是,用 view 包裹的內(nèi)容,在超出設備窗口的時候,它實現(xiàn)的效果如 css 樣式設置的 overflow:hidden
如果你需要實現(xiàn)類似通訊錄或則聊天列表的滾動效果,你需要使用 scroll-view 滾動容器組件,它實現(xiàn)的效果如 css 樣式設置的 overflow:scroll 。
swiper 是滑塊視圖組件,如果你要實現(xiàn)類似輪播圖的效果的話,他是你的不二之選,你能通過屬性配置來控制是否顯示圓點,是否自動播放,切換時間,以及切換間隔時間等。小程序的MANA也實現(xiàn)了數(shù)據(jù)的綁定,寫法類似于 Angular 和 Vue,通過雙括號的形式 如:{{data}} 即可,值得注意的是,如果你寫在容器(為了便于描述和理解,下文會以標簽來描述)于之間的話,你直接把變量寫在雙括號里即可,如:<view>{{data}}</view> ,但是如果你給標簽的屬性綁定變量,你需要將雙括號放在雙引號內(nèi),如:<view wx:if=”{{data}}”></view>,類似于Angular 和 Vue,你也能在雙括號內(nèi)進行簡單的運算,如:<view hidden=”{flag?true:false}”></view>。
細心的同學可能發(fā)現(xiàn)了在介紹數(shù)據(jù)綁定的時候我們用了wx:if 的屬性,這是 MANA 提供的條件渲染,通過判斷 wx:if 傳布爾值(非布爾類型進行隱士轉(zhuǎn)化)來控制是否渲染標簽中的內(nèi)容。在 MANA 中還有一個屬性能控制內(nèi)容的顯隱,不同的是,wx:if 只有在為 true 的時候才回去渲染標簽中的內(nèi)容,而 hidden 始終會渲染內(nèi)容,只是根據(jù)條件來控制內(nèi)容的顯示與否。
此外MANA 也為我們提供了較為實用的列表渲染,wx:for 接受一個數(shù)組,在頁面中能根據(jù)數(shù)組中的值來渲染頁面列表
除了使用列表渲染來復用一塊視圖外,你還可以通過模版來進行復用,你能在 template 中定義一塊代碼片段,然后在不同的頁面中引用,如:
<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>
除了 template 外,MANA 還提供了另外兩種方式來進行應用和復用,import 和 include ,import 有作用域的概念,他只會引用目標文件中定義的模版。include可以將目標文件除了<template/>的整個代碼引入,相當于是拷貝到include位置上。
除MANA 同樣也定義了常用的事件分類,如
touchstart 手指觸摸動作開始
touchmove 手指觸摸后移動
touchcancel 手指觸摸動作被打斷,如來電提醒,彈窗
touchend 手指觸摸動作結(jié)束
tap 手指觸摸后馬上離開
longtap 手指觸摸后,超過350ms再離開
定義在 app.wxss 中的樣式為全局樣式,作用于每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式,只作用在對應的頁面,并會覆蓋 app.wxss 中相同的選擇器。如果你寫過 css ,那你就能輕松駕馭 wxss,wxss 在選擇器上做了限制,目前支持的選擇器有:
.class 如:.intro 選擇所有擁有 class=”intro” 的組件
#id
如:#firstname
選擇擁有 id=”firstname” 的組件
element 如: view 選擇所有 view 組件
element, 如: element view checkbox 選擇所有文檔的 view 組件和所有的 checkbox 組件
::after 如:view::after 在 view 組件后邊插入內(nèi)容
::before 如:view::before 在 view 組件前邊插入內(nèi)容
開發(fā)過移動端的前端er 都知道,蘋果手機有物理像素和邏輯像素的區(qū)別,比如設備的像素是350px,設計稿的像素是750px;一般在開發(fā)過程中,我們會使用自動化構(gòu)建工具去做像素轉(zhuǎn)化,或則是使用預處理器定義像素轉(zhuǎn)化函數(shù)進行處理,在小程序的開發(fā)中,大可不必這么麻煩,小程序提供了一個 rpx 的單位,你可以直接寫上你在設計稿中測量的數(shù)值即可,小程序開發(fā)工具在編譯過程中會自動幫你做轉(zhuǎn)換。
在下次小程序分享《小程序開發(fā)踩坑(二)》的時候,會教大家如何與后端進行數(shù)據(jù)交互,歡迎感興趣的小伙伴訂閱博客。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務