热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

分享一个本人的小程序开发心得

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

首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等

再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号。

最后,下载微信小程序开发工具。

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

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

这块看起来很简单,实际上很麻烦,如果对动画不熟悉的朋友,可以会苦恼一番的。

上面的动画很流畅,可能是因为抓屏工具不太好,这点大可不用关心。

我们点击中间的“交换圆”的时候,”出发城市“与”到达城市“相互交换,他们不是立即变化,而是中间有一个"位移"效果,同时,那个“交换的圆”也要旋转180度。

这样体验感立马"高上大"。呵呵,不是吗?下面我们详细的来实现它。

我们首先来温习下,官网动画相关的文档说明

wx.createAnimation(OBJECT)

创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

注意: export 方法每次调用后会清掉之前的动画操作

OBJECT参数说明:

参数类型必填说明
durationInteger动画持续时间,单位ms,默认值 400
timingFunctionString定义动画的效果,默认值"linear",有效值:"linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
delayInteger动画延迟时间,单位 ms,默认值 0
transformOriginString设置transform-origin,默认为"50% 50% 0"
var animation = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0})

animation

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

样式:

方法参数说明
opacityvalue透明度,参数范围 0~1
backgroundColorcolor颜色值
widthlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
heightlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
toplength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
leftlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
bottomlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
rightlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值

旋转:

方法参数说明
rotatedegdeg的范围-180~180,从原点顺时针旋转一个deg角度
rotateXdegdeg的范围-180~180,在X轴旋转一个deg角度
rotateYdegdeg的范围-180~180,在Y轴旋转一个deg角度
rotateZdegdeg的范围-180~180,在Z轴旋转一个deg角度
rotate3d(x,y,z,deg)同transform-function rotate3d

缩放:

方法参数说明
scalesx,[sy]一个参数时,表示在X轴、Y轴同时缩放sx倍数;两个参数时表示在X轴缩放sx倍数,在Y轴缩放sy倍数
scaleXsx在X轴缩放sx倍数
scaleYsy在Y轴缩放sy倍数
scaleZsz在Z轴缩放sy倍数
scale3d(sx,sy,sz)在X轴缩放sx倍数,在Y轴缩放sy倍数,在Z轴缩放sz倍数

偏移:

方法参数说明
translatetx,[ty]一个参数时,表示在X轴偏移tx,单位px;两个参数时,表示在X轴偏移tx,在Y轴偏移ty,单位px。
translateXtx在X轴偏移tx,单位px
translateYty在Y轴偏移tx,单位px
translateZtz在Z轴偏移tx,单位px
translate3d(tx,ty,tz)在X轴偏移tx,在Y轴偏移ty,在Z轴偏移tz,单位px

倾斜:

方法参数说明
skewax,[ay]参数范围-180~180;一个参数时,Y轴坐标不变,X轴坐标延顺时针倾斜ax度;两个参数时,分别在X轴倾斜ax度,在Y轴倾斜ay度
skewXax参数范围-180~180;Y轴坐标不变,X轴坐标延顺时针倾斜ax度
skewYay参数范围-180~180;X轴坐标不变,Y轴坐标延顺时针倾斜ay度

矩阵变形:

方法参数说明
matrix(a,b,c,d,tx,ty)同transform-function matrix
matrix3d 同transform-function matrix3d

动画队列

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

示例:

从上面的截图可以看到,现实中的问题,中间这块,宽与高是用了px,就是说,我们不希望中间这个旋转按扭自适应不同的手机屏,而希望他能够保持不变。这个时候,如果我们仅仅用left来平移"出发城市"至"到达城市"的坐标处,可能不管你用px还是rpx或其它单位,都达不到精确定位了(为什么?)。

这个时候,换个角度来思考下,我们不需要让它精确的位移至“到达城市”,为什么这么说呢?在”出发城市“移至”到达城市“前的一点很短的时间内,我们让它在0s交换城市(也就是复位但文本内容已交换),因为0s互换城市文本内容,估计没有任何人可以发觉到的。这就需要一个“恰当的时间”。

好了,我们来看看代码:

定义三个动画:

 1     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 ”出发城市“水平移动至”到达城市“坐标

我们看看点击旋转图片时事件:

 1 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点的位置)

图二是点击旋转图片后,自己处于180度状态,此时,再次点击此旋转图片,意味着,让它再次从0度旋转到180度,可是我们的代码是

animation1.rotate(180).step()

这行代码表示,让它在300ms(初始化创建的时间)内旋转到180度,而是此时已处理180度啦,你点击当然它不会再旋转了。它会不停报怨”我已在180度了呀,你还想怎么样?!...“

所以,此时,我们能不能直接再让旋转360度,那么它不就相对于180度后的状态又转了180度了吗?可是看看官网,旋转的范围是-180~180度,既使没有这么范围限制,那么我们也会折腾死,不是吗?每次都要180*2,180*3...,表示不服!

我想只要问题找到了,其实都很简单了,此时估计都有朋友想到了,就是直接让它归0度嘛,这个归0度的动画时间必须要短,不然就要让人看到了一个”倒旋转的过程“,哇,那多么的难看呀,OK,动画嘛,上面我们都有先例,0s复位到0度,你眼神再好,也查觉不到,嘿嘿。。。

完整的旋转代码如下:

 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度”复位“

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

好了,这部分的动画就全部完成了,下面我们还有首页的上下不间断滚动、类似苹果手机ios app的滑动、删除效果,以及https api(基于asp.net mvc)的搭建、交互等等,期待着我们一个一个的解决呢,这些我准备将在后面的文章陆陆续续的写出,敬请关注,谢谢。

以上就是分享一个本人的小程序开发心得的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 3DSMAX制作超现实的体育馆模型
    这篇教程是向脚本之家的朋友介绍3DSMAX制作超现实的体育馆模型方法,教程制作出来的体育馆模型非常地不错,不过教程有点难度,需要有一定基础的朋友学习,推荐到脚本之家,喜欢的朋友可 ... [详细]
  • 默认情况下,Git 使用 Nano 编辑器进行提交信息的编辑,但如果您更喜欢使用 Vim,可以通过简单的配置更改来实现这一变化。本文将指导您如何通过修改全局配置文件来设置 Vim 作为默认的 Git 提交编辑器。 ... [详细]
  • 探讨如何在映射文件中处理重复的属性字段,以避免数据操作时出现错误。 ... [详细]
  • 网络流24题——试题库问题
    题目描述:假设一个试题库中有n道试题。每道试题都标明了所属类别。同一道题可能有多个类别属性。现要从题库中抽取m道题组成试卷。并要求试卷包含指定类型的试题。试设计一个满足要求的组卷算 ... [详细]
  • 为何Compose与Swarm之后仍有Kubernetes的诞生?
    探讨在已有Compose和Swarm的情况下,Kubernetes是如何以其独特的设计理念和技术优势脱颖而出,成为容器编排领域的领航者。 ... [详细]
  • 本文探讨了程序员这一职业的本质,认为他们是专注于问题解决的专业人士。文章深入分析了他们的日常工作状态、个人品质以及面对挑战时的态度,强调了编程不仅是一项技术活动,更是个人成长和精神修炼的过程。 ... [详细]
  • 在1995年,Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后,Bailey 和 Borwein 在他们的论文中发表了这一发现,这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ... [详细]
  • 2023年,Android开发前景如何?25岁还能转行吗?
    近期,关于Android开发行业的讨论在多个平台上热度不减,许多人担忧其未来发展。本文将探讨当前Android开发市场的现状、薪资水平及职业选择建议。 ... [详细]
  • 二维码的实现与应用
    本文介绍了二维码的基本概念、分类及其优缺点,并详细描述了如何使用Java编程语言结合第三方库(如ZXing和qrcode.jar)来实现二维码的生成与解析。 ... [详细]
  • 在日常生活中,支付宝已成为不可或缺的支付工具之一。本文将详细介绍如何通过支付宝实现免费提现,帮助用户更好地管理个人财务,避免不必要的手续费支出。 ... [详细]
  • 本文详细介绍了C++中的构造函数,包括其定义、特点以及如何通过构造函数进行对象的初始化。此外,还探讨了转换构造函数的概念及其在不同情境下的应用,以及如何避免不必要的隐式类型转换。 ... [详细]
  • 本文详细介绍了iOS应用的生命周期,包括各个状态及其转换过程中的关键方法调用。 ... [详细]
  • 本文探讨了一种常见的C++面试题目——实现自己的String类。通过此过程,不仅能够检验开发者对C++基础知识的掌握程度,还能加深对其高级特性的理解。文章详细介绍了如何实现基本的功能,如构造函数、析构函数、拷贝构造函数及赋值运算符重载等。 ... [详细]
  • 随着Linux操作系统的广泛使用,确保用户账户及系统安全变得尤为重要。用户密码的复杂性直接关系到系统的整体安全性。本文将详细介绍如何在CentOS服务器上自定义密码规则,以增强系统的安全性。 ... [详细]
  • 在项目冲刺的最后一天,团队专注于软件用户界面的细节优化,包括调整控件布局和字体设置,以确保界面的简洁性和用户友好性。 ... [详细]
author-avatar
三封封封_391
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有