微信小程序開發(fā)心得,動畫機制詳解,實現(xiàn)用left或right來動畫交換城市。
微信小程序也已出來有一段時間了,最近寫了幾款微信小程序項目,今天來說說感受。
首先開發(fā)一款微信小程序,最主要的就是針對于公司來運營的,因為,在申請appid(微信小程序ID號)時候,需要填寫相關(guān)的公司認證信息如,營業(yè)執(zhí)照等
再次就是用一個未曾開通過公眾號的QQ號或微信號來注冊一個微信小程序號。
最后,下載微信小程序開發(fā)工具。
由于這里,我們更多的關(guān)注如何去開發(fā)一些app,而不是科譜微信小程序,故在此不在過多的解釋,詳細的說明,可以去官網(wǎng)幫助文檔。
首先,我們拿自己的項目在一步一步的說明并開發(fā)吧,下面是一個微信app的截圖
在看到上圖,小伙伴們大致有一個了解,這個是調(diào)試工具中的,一些效果沒有在真機上好看。
由于在開發(fā)中,本以為畫面不是很流利,實際上完全出乎我的意料,動畫效果很流暢,可以與ios,andriod app相媲美,以后有時間講講開發(fā)其它app的相關(guān)例子。
在介紹這個文章前,假設(shè)用戶都已看過微信小程序的相關(guān)文檔。
這個項目基本上是按照微信原有的文件結(jié)構(gòu)來的,并沒有額外的去添加特別多的文件結(jié)構(gòu),因為微信小程序規(guī)定,項目文件大小不能超過1M,要求我們盡可能的壓縮小程序代碼或其它圖片文件等,下面是微信app文件結(jié)構(gòu)整體截圖
1.app.js 主要是全局公共的js方法聲明及調(diào)用所在的文件
2.app.json 是小程序整個的配置文件,所以有的頁面都在要此注冊,不然不允許訪問(如下圖所示)
3.app.wxss 是小程序全局的css文件,公共css寫在此最好不過的了
4.pages下是對應(yīng)著所有頁面,每個頁面,可以添加四種類型的文件,.json,.wxss,.wxml,.js (如下圖所示)
5.utils 是我們公共的js存放的地方,因為微信小程序要求,每個js文件里的方法不可以直接引用或調(diào)用,必須要用 module.exports方法導(dǎo)出,這樣pages 下的.js文件才可以調(diào)用到我們在此寫的js方法。這點特別要注意
1)app.json頁面配置及注冊:
2)pages頁面結(jié)構(gòu):
下面我們開始詳細的講解每個頁面
首頁分為四個文件組成,如下圖所示,具體的頁面功能,上面已說過。
下面來看下,index.wxml效果
最上面的“來運吧”標題,在index.json文件下定義的,每個文件都可以用不同的.json來定義,當然代碼也可以動態(tài)改變它
很簡單吧,標題就這么簡單的出現(xiàn)了。
1)接下來看看橫向滾動的banner,
index.wxml這樣來描述
那么swiper是什么東東呢?微信小程序幫助文檔這樣說明的 swiper滑塊視圖容器
屬性名 | 類型 | 默認值 | 說明 |
---|---|---|---|
indicator-dots | Boolean | false | 是否顯示面板指示點 |
autoplay | Boolean | false | 是否自動切換 |
current | Number | 0 | 當前所在頁面的 index |
interval | Number | 5000 | 自動切換時間間隔 |
duration | Number | 500 | 滑動動畫時長 |
circular | Boolean | false | 是否采用銜接滑動 |
bindchange | EventHandle | current 改變時會觸發(fā) change 事件,event.detail = {current: current} |
注意:其中只可放置<swiper-item/>
組件,其他節(jié)點會被自動刪除。
僅可放置在<swiper/>
組件中,寬高自動設(shè)置為100%。
看了上面的官方文檔,就可以清楚的知道,這個就是我們類似在寫html里用到的banner滑動插件一樣,拿過來就可以使用,多么的方便。
我們的項目中同樣用參數(shù)綁定的方式,輸出的相關(guān)參數(shù)
參數(shù)定義在index.js pages({...})方法中
為什么要綁定參數(shù)?為什么不直接寫入?yún)?shù)呢?好處太多,圖片我們不可能寫死,從服務(wù)器請求圖片,同時可以方便的控制我們的相關(guān)參數(shù)來改變swiper的行為等。
至于參數(shù)綁定,官網(wǎng)說的也很清楚,這里不在解釋。
2)城市選擇及切換
這塊看起來很簡單,實際上很麻煩,如果對動畫不熟悉的朋友,可以會苦惱一番的。
上面的動畫很流暢,可能是因為抓屏工具不太好,這點大可不用關(guān)心。
我們點擊中間的“交換圓”的時候,”出發(fā)城市“與”到達城市“相互交換,他們不是立即變化,而是中間有一個"位移"效果,同時,那個“交換的圓”也要旋轉(zhuǎn)180度。
這樣體驗感立馬"高上大"。呵呵,不是嗎?下面我們詳細的來實現(xiàn)它。
我們首先來溫習(xí)下,官網(wǎng)動畫相關(guān)的文檔說明
創(chuàng)建一個動畫實例animation。調(diào)用實例的方法來描述動畫。最后通過動畫實例的export
方法導(dǎo)出動畫數(shù)據(jù)傳遞給組件的animation
屬性。
注意: export
方法每次調(diào)用后會清掉之前的動畫操作
OBJECT參數(shù)說明:
參數(shù) | 類型 | 必填 | 說明 |
---|---|---|---|
duration | Integer | 否 | 動畫持續(xù)時間,單位ms,默認值 400 |
timingFunction | String | 否 | 定義動畫的效果,默認值"linear",有效值:"linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end" |
delay | Integer | 否 | 動畫延遲時間,單位 ms,默認值 0 |
transformOrigin | String | 否 | 設(shè)置transform-origin,默認為"50% 50% 0" |
transformOrigin: "50% 50%", duration: 1000, timingFunction: "ease", delay: 0 })
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)