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

首先開發(fā)一款微信小程序，最主要的就是針對于公司來運(yùn)營的，因為，在申請appid(微信小程序ID號)時候，需要填寫相關(guān)的公司認(rèn)證信息如，營業(yè)執(zhí)照等

再次就是用一個未曾開通過公眾號的QQ號或微信號來注冊一個微信小程序號。

最后，下載微信小程序開發(fā)工具。

由于這里，我們更多的關(guān)注如何去開發(fā)一些app,而不是科譜微信小程序，故在此不在過多的解釋，詳細(xì)的說明，可以去官網(wǎng)幫助文檔。

首先，我們拿自己的項目在一步一步的說明并開發(fā)吧，下面是一個微信app的截圖

在看到上圖，小伙伴們大致有一個了解，這個是調(diào)試工具中的，一些效果沒有在真機(jī)上好看。

由于在開發(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):

下面我們開始詳細(xì)的講解每個頁面

一、首頁

首頁分為四個文件組成，如下圖所示，具體的頁面功能，上面已說過。

 下面來看下，index.wxml效果

 最上面的“來運(yùn)吧”標(biāo)題，在index.json文件下定義的，每個文件都可以用不同的.json來定義，當(dāng)然代碼也可以動態(tài)改變它

很簡單吧，標(biāo)題就這么簡單的出現(xiàn)了。

1）接下來看看橫向滾動的banner,

index.wxml這樣來描述

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

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

swiper-item

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

 View Code

看了上面的官方文檔，就可以清楚的知道，這個就是我們類似在寫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ā)城市“與”到達(dá)城市“相互交換，他們不是立即變化，而是中間有一個"位移"效果，同時，那個“交換的圓”也要旋轉(zhuǎn)180度。

這樣體驗感立馬"高上大"。呵呵，不是嗎？下面我們詳細(xì)的來實現(xiàn)它。

我們首先來溫習(xí)下，官網(wǎng)動畫相關(guān)的文檔說明

wx.createAnimation(OBJECT)

創(chuàng)建一個動畫實例animation。調(diào)用實例的方法來描述動畫。最后通過動畫實例的export方法導(dǎo)出動畫數(shù)據(jù)傳遞給組件的animation屬性。

注意: export 方法每次調(diào)用后會清掉之前的動畫操作

OBJECT參數(shù)說明：

var animation = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
})