微信小程序制作

實(shí)現(xiàn)效果圖：

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

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

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

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

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

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

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

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

這個(gè)項(xiàng)目基本上是按照微信原有的文件結(jié)構(gòu)來(lá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è)，不然不允許訪問（如下圖所示）

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

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

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

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

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

 下面我們開始詳細(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%。

示例代碼：

<swiper indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for="{{imgUrls}}">
  <swiper-item>
   <image src="{{item}}" class="slide-image" width="355" height="150"/>
  </swiper-item>
 </block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration
Page({
 data: {
  imgUrls: [
   'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
   'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
   'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
  ],
  indicatorDots: false,
  autoplay: false,
  interval: 5000,
  duration: 1000
 },
 changeIndicatorDots: function(e) {
  this.setData({
   indicatorDots: !this.data.indicatorDots
  })
 },
 changeAutoplay: function(e) {
  this.setData({
   autoplay: !this.data.autoplay
  })
 },
 intervalChange: function(e) {
  this.setData({
   interval: e.detail.value
  })
 },
 durationChange: function(e) {
  this.setData({
   duration: e.detail.value
  })
 }
})

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

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

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

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

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

2）城市選擇及切換

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

上面的動(dòng)畫很流暢，可能是因?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)畫相關(guān)的文檔說(shuō)明

wx.createAnimation(OBJECT)

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

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

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

animation

動(dòng)畫實(shí)例可以調(diào)用以下方法來(lái)描述動(dòng)畫，調(diào)用結(jié)束后會(huì)返回自身，支持鏈?zhǔn)秸{(diào)用的寫法。

樣式：

旋轉(zhuǎn)：

縮放：

偏移：

傾斜：

矩陣變形：

動(dòng)畫隊(duì)列

調(diào)用動(dòng)畫操作方法后要調(diào)用 step() 來(lái)表示一組動(dòng)畫完成，可以在一組動(dòng)畫中調(diào)用任意多個(gè)動(dòng)畫方法，一組動(dòng)畫中的所有動(dòng)畫會(huì)同時(shí)開始，一組動(dòng)畫完成后才會(huì)進(jìn)行下一組動(dòng)畫。step 可以傳入一個(gè)跟 wx.createAnimation() 一樣的配置參數(shù)用于指定當(dāng)前組動(dòng)畫的配置。

示例：
 

<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>
Page({
 data: {
  animationData: {}
 },
 onShow: function(){
  var animation = wx.createAnimation({
   duration: 1000,
    timingFunction: 'ease',
  })

  this.animation = animation

  animation.scale(2,2).rotate(45).step()

  this.setData({
   animationData:animation.export()
  })

  setTimeout(function() {
   animation.translate(30).step()
   this.setData({
    animationData:animation.export()
   })
  }.bind(this), 1000)
 },
 rotateAndScale: function () {
  // 旋轉(zhuǎn)同時(shí)放大
  this.animation.rotate(45).scale(2, 2).step()
  this.setData({
   animationData: this.animation.export()
  })
 },
 rotateThenScale: function () {
  // 先旋轉(zhuǎn)后放大
  this.animation.rotate(45).step()
  this.animation.scale(2, 2).step()
  this.setData({
   animationData: this.animation.export()
  })
 },
 rotateAndScaleThenTranslate: function () {
  // 先旋轉(zhuǎn)同時(shí)放大，然后平移
  this.animation.rotate(45).scale(2, 2).step()
  this.animation.translate(100, 100).step({ duration: 1000 })
  this.setData({
   animationData: this.animation.export()
  })
 }
})

這里我并不想一個(gè)一個(gè)的介紹官方的動(dòng)畫說(shuō)明文檔，因?yàn)閷懙暮芮宄耍俏蚁胝f(shuō)下一些關(guān)于動(dòng)畫的機(jī)制。

不管是位移，縮放，旋轉(zhuǎn)，可能都會(huì)涉及到三個(gè)軸，那就是x,y,z,軸，這三個(gè)軸大致這樣的如下圖

 x軸是水平的，y軸在垂直方向上，而z軸，是"指向我們的方向"的一個(gè)軸,這點(diǎn)必須清楚，不然動(dòng)畫的很多東西，你就沒辦法理解了。

好了，我們?cè)賮?lái)回過(guò)頭來(lái)看看官網(wǎng)的幾個(gè)動(dòng)畫方法。

旋轉(zhuǎn)：1.rotate(deg)，2.rotateX(deg)，3.rotateY(deg)，4.rotateZ(deg)，5.rotate3d(x,y,z,deg)

1.rotate表示以原點(diǎn)在順時(shí)針旋轉(zhuǎn)一個(gè)度數(shù)deg范圍在-180~180

假如我們要讓一個(gè)圖片，順時(shí)針旋轉(zhuǎn)90度，以原點(diǎn)為中心

可能剛開始圖片這樣排列的如下圖

  旋轉(zhuǎn)后，由圖A順時(shí)針旋轉(zhuǎn)90度至圖B，它是在一個(gè)X與Y的平面上與Z軸成垂直90度來(lái)順時(shí)針旋轉(zhuǎn)的。

由上述可以看出，圖片的左上角坐標(biāo)是(x:0,y:0,z:0);而我們要旋轉(zhuǎn)一個(gè)圖片，一般不希望在左上角做為旋轉(zhuǎn)點(diǎn)，最多的情況下，就是以圖片的中心點(diǎn)為旋轉(zhuǎn)點(diǎn)(x:50%,y:50%,z:0) z坐標(biāo)是指向我們的坐標(biāo)，就像css里的z-index一樣，我們應(yīng)該把它設(shè)為0，即使你設(shè)為任何一個(gè)數(shù)字，你的視角差也感不到任何不同，因?yàn)椋瑘D片的z軸是垂直我們視線的，故一般設(shè)置為0。

就像下面如圖所示，可能是我們希望的旋轉(zhuǎn)效果：

  不好意思呀，用QQ繪圖工具繪制，可能效果不太好，但是大致的表達(dá)了這種示意圖，

上圖描述了，由圖片A由中心點(diǎn)，旋轉(zhuǎn)90度后的效果，那么如何初始化，讓圖片的原點(diǎn)由(x:0,y:0,z:0)更換為(x:50%,y:50%,z:0)呢？回過(guò)頭來(lái)看下官網(wǎng)教程的wx.createAnimation(OBJECT)方法

其中屬性transformOrigin 已說(shuō)明，默認(rèn)為圖片的中心點(diǎn)，可能是作者的初衷也這么認(rèn)為的，旋轉(zhuǎn)應(yīng)該以”元素“的中心點(diǎn)來(lái)操作應(yīng)用比較多點(diǎn)，這是合情可理的

至此，我們旋轉(zhuǎn)一個(gè)圖片得了到大致的思路。其它的以X軸，Y軸，Z軸旋轉(zhuǎn)與些類似，不在累述。

animation樣式：

如何讓一個(gè)元素從一個(gè)位置從A點(diǎn)移到B點(diǎn)呢？可能通過(guò)上述的樣式屬性在改變”元素“的top bottom left right 達(dá)到效果，

當(dāng)然也可以通過(guò)其它動(dòng)畫方法來(lái)改變，如偏移 translate(x,y,z)。

通過(guò)top bottom left right 樣式屬性來(lái)實(shí)現(xiàn)動(dòng)畫，前提是，這個(gè)”元素“一定是相對(duì)定位或者絕對(duì)定位的，不然是不出效果的，這和寫css里的position:absolute相同的原理。

如果要讓一個(gè)元素或圖片從A點(diǎn)平移至B點(diǎn)，就像下圖所以示

假如初始A坐標(biāo)為(x:10px,y:0px,z:0px)移至B點(diǎn)坐標(biāo)(x:120px,y:0px,z:0px),那樣我們只需改變?cè)氐膌eft或者right即可，

同理，可以用bottom,top來(lái)改變y坐標(biāo)。

好了，到此為止，我們項(xiàng)目的所需動(dòng)畫可能要用到的效果都基本上有了思路。那么下面我們就來(lái)實(shí)現(xiàn)它。

首先，我們?cè)?rdquo;出發(fā)城市'與"到達(dá)城市"以及"旋轉(zhuǎn)圖片"定義如下：

  對(duì)應(yīng)的wxml界面：

 然后，我們?yōu)樽⒁獾皆趇ndex.wxss（如下圖）里給了絕對(duì)定位，目的就是想用left或right來(lái)動(dòng)畫交換城市 

 這里注意一點(diǎn)，animationsSourceCity初始化的時(shí)候，css里用了left, 動(dòng)畫時(shí)，必須用它的left來(lái)"位移"，而不是right

不然會(huì)看不到效果，這點(diǎn)，在玩css3動(dòng)畫的時(shí)候，就遇到過(guò)。同理，下面的animationsDestCity只能用right來(lái)"位移"。

為什么有的朋友會(huì)想在初始化的時(shí)候用left可動(dòng)畫的時(shí)候想right的呢？可能考慮到元素的準(zhǔn)確的定位原因，畢竟，精確的定位不是一件很容易的事情。 為什么這么說(shuō)呢？因?yàn)榭紤]到app在其它屏上顯示。

  從上面的截圖可以看到，現(xiàn)實(shí)中的問題，中間這塊，寬與高是用了px，就是說(shuō)，我們不希望中間這個(gè)旋轉(zhuǎn)按扭自適應(yīng)不同的手機(jī)屏，而希望他能夠保持不變。這個(gè)時(shí)候，如果我們僅僅用left來(lái)平移"出發(fā)城市"至"到達(dá)城市"的坐標(biāo)處，可能不管你用px還是rpx或其它單位，都達(dá)不到精確定位了（為什么？）。

這個(gè)時(shí)候，換個(gè)角度來(lái)思考下，我們不需要讓它精確的位移至“到達(dá)城市”，為什么這么說(shuō)呢？在”出發(fā)城市“移至”到達(dá)城市“前的一點(diǎn)很短的時(shí)間內(nèi)，我們讓它在0s交換城市（也就是復(fù)位但文本內(nèi)容已交換），因?yàn)?s互換城市文本內(nèi)容，估計(jì)沒有任何人可以發(fā)覺到的。這就需要一個(gè)“恰當(dāng)?shù)臅r(shí)間”。

好了，我們來(lái)看看代碼：

定義三個(gè)動(dòng)畫：
 

animation1 = wx.createAnimation({
     duration: 300,
     timingFunction: 'linear',
     transformOrigin: "50%,50%"
    })

    this.setData({
     animationData: animation1.export()
    })

     animation2 = wx.createAnimation({
     duration: 300,
     timingFunction: 'linear'
    })

    this.setData({
     animationSourceCity: animation2.export()
    })

     animation3 = wx.createAnimation({
     duration: 300,
     timingFunction: 'linear'
    })

    this.setData({
     animationDestCity: animation3.export()
    })

animation1是旋轉(zhuǎn)圖片的動(dòng)畫定義(初始化，具體的參數(shù)官網(wǎng)說(shuō)的很清楚，不多說(shuō))。

animation2與animation3分別是”出發(fā)城市“與”到達(dá)城市“定義

下面我們先來(lái)說(shuō)說(shuō)animation2,animation3

animation2要完成的是從left ”出發(fā)城市“水平移動(dòng)至”到達(dá)城市“坐標(biāo)

我們看看點(diǎn)擊旋轉(zhuǎn)圖片時(shí)事件：
 

animation2.left('600rpx').step()
    this.setData({
    animationSourceCity: animation2.export()
   })

   setTimeout(function(){
    animation2.left('30rpx').step({duration: 0, transformOrigin: "50%,50%",timingFunction: 'linear'})
    that.setData({
      animationSourceCity: animation2.export()
    })
   },285)

   animation3.right('580rpx').step()
    this.setData({
    animationDestCity: animation3.export()
   })
   
    setTimeout(function(){
    animation3.right('30rpx').step({duration: 0, transformOrigin: "50%,50%",timingFunction: 'linear'})
    that.setData({
      animationDestCity: animation3.export()
    })
   },285)

我們來(lái)分析下上面的代碼：

在初始化的時(shí)候，設(shè)置了動(dòng)畫完成時(shí)間duration：300ms,緊接著，點(diǎn)擊圖片開始水平移動(dòng)600rpx?
 

animation2.left('600rpx').step()
    this.setData({
    animationSourceCity: animation2.export()
   })

"setTimeout(function(){
    animation2.left('30rpx').step({duration: 0, transformOrigin: "50%,50%",timingFunction: 'linear'})
    that.setData({
      animationSourceCity: animation2.export()
     })
  },285)

這個(gè)動(dòng)畫表示，在285ms后，將要在0s時(shí)間完成"復(fù)位"，在0s時(shí)間，估計(jì)沒有人會(huì)查覺得到，呵呵，復(fù)位的好處，太多了，如果不復(fù)位，意味，我們的元素真的交換了，那樣事件也給交換了，給我們帶來(lái)了太多的麻煩，而復(fù)位，可以讓我們僅僅交換了”城市文本“而不是所有。哈哈~開心，只所以定義285ms，是給一個(gè)很短的機(jī)會(huì)，讓人看不到復(fù)位的執(zhí)行,畢竟上面的300ms的水平動(dòng)畫還沒有執(zhí)行完嘛

而真正的換交在下面的一句話
 

var tempSourceCity=this.data.sourceCity
   var tempDestCity=this.data.destCity
   this.setData({
    sourceCity:tempDestCity,
    destCity:tempSourceCity
   })

同理，right也一樣來(lái)現(xiàn)實(shí)，這里不多說(shuō)了，有興趣的可以嘗試下。

下面我們來(lái)說(shuō)說(shuō)，交換按扭圖片的旋轉(zhuǎn)動(dòng)畫

如果在點(diǎn)擊事件rotate里我們這樣寫入
 

animation1.rotate(180).step()
   
   this.setData({
    animationData: animation1.export()
   })

恩，看起來(lái)不錯(cuò)，我們嘗試的時(shí)候，第一旋轉(zhuǎn)了，然后第二次，第三次。。。并沒有旋轉(zhuǎn)。啊呀，愁人的事情又來(lái)了。我會(huì)不盡的報(bào)怨，小程序呀，你的bug又來(lái)了。

其實(shí)你看官網(wǎng)給出的例子也是如此，旋轉(zhuǎn)一下，再也不旋轉(zhuǎn)了，除非你刷新下頁(yè)面。

報(bào)怨歸報(bào)怨，納悶歸納悶，問題還要是解決的。

這是不是我們自己的問題呢？一萬(wàn)個(gè)為什么。。。

不是！還記得，在css3動(dòng)畫的時(shí)候，確實(shí)也這樣，我來(lái)畫圖解釋下為什么！

圖一、旋轉(zhuǎn)前：（注意A點(diǎn)的位置）

圖二、旋轉(zhuǎn)180度后（注意A的位置）

圖二是點(diǎn)擊旋轉(zhuǎn)圖片后，自己處于180度狀態(tài)，此時(shí)，再次點(diǎn)擊此旋轉(zhuǎn)圖片，意味著，讓它再次從0度旋轉(zhuǎn)到180度，可是我們的代碼是
 

animation1.rotate(180).step()

這行代碼表示，讓它在300ms(初始化創(chuàng)建的時(shí)間)內(nèi)旋轉(zhuǎn)到180度，而是此時(shí)已處理180度啦，你點(diǎn)擊當(dāng)然它不會(huì)再旋轉(zhuǎn)了。它會(huì)不停報(bào)怨”我已在180度了呀，你還想怎么樣？！...“

所以，此時(shí)，我們能不能直接再讓旋轉(zhuǎn)360度，那么它不就相對(duì)于180度后的狀態(tài)又轉(zhuǎn)了180度了嗎？可是看看官網(wǎng)，旋轉(zhuǎn)的范圍是-180~180度，既使沒有這么范圍限制，那么我們也會(huì)折騰死，不是嗎？每次都要180*2，180*3...,表示不服！

我想只要問題找到了，其實(shí)都很簡(jiǎn)單了，此時(shí)估計(jì)都有朋友想到了，就是直接讓它歸0度嘛，這個(gè)歸0度的動(dòng)畫時(shí)間必須要短，不然就要讓人看到了一個(gè)”倒旋轉(zhuǎn)的過(guò)程“，哇，那多么的難看呀，OK，動(dòng)畫嘛，上面我們都有先例，0s復(fù)位到0度，你眼神再好，也查覺不到，嘿嘿。。。

完整的旋轉(zhuǎn)代碼如下：
 

animation1.rotate(180).step()
    
   this.setData({
    animationData: animation1.export()
   })
     
   var that=this; 
   setTimeout(function(){
    animation1.rotate(0).step({duration: 0, transformOrigin: "50%,50%",timingFunction: 'linear'})
    that.setData({
      animationData: animation1.export()
    })
   },300)

意思是，在點(diǎn)擊時(shí)候，在300ms內(nèi)旋轉(zhuǎn)180度，同時(shí)在300ms后執(zhí)行一個(gè)在0s時(shí)間完成新的動(dòng)畫讓它復(fù)位至0度，下次點(diǎn)擊時(shí)，它就再次可以旋轉(zhuǎn)了！
 

animation1.rotate(0).step({duration: 0, transformOrigin: "50%,50%",timingFunction: 'linear'})//歸0度”復(fù)位“

上面的思想并不難，就是有時(shí)候不好發(fā)現(xiàn)，或者說(shuō)，沒接觸過(guò)動(dòng)畫的朋友，一時(shí)半時(shí)找不出問題所在，寫在此，盡可能的讓大家少走彎路。

好了，這部分的動(dòng)畫就全部完成了，下面我們還有首頁(yè)的上下不間斷滾動(dòng)、類似蘋果手機(jī)ios app的滑動(dòng)、刪除效果，以及https api（基于asp.net mvc）的搭建、交互等等，期待著我們一個(gè)一個(gè)的解決呢，這些我準(zhǔn)備將在后面的文章陸陸續(xù)續(xù)的寫出，敬請(qǐng)關(guān)注，謝謝。