一、什么是微信小程序?

  小程序在我的理解中只是高度封装的H5,封装了各种组件。根据官方的说法小程序运行不是在浏览器当中。姑且算是微信的插件吧。

二、小程序不能操纵DOM

  小程序不能直接操纵DOM,鼓励的是数据绑定。例如vue.js这种。所以个人而言感觉跟如果习惯了用JQ去操纵DOM的开发者很不习惯。需要一个习惯的过程。

三、小程序不能引用JQ

  小程序虽然可以引用外部JS。但是我一引用就出现异常。可能需要加以修改才能使用。我心想既然都做小程序了。不如按小程序的那一套走吧。所以就看小程序的API来走了。

四、使用小程序实现基本的切换动画

     html代码

    

     js代码

  

  从上面的代码我们可以看到,我分别用了checkCodeBtnOpacity,checkCodeOpacity控制了两个块的透明度。用于隐藏。

用animationData保存动画数据。

  然后给bindGetCheckCode绑定了一个click事件。

  然后调用了微信的API wx.createAnimation ,然后调用了opacity(1)来显示,然后调用translateY(-100)Y轴平移来做一个上升的效果。

  相关的API参数可以查看小程序API文档,地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html?t=2017112#wxcreateanimationobject

  接着调用this.setData()来改动数据源。切换动画完成。

微信小程序 简单动画入门相关推荐

  1. 微信小程序云开发入门(图文详解)

    以下内容是我第一次微信小程序云开发的一次记录,从真正的0基础入门,到基本掌握一些内容. 其中遇到的一些问题,和根据网上 的一些资料,整理出来真正可用的,实测可行的源代码. 以下放出我的github源码 ...

  2. 微信小程序云开发入门(二)-数据库详解

    微信小程序云开发入门(二)-数据库详解 接上一篇:微信小程序云开发入门(一) 摘要: 因为微信小程序云数据库有点类似传统的关系型数据库,但又有所不同.所以刚入手的时候会有点困扰,经过一段时间的学习和摸 ...

  3. 微信小程序云开发入门(一)

    微信小程序云开发入门(一) 摘要:微信小程序云开发是包含了服务器以及数据库的运行环境,而且只需要开发者进行简单的管理,关键是不用服务器进行权限验证,步骤简单不少,非常适合个人开发者和创业者使用.虽然云 ...

  4. 【微信小程序】从入门到放弃

    前言 关于微信小程序是什么,能做什么的问题,草民在此不在罗列了,随着小程序的天天刷屏,想必您也是来吃一些干货,本篇博文和大家走进微信小程序的从入门到放弃~ 微信小程序开放功能 草民看过很多的文档,微信 ...

  5. 微信小程序开发快速入门

    最近整理文件,找到一个18年写的微信小程序开发快速入门,对于新手还是值得一看的,三年多过去了,可能一些接口已经更新了,不过,整体思想还是没变的. 如果你熟悉JavaScript,那你基本上看完这个文档 ...

  6. 小程序 微信统计表格_微信小程序简单的数据表格及查询功能

    简介: 此项目是一个前后端分离的小demo, 开发工具:idea+微信小程序开发工具 前端:界面布局样式和js的跳转 后端:依靠SpringBoot的业务逻辑层 项目的码云地址: 微信开发工具的使用和 ...

  7. 微信小程序开发从入门到精通

    微信小程序开发从入门到精通 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页.如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识 ...

  8. 《微信小程序:开发入门及案例详解》—— 3.4 小结

    本节书摘来自华章出版社<微信小程序:开发入门及案例详解>一 书中的第3章,第3.4节,作者李骏 边思,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 3.4 小 ...

  9. 知乎爆赞!4504页《微信小程序零基础入门开发文档》+《小程序实战笔记》,你学废了吗?

    前言 微信小程序作为近几年"微服务"的杰出代表,应用十分广泛.小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验 ...

  10. 微信小程序简单好看的表格器

    微信小程序简单好看的表格 1.数据和样式 2.带纵向滑动条的列表纯色简单表格 3.带纵向滑动条的列表间隔色简单表格 微信小程序目前没有 table 标签,需要用到表格,必须自己处理.想要一个简单的比较 ...

最新文章

  1. tplink控制上网设备_上网总有人抢网速如何解决 上网卡慢解决方法【详解】
  2. 苹果电脑快捷键有哪些?mac系统快捷键大全详细介绍(全部)_苹果MAC_操作系统_脚本之家
  3. P3168-[CQOI2015]任务查询系统【主席树】
  4. java前后端分离是否会成为趋势
  5. 地址省市县三级联动------数据库设计
  6. 读书笔记:《稻盛和夫 阿米巴经营 人人都是经营的主角》
  7. Gradle教程——(二)Gradle介绍
  8. 一分钟入门typescript
  9. java--输入两棵二叉树A,B,判断B是不是A的子结构。(ps:我们约定空树不是任意一个树的子结构)
  10. Bugku 哥哥的秘密
  11. eChats折线图更新数据不自然,要闪一下,动态数据解决
  12. 通达信软件接口是什么?能看得到五档报价吗?
  13. caffe内CHECK_EQ等函数意义解释
  14. COMSOL中场路耦合(电路接口与电磁场接口)
  15. php跑满CPU的问题终于发现原因了
  16. 一个程序员老总的年终总结2010版 1
  17. 理解tfrecord读取数据——错误OutOfRangeError (see above for traceback)的解决
  18. Android之世面上程序锁的实现
  19. 谈判技巧---From一亩三分地帖子
  20. layui做折线图_flask+layui+echarts实现前端动态图展示数据效果

热门文章

  1. 电脑显示网络计算机和设备不可见,win10系统网络发现已关闭看不到网络计算机和设备的解决方法...
  2. 图表有很多,你用对了么?
  3. matlab解洛伦兹方程,用MATLAB和Simulink解决微分方程的问题:Lorenz吸引子案例研究【含Matlab代码】...
  4. 用大数据调控旅游市场
  5. 五险一金相关知识(转)
  6. 2019年7月4日西藏17日之旅
  7. 计算机网络 理解拥塞控制
  8. r语言如何计算t分布临界值_R语言系列第四期:R语言单样本双样本差异性检验...
  9. x265 编码一行,以及vbv上溢/下溢之后的处理
  10. c51C语言温度监控器流程图,51单片机温度控制系统原理图+程序+流程图-课程设计_508.doc...