微信小程序也已出來(lái)有一段時(shí)間了，最近寫(xiě)了幾款微信小程序項(xiàng)目，今天來(lái)說(shuō)說(shuō)感受。

首先開(kāi)發(fā)一款微信小程序，最主要的就是針對(duì)于公司來(lái)運(yùn)營(yíng)的，因?yàn)?，在申?qǐng)appid(微信小程序ID號(hào))時(shí)候，需要填寫(xiě)相關(guān)的公司認(rèn)證信息如，營(yíng)業(yè)執(zhí)照等

再次就是用一個(gè)未曾開(kāi)通過(guò)公眾號(hào)的QQ號(hào)或微信號(hào)來(lái)注冊(cè)一個(gè)微信小程序號(hào)。

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

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

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

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

由于在開(kāi)發(fā)中，本以為畫(huà)面不是很流利，實(shí)際上完全出乎我的意料，動(dòng)畫(huà)效果很流暢，可以與ios,andriod app相媲美，以后有時(shí)間講講開(kāi)發(fā)其它app的相關(guān)例子。

在介紹這個(gè)文章前，假設(shè)用戶都已看過(guò)微信小程序的相關(guān)文檔。

這個(gè)項(xiàng)目基本上是按照微信原有的文件結(jié)構(gòu)來(lái)的，并沒(méi)有額外的去添加特別多的文件結(jié)構(gòu)，因?yàn)槲⑿判〕绦蛞?guī)定，項(xiàng)目文件大小不能超過(guò)1M，要求我們盡可能的壓縮小程序代碼或其它圖片文件等，下面是微信app文件結(jié)構(gòu)整體截圖

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

2.app.json 是小程序整個(gè)的配置文件，所以有的頁(yè)面都在要此注冊(cè)，不然不允許訪問(wèn)（如下圖所示）

3.app.wxss 是小程序全局的css文件，公共css寫(xiě)在此最好不過(guò)的了

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

5.utils 是我們公共的js存放的地方，因?yàn)槲⑿判〕绦蛞螅總€(gè)js文件里的方法不可以直接引用或調(diào)用，必須要用 module.exports方法導(dǎo)出，這樣pages 下的.js文件才可以調(diào)用到我們?cè)诖藢?xiě)的js方法。這點(diǎn)特別要注意

1)app.json頁(yè)面配置及注冊(cè)：

2)pages頁(yè)面結(jié)構(gòu):

下面我們開(kāi)始詳細(xì)的講解每個(gè)頁(yè)面

一、首頁(yè)

首頁(yè)分為四個(gè)文件組成，如下圖所示，具體的頁(yè)面功能，上面已說(shuō)過(guò)。

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

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

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

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

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

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

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

swiper-item

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

 View Code

看了上面的官方文檔，就可以清楚的知道，這個(gè)就是我們類(lèi)似在寫(xiě)html里用到的banner滑動(dòng)插件一樣，拿過(guò)來(lái)就可以使用，多么的方便。

我們的項(xiàng)目中同樣用參數(shù)綁定的方式，輸出的相關(guān)參數(shù)

參數(shù)定義在index.js pages({...})方法中

 為什么要綁定參數(shù)？為什么不直接寫(xiě)入?yún)?shù)呢？好處太多，圖片我們不可能寫(xiě)死，從服務(wù)器請(qǐng)求圖片，同時(shí)可以方便的控制我們的相關(guān)參數(shù)來(lái)改變swiper的行為等。

至于參數(shù)綁定，官網(wǎng)說(shuō)的也很清楚，這里不在解釋。

2）城市選擇及切換

這塊看起來(lái)很簡(jiǎn)單，實(shí)際上很麻煩，如果對(duì)動(dòng)畫(huà)不熟悉的朋友，可以會(huì)苦惱一番的。

上面的動(dòng)畫(huà)很流暢，可能是因?yàn)樽テ凉ぞ卟惶?，這點(diǎn)大可不用關(guān)心。

我們點(diǎn)擊中間的“交換圓”的時(shí)候，”出發(fā)城市“與”到達(dá)城市“相互交換，他們不是立即變化，而是中間有一個(gè)"位移"效果，同時(shí)，那個(gè)“交換的圓”也要旋轉(zhuǎn)180度。

這樣體驗(yàn)感立馬"高上大"。呵呵，不是嗎？下面我們?cè)敿?xì)的來(lái)實(shí)現(xiàn)它。

我們首先來(lái)溫習(xí)下，官網(wǎng)動(dòng)畫(huà)相關(guān)的文檔說(shuō)明

wx.createAnimation(OBJECT)

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

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

OBJECT參數(shù)說(shuō)明：

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