微信小(xiao)(xiao)程(cheng)序也已出(chu)來有一段時間了，最近寫了幾款微信小(xiao)(xiao)程(cheng)序項目，今(jin)天來說說感受。

首(shou)先開(kai)發(fa)一(yi)款微信小(xiao)程序，最主(zhu)要的就(jiu)是針(zhen)對(dui)于公司(si)來運(yun)營的，因為，在申請appid(微信小(xiao)程序ID號)時候，需要填寫(xie)相關的公司(si)認(ren)證信息如，營業執照(zhao)等

再次就(jiu)是用一(yi)個未曾開通過公(gong)眾號的QQ號或微(wei)信(xin)號來注冊一(yi)個微(wei)信(xin)小程序號。

最后，下載(zai)微信小(xiao)程序(xu)開(kai)發工具。

由于這里，我們更(geng)多(duo)的關(guan)注如(ru)何去開發一(yi)些app,而不是(shi)科譜(pu)微信小程序，故在此不在過多(duo)的解釋，詳細的說明(ming)，可以去官網幫(bang)助文檔。

首先，我們拿(na)自己的(de)項目在一(yi)(yi)步一(yi)(yi)步的(de)說明并開發(fa)吧，下面(mian)是(shi)一(yi)(yi)個微信app的(de)截圖

在(zai)看到上(shang)圖，小伙伴們大致有一個(ge)了(le)解，這個(ge)是調(diao)試工(gong)具中的，一些效果(guo)沒有在(zai)真(zhen)機上(shang)好看。

由(you)于(yu)在開(kai)發(fa)中，本以為(wei)畫面不是很流利，實際上完全(quan)出乎我的意料，動畫效果(guo)很流暢(chang)，可以與(yu)ios,andriod app相媲美(mei)，以后有時間講講開(kai)發(fa)其它app的相關例子。

在介紹這個文(wen)章(zhang)前，假(jia)設用戶都(dou)已看過微信小(xiao)程序的相(xiang)關文(wen)檔。

這個項目基本上是(shi)按照微信(xin)原有(you)的(de)文(wen)件(jian)結構來的(de)，并沒(mei)有(you)額(e)外(wai)的(de)去添加(jia)特別(bie)多的(de)文(wen)件(jian)結構，因為(wei)微信(xin)小程序規(gui)定，項目文(wen)件(jian)大小不能(neng)超過1M，要求我們盡可能(neng)的(de)壓縮小程序代碼或其它圖片文(wen)件(jian)等，下面是(shi)微信(xin)app文(wen)件(jian)結構整體截圖

1.app.js 主要是全局公(gong)共的js方法(fa)聲明及調用所在的文件

2.app.json 是小程(cheng)序整個的(de)配置文件，所以有的(de)頁面(mian)都(dou)在要(yao)此注(zhu)冊，不然不允許(xu)訪問（如下圖所示）

3.app.wxss 是(shi)小程(cheng)序(xu)全(quan)局的css文件(jian)，公共css寫在此最好不(bu)過的了(le)

4.pages下是對(dui)應(ying)著所(suo)有頁(ye)面，每(mei)個頁(ye)面，可(ke)以添加四種類型的文(wen)件，.json，.wxss，.wxml，.js （如下圖所(suo)示）

5.utils 是我們(men)公共的(de)(de)(de)js存(cun)放的(de)(de)(de)地方(fang)(fang)(fang)，因(yin)為微信(xin)小程序(xu)要(yao)求(qiu)，每個(ge)js文件(jian)里的(de)(de)(de)方(fang)(fang)(fang)法不可(ke)以(yi)直(zhi)接引用(yong)(yong)或(huo)調用(yong)(yong)，必須要(yao)用(yong)(yong) module.exports方(fang)(fang)(fang)法導出，這樣pages 下的(de)(de)(de).js文件(jian)才(cai)可(ke)以(yi)調用(yong)(yong)到(dao)我們(men)在此寫(xie)的(de)(de)(de)js方(fang)(fang)(fang)法。這點特別要(yao)注(zhu)意

1)app.json頁面配置及(ji)注冊：

2)pages頁面結構:

下(xia)面(mian)(mian)我們開始(shi)詳(xiang)細的講(jiang)解每個頁面(mian)(mian)

一、首頁

 首頁分為四(si)個文件組成(cheng)，如(ru)下圖所示，具體的(de)頁面功能，上(shang)面已(yi)說過。

 下面來看下，index.wxml效果

 最上面(mian)的“來運(yun)吧”標題，在index.json文件下定義的，每個文件都可以(yi)用不同(tong)的.json來定義，當然代碼也可以(yi)動態(tai)改變它

很簡單(dan)吧，標(biao)題就這么(me)簡單(dan)的(de)出現(xian)了。

1）接下來看(kan)看(kan)橫向滾動(dong)的banner,

index.wxml這(zhe)樣(yang)來描述

那么(me)swiper是什么(me)東(dong)東(dong)呢？微信小程序幫助文檔這(zhe)樣說明的 swiper滑(hua)塊視圖容器

注意：其中只可放置<swiper-item/>組(zu)件，其他節(jie)點會被自動刪除。

swiper-item

僅可放置在<swiper/>組(zu)件中，寬高自動(dong)設置為100%。

 View Code

看了上面的(de)(de)官方(fang)文檔，就(jiu)可以清楚的(de)(de)知道，這(zhe)個就(jiu)是我們類似(si)在寫(xie)html里用(yong)到的(de)(de)banner滑(hua)動插件一樣，拿(na)過來(lai)就(jiu)可以使用(yong)，多么的(de)(de)方(fang)便。

我們(men)的(de)項目中同樣用參數(shu)綁(bang)定(ding)的(de)方(fang)式，輸出的(de)相關參數(shu)

參(can)數定義在(zai)index.js pages({...})方法(fa)中

 為(wei)什(shen)么(me)要綁(bang)定(ding)參(can)數(shu)(shu)？為(wei)什(shen)么(me)不直接(jie)寫入(ru)參(can)數(shu)(shu)呢？好處(chu)太多，圖(tu)片我們不可能寫死(si)，從服(fu)務(wu)器請求(qiu)圖(tu)片，同時可以方便的(de)(de)控(kong)制(zhi)我們的(de)(de)相(xiang)關參(can)數(shu)(shu)來改變swiper的(de)(de)行為(wei)等。

至于參數綁定，官(guan)網(wang)說的也很(hen)清楚，這里不(bu)在(zai)解釋。

2）城(cheng)市選擇(ze)及切(qie)換(huan)

這塊看(kan)起來(lai)很簡單(dan)，實際上很麻煩(fan)，如果對動畫不熟(shu)悉(xi)的朋(peng)友，可以會(hui)苦惱一番的。

上面的(de)動畫(hua)很流暢，可(ke)能(neng)是因為抓(zhua)屏工(gong)具(ju)不太好(hao)，這點大可(ke)不用關心。

 我們點(dian)擊中間的“交(jiao)換(huan)圓”的時候，”出發城市“與”到(dao)達城市“相互交(jiao)換(huan)，他們不是(shi)立即(ji)變化，而是(shi)中間有一個"位移"效果，同時，那個“交(jiao)換(huan)的圓”也要旋(xuan)轉180度。

這樣體驗感立馬"高上大"。呵(he)呵(he)，不是(shi)嗎？下面我(wo)們(men)詳細的(de)來(lai)實現它。

我們首(shou)先(xian)來溫習下，官網(wang)動(dong)畫相關的文檔說明

wx.createAnimation(OBJECT)

創建一個動畫實例animation。調用實例的方法來描述動畫。最后通過動畫實例的export方法導出動畫數據傳遞給組件的animation屬性。

注意: export 方法(fa)每次調用后會清掉之前的動畫(hua)操(cao)作

OBJECT參數說(shuo)明(ming)：

  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
})