微信小程序也(yě)已出(chū)來(lái)有一段時(shí)間了(le／liǎo)，最近寫了(le／liǎo)幾款微信小程序項目，今天來(lái)說(shuō)說(shuō)感受。

首先開發一款微信小程序，最主要(yào / yāo)的(de)就(jiù)是(shì)針對于(yú)公司來(lái)運營的(de)，因爲(wéi / wèi)，在(zài)申請appid(微信小程序ID号)時(shí)候，需要(yào / yāo)填寫相關的(de)公司認證信息如，營業執照等

再次就(jiù)是(shì)用一個(gè)未曾開通過公衆号的(de)QQ号或微信号來(lái)注冊一個(gè)微信小程序号。

最後，下載微信小程序開發工具。

由于(yú)這(zhè)裏，我們更多的(de)關注如何去開發一些app,而(ér)不(bù)是(shì)科譜微信小程序，故在(zài)此不(bù)在(zài)過多的(de)解釋，詳細的(de)說(shuō)明，可以(yǐ)去官網幫助文檔。

首先，我們拿自己的(de)項目在(zài)一步一步的(de)說(shuō)明并開發吧，下面是(shì)一個(gè)微信app的(de)截圖

在(zài)看到(dào)上(shàng)圖，小夥伴們大(dà)緻有一個(gè)了(le／liǎo)解，這(zhè)個(gè)是(shì)調試工具中的(de)，一些效果沒有在(zài)真機上(shàng)好看。

由于(yú)在(zài)開發中，本以(yǐ)爲(wéi / wèi)畫面不(bù)是(shì)很流利，實際上(shàng)完全出(chū)乎我的(de)意料，動畫效果很流暢，可以(yǐ)與ios,andriod app相媲美，以(yǐ)後有時(shí)間講講開發其它app的(de)相關例子(zǐ)。

在(zài)介紹這(zhè)個(gè)文章前，假設用戶都已看過微信小程序的(de)相關文檔。

這(zhè)個(gè)項目基本上(shàng)是(shì)按照微信原有的(de)文件結構來(lái)的(de)，并沒有額外的(de)去添加特别多的(de)文件結構，因爲(wéi / wèi)微信小程序規定，項目文件大(dà)小不(bù)能超過1M，要(yào / yāo)求我們盡可能的(de)壓縮小程序代碼或其它圖片文件等，下面是(shì)微信app文件結構整體截圖

1.app.js 主要(yào / yāo)是(shì)全局公共的(de)js方法聲明及調用所在(zài)的(de)文件

2.app.json 是(shì)小程序整個(gè)的(de)配置文件，所以(yǐ)有的(de)頁面都在(zài)要(yào / yāo)此注冊，不(bù)然不(bù)允許訪問（如下圖所示）

3.app.wxss 是(shì)小程序全局的(de)css文件，公共css寫在(zài)此最好不(bù)過的(de)了(le／liǎo)

4.pages下是(shì)對應着所有頁面，每個(gè)頁面，可以(yǐ)添加四種類型的(de)文件，.json，.wxss，.wxml，.js （如下圖所示）

5.utils 是(shì)我們公共的(de)js存放的(de)地(dì / de)方，因爲(wéi / wèi)微信小程序要(yào / yāo)求，每個(gè)js文件裏的(de)方法不(bù)可以(yǐ)直接引用或調用，必須要(yào / yāo)用 module.exports方法導出(chū)，這(zhè)樣pages 下的(de).js文件才可以(yǐ)調用到(dào)我們在(zài)此寫的(de)js方法。這(zhè)點特别要(yào / yāo)注意

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

2)pages頁面結構:

下面我們開始詳細的(de)講解每個(gè)頁面

一、首頁

首頁分爲(wéi / wèi)四個(gè)文件組成，如下圖所示，具體的(de)頁面功能，上(shàng)面已說(shuō)過。

 下面來(lái)看下，index.wxml效果

 最上(shàng)面的(de)“來(lái)運吧”标題，在(zài)index.json文件下定義的(de)，每個(gè)文件都可以(yǐ)用不(bù)同的(de).json來(lái)定義，當然代碼也(yě)可以(yǐ)動态改變它

很簡單吧，标題就(jiù)這(zhè)麽簡單的(de)出(chū)現了(le／liǎo)。

1）接下來(lái)看看橫向滾動的(de)banner,

index.wxml這(zhè)樣來(lái)描述

那麽swiper是(shì)什麽東東呢？微信小程序幫助文檔這(zhè)樣說(shuō)明的(de) swiper滑塊視圖容器

注意：其中隻可放置<swiper-item/>組件，其他(tā)節點會被自動删除。

swiper-item

僅可放置在(zài)<swiper/>組件中，寬高自動設置爲(wéi / wèi)100%。

 View Code

看了(le／liǎo)上(shàng)面的(de)官方文檔，就(jiù)可以(yǐ)清楚的(de)知道(dào)，這(zhè)個(gè)就(jiù)是(shì)我們類似在(zài)寫html裏用到(dào)的(de)banner滑動插件一樣，拿過來(lái)就(jiù)可以(yǐ)使用，多麽的(de)方便。

我們的(de)項目中同樣用參數綁定的(de)方式，輸出(chū)的(de)相關參數

參數定義在(zài)index.js pages({...})方法中

 爲(wéi / wèi)什麽要(yào / yāo)綁定參數？爲(wéi / wèi)什麽不(bù)直接寫入參數呢？好處太多，圖片我們不(bù)可能寫死，從服務器請求圖片，同時(shí)可以(yǐ)方便的(de)控制我們的(de)相關參數來(lái)改變swiper的(de)行爲(wéi / wèi)等。

至于(yú)參數綁定，官網說(shuō)的(de)也(yě)很清楚，這(zhè)裏不(bù)在(zài)解釋。

2）城市選擇及切換

這(zhè)塊看起來(lái)很簡單，實際上(shàng)很麻煩，如果對動畫不(bù)熟悉的(de)朋友，可以(yǐ)會苦惱一番的(de)。

上(shàng)面的(de)動畫很流暢，可能是(shì)因爲(wéi / wèi)抓屏工具不(bù)太好，這(zhè)點大(dà)可不(bù)用關心。

我們點擊中間的(de)“交換圓”的(de)時(shí)候，”出(chū)發城市“與”到(dào)達城市“相互交換，他(tā)們不(bù)是(shì)立即變化，而(ér)是(shì)中間有一個(gè)"位移"效果，同時(shí)，那個(gè)“交換的(de)圓”也(yě)要(yào / yāo)旋轉180度。

這(zhè)樣體驗感立馬"高上(shàng)大(dà)"。呵呵，不(bù)是(shì)嗎？下面我們詳細的(de)來(lái)實現它。

我們首先來(lái)溫習下，官網動畫相關的(de)文檔說(shuō)明

wx.createAnimation(OBJECT)

創建一個(gè)動畫實例animation。調用實例的(de)方法來(lái)描述動畫。最後通過動畫實例的(de)export方法導出(chū)動畫數據傳遞給組件的(de)animation屬性。

注意: export 方法每次調用後會清掉之(zhī)前的(de)動畫操作

OBJECT參數說(shuō)明：

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