微信小程序也已出来有一段时间了，最近写了几款微信小程序项目，今天来说说感受。首先开发一款微信小程序，最主要的就是针对于公司来运营的，因为，在申请appid(微信小程序ID号)时候，需要填写相关的公司认证信息如，营业执照等再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号。

最后，下载微信小程序开发工具。由于这里，我们更多的关注如何去开发一些app,而不是科谱微信小程序，故在此不在过多的解释，详细的说明，可以去官网帮助文档。

首先，我们拿自己的项目在一步一步的说明并开发吧，下面是一个微信app的截图

在看到上图，小伙伴们大致有一个了解，这个是调试工具中的，一些效果没有在真机上好看。
由于在开发中，本以为画面不是很流利，实际上完全出乎我的意料，动画效果很流畅，可以与ios,andriod app相媲美，以后有时间讲讲开发其它app的相关例子。在介绍这个文章前，假设用户都已看过微信小程序的相关文档。

这个项目基本上是按照微信原有的文件结构来的，并没有额外的去添加特别多的文件结构，因为微信小程序规定，项目文件大小不能超过1M，要求我们尽可能的压缩小程序代码或其它图片文件等，下面是微信app文件结构整体截图

1.app.js 主要是全局公共的js方法声明及调用所在的文件
2.app.json 是小程序整个的配置文件，所以有的页面都在要此注册，不然不允许访问（如下图所示）
3.app.wxss 是小程序全局的css文件，公共css写在此最好不过的了
4.pages下是对应着所有页面，每个页面，可以添加四种类型的文件，.json，.wxss，.wxml，.js （如下图所示）
5.utils 是我们公共的js存放的地方，因为微信小程序要求，每个js文件里的方法不可以直接引用或调用，必须要用 module.exports方法导出，这样pages 下的.js文件才可以调用到我们在此写的js方法。这点特别要注意

1)app.json页面配置及注册：

2)pages页面结构:

下面我们开始详细的讲解每个页面
一、首页
首页分为四个文件组成，如下图所示，具体的页面功能，上面已说过。

下面来看下，index.wxml效果

最上面的“来运吧”标题，在index.json文件下定义的，每个文件都可以用不同的.json来定义，当然代码也可以动态改变它

index.wxml这样来描述

那么swiper是什么东东呢？微信小程序帮助文档这样说明的 swiper滑块视图容器

注意：其中只可放置<swiper-item/>组件，其他节点会被自动删除。

swiper-item仅可放置在<swiper/>组件中，宽高自动设置为100%。

为什么要绑定参数？为什么不直接写入参数呢？好处太多，图片我们不可能写死，从服务器请求图片，同时可以方便的控制我们的相关参数来改变swiper的行为等。
至于参数绑定，官网说的也很清楚，这里不在解释。
2）城市选择及切换

wx.createAnimation(OBJECT)
创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export
方法导出动画数据传递给组件的animation
属性。
注意: export
方法每次调用后会清掉之前的动画操作
OBJECT参数说明：

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

animation
动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。
样式：

旋转：

缩放：

偏移：

倾斜：

矩阵变形：

matrix
(a,b,c,d,tx,ty)
同transform-function matrix

动画队列
调用动画操作方法后要调用 step()
来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation()
一样的配置参数用于指定当前组动画的配置。
示例：

View Code

这里我并不想一个一个的介绍官方的动画说明文档，因为写的很清楚了，而是我想说下一些关于动画的机制。
不管是位移，缩放，旋转，可能都会涉及到三个轴，那就是x,y,z,轴，这三个轴大致这样的如下图

x轴是水平的，y轴在垂直方向上，而z轴，是"指向我们的方向"的一个轴,这点必须清楚，不然动画的很多东西，你就没办法理解了。
好了，我们再来回过头来看看官网的几个动画方法。
旋转：1.rotate(deg)，2.rotateX(deg)，3.rotateY(deg)，4.rotateZ(deg)，5.rotate3d(x,y,z,deg)
1.rotate表示以原点在顺时针旋转一个度数deg范围在-180~180
假如我们要让一个图片，顺时针旋转90度，以原点为中心
可能刚开始图片这样排列的如下图

旋转后，由图A顺时针旋转90度至图B，它是在一个X与Y的平面上与Z轴成垂直90度来顺时针旋转的。

不好意思呀，用QQ绘图工具绘制，可能效果不太好，但是大致的表达了这种示意图，
上图描述了，由图片A由中心点，旋转90度后的效果，那么如何初始化，让图片的原点由(x:0,y:0,z:0)更换为(x:50%,y:50%,z:0)呢？回过头来看下官网教程的wx.createAnimation(OBJECT)方法

animation样式：

对应的wxml界面：

然后，我们为注意到在index.wxss（如下图）里给了绝对定位，目的就是想用left或right来动画交换城市

这里注意一点，animationsSourceCity初始化的时候，css里用了left, 动画时，必须用它的left来"位移"，而不是right
不然会看不到效果，这点，在玩css3动画的时候，就遇到过。同理，下面的animationsDestCity只能用right来"位移"。
为什么有的朋友会想在初始化的时候用left可动画的时候想right的呢？可能考虑到元素的准确的定位原因，毕竟，精确的定位不是一件很容易的事情。 为什么这么说呢？因为考虑到app在其它屏上显示。

从上面的截图可以看到，现实中的问题，中间这块，宽与高是用了px，就是说，我们不希望中间这个旋转按扭自适应不同的手机屏，而希望他能够保持不变。这个时候，如果我们仅仅用left来平移"出发城市"至"到达城市"的坐标处，可能不管你用px还是rpx或其它单位，都达不到精确定位了（为什么？）。
这个时候，换个角度来思考下，我们不需要让它精确的位移至“到达城市”，为什么这么说呢？在”出发城市“移至”到达城市“前的一点很短的时间内，我们让它在0s交换城市（也就是复位但文本内容已交换），因为0s互换城市文本内容，估计没有任何人可以发觉到的。这就需要一个“恰当的时间”。
好了，我们来看看代码：
定义三个动画：

 animation1 = wx.createAnimation({
 2           duration: 300,
 3           timingFunction: 'linear',
 4           transformOrigin: "50%,50%"
 5         })
 6 
 7         this.setData({
 8           animationData: animation1.export()
 9         })
10 
11          animation2 = wx.createAnimation({
12           duration: 300,
13           timingFunction: 'linear'
14         })
15 
16         this.setData({
17           animationSourceCity: animation2.export()
18         })
19 
20          animation3 = wx.createAnimation({
21           duration: 300,
22           timingFunction: 'linear'
23         })
24 
25         this.setData({
26           animationDestCity: animation3.export()
27         })

animation1是旋转图片的动画定义(初始化，具体的参数官网说的很清楚，不多说)。
animation2与animation3分别是”出发城市“与”到达城市“定义
下面我们先来说说animation2,animation3
animation2要完成的是从left ”出发城市“水平移动至”到达城市“坐标
我们看看点击旋转图片时事件：

 animation2.left('600rpx').step()
 2         this.setData({
 3         animationSourceCity: animation2.export()
 4       })
 5 
 6       setTimeout(function(){
 7         animation2.left('30rpx').step({duration: 0, transformOrigin: "50%,50%",timingFunction: 'linear'})
 8         that.setData({
 9            animationSourceCity: animation2.export()
10         })
11       },285)
12 
13       animation3.right('580rpx').step()
14         this.setData({
15         animationDestCity: animation3.export()
16       })
17       
18        setTimeout(function(){
19         animation3.right('30rpx').step({duration: 0, transformOrigin: "50%,50%",timingFunction: 'linear'})
20         that.setData({
21            animationDestCity: animation3.export()
22         })
23       },285)

我们来分析下上面的代码：
在初始化的时候，设置了动画完成时间duration：300ms,紧接着，点击图片开始水平移动600rpx
animation2.left('600rpx').step() this.setData({ animationSourceCity: animation2.export() })这个时候600rpx只是粗略的计算，并不是真正的精确定位，原因上面我们解释很清楚了，移动600rpx所需时间是300ms,紧接着，如果这样的结束的话，很可能位置会错位，所以我们要写一个"特殊的动画"setTimeout(function(){

• animation2.left('30rpx').step({duration: 0, transformOrigin: "50%,50%",timingFunction: 'linear'}) that.setData({ animationSourceCity: animation2.export() }) },285)这个动画表示，在285ms后，将要在0s时间完成"复位"，在0s时间，估计没有人会查觉得到，呵呵，复位的好处，太多了，如果不复位，意味，我们的元素真的交换了，那样事件也给交换了，给我们带来了太多的麻烦，而复位，可以让我们仅仅交换了”城市文本“而不是所有。哈哈~开心，只所以定义285ms，是给一个很短的机会，让人看不到复位的执行,毕竟上面的300ms的水平动画还没有执行完嘛而真正的换交在下面的一句话*

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

同理，right也一样来现实，这里不多说了，有兴趣的可以尝试下。
下面我们来说说，交换按扭图片的旋转动画
如果在点击事件rotate里我们这样写入

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

恩，看起来不错，我们尝试的时候，第一旋转了，然后第二次，第三次。。。并没有旋转。啊呀，愁人的事情又来了。我会不尽的报怨，小程序呀，你的bug又来了。
其实你看官网给出的例子也是如此，旋转一下，再也不旋转了，除非你刷新下页面。
报怨归报怨，纳闷归纳闷，问题还要是解决的。
这是不是我们自己的问题呢？一万个为什么。。。
不是！还记得，在css3动画的时候，确实也这样，我来画图解释下为什么！

图一、旋转前：（注意A点的位置）

完整的旋转代码如下：

1 animation1.rotate(180).step()
 2      
 3      this.setData({
 4         animationData: animation1.export()
 5       })
 6        
 7       var that=this; 
 8       setTimeout(function(){
 9         animation1.rotate(0).step({duration: 0, transformOrigin: "50%,50%",timingFunction: 'linear'})
10         that.setData({
11            animationData: animation1.export()
12         })
13       },300)

意思是，在点击时候，在300ms内旋转180度，同时在300ms后执行一个在0s时间完成新的动画让它复位至0度，下次点击时，它就再次可以旋转了！

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

上面的思想并不难，就是有时候不好发现，或者说，没接触过动画的朋友，一时半时找不出问题所在，写在此，尽可能的让大家少走弯路。

文章来源：微信小程序联盟
原文地址：http://www.wxapp-union.com/portal.php?mod=view&aid=2973