Weex开发之路(二):完成一个ToDoList项目

一、需求分析

在本文实例中,我们将要完成一个ToDoList项目,将会管理里一天的生活安排。拥有以下几个功能。

  1. 新增当天行程
  2. 删除当前行程
  3. 给当天行程打标(设置为已完成)
  4. 数据本地缓存,避免记录的行程被销毁。

最终实现效果如下图所示:

111595403-cff566da20b1a598

二、基础知识预备

2.1:如何获取屏幕宽高

获取屏幕的高度,你就需要了解$getConfig()方法,他可以获取当前全局环境变量和配置信息。

输出信息如下:

121595403-a0ae8d202cdece48

你可以从中得到bundle的Url;屏幕的宽高,device的宽度总是等于750px,屏幕的高度是基于屏幕比例得到的一个高度值。如果你要针对于iOS,做一些特殊的设置,你也可以通过platform字段进行判断,因为我是在浏览器中进行调试,所以这里的platform为Web。

2.2:Weex的生命周期

  • init内一般用于初始化一些内部变量,绑定一些自定义事件,这时还没有数据绑定,没有创建vdom,所以不能通过this获取到data和methods,也不能获取vdom的节点
  • created 完成了数据绑定 ,但还未开始编译模板,可以通过this获取data和methods,但不能获取vdom的节点
  • ready表示渲染完成 ,从子组件往上触发
  • destroyed 组件销毁,比如页面跳转,从子组件开始往上触发

2.3:组件之间通信

参考官方文档:组件之间通信

2.4:本地缓存组件的使用

参考官方文档:storage

三、开发过程

3.1:Weex开发的组件骨架

  • template中主要是组件的引用,大体页面布局。类似于HTML。
  • style中主要是组件的CSS样式引用
  • script中主要就是js的调用。data属于绑定的数据,init、created、ready是Weex的生命周期方法。
  • methods中存放用户定义的一些js事件。
  • computed中主要是对绑定数据data部分进行预处理。

3.2:项目目录结构

131595403-1e8732919c9602eb

  • todolist.we是目录的入口。
  • add_dialog.we是新增事件的弹出框组件。
  • icon.js是存放的一些js中使用的图片常量,主要包括选中和未选中的图片。
  • todolist_bottom.we是底部操作栏,包括新增、完成和操作事件的操作。
  • todolist_cell.we是list中每一个cell组件。

3.2.1:add_dialog.we程序清单和解释

  • 弹出层的背景是一个半透明的阴影部分,高度要和屏幕高度一致,所以我们需要通过this.$getConfig().env.deviceHeight获取高度之后,设置给最外层的style属性。

  • input组件中如果我们要获取字体改变的事件,并且获取当前的text内容的话,我们需要监听oninput事件,然后在该事件中进行数据绑定。

  • 点击确定和取消的时间需要通过This.$dispatch()方法传递给父组件

3.2.2:icon.js程序清单和解释

其他文件中可以通过以下方式进行引用

3.2.3:todolist_bottom.we程序清单和解释

新增完成删除

  • 添加、完成和删除方法都通过this.$dispatch方法把事件传递给父组件进行了调用。

3.2.4:todolist_cell.we程序清单和解释

{{item.title}}{{item.time}}

  • 父组件中通过以下方式切入子组件

    需要在子组件的data区域中也要定义一个item属性,我们才能接收到父组件传给子组件的值。
  • 对显示的数据进行预处理。因为每一cell种图片是否选中item中只有一个check字段与之对应,而check字段只是bool,并不是一个check图片的picUrl。picUrl不在data区域,而是根据data区域的值的逻辑获得,所以我们可以在computed区域中对其的get方法进行操作。

3.2.5:todolist.we程序清单和解释

  • list组件的使用

  • 引用自定义组件的系统自带组件

  • 数据缓存
    获取数据,注意这里需要保存this对象给self,应该在回调方法中,this对象已经不是该类自己了。

保存数据

  • 父组件中注册监听子组件中传递过来的事件

四、总结

本文实现一个简单的todolist实例,大家对于Weex的基本使用应该有了更深的了解。而且这个Demo虽然简单,但是也包括了不少内容,包括父子组件的通信、weex中本地缓存的使用、如何自定义组件、commonJS的封装等等。有时候在使用weex的时候发现,flex布局没有效果,这时候你试着给该组件设置height就会解决问题。
如果你在weex todolist.we 或者 weex todolist.we –qr报错的话

尝试根据提示npm install babel-runtime,应该就会解决问题。
现在我们都是用Weex Playground进行调试的,下面一篇文章我们用来介绍如何在我们自己的应用中接入Weex。

五、参考资料

Weex Github仓库
Weex 英文文档(比较全)
Weex 中文文档(非官方提供,不全)
Weex学习与实践

六、联系方式

新浪微博
github
简书首页

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部