博客> Weex开发之路(二):完成一个ToDoList项目
Weex开发之路(二):完成一个ToDoList项目
1小时前 评论:0 阅读:116 月华七子
ios Weex 环境搭建

一、需求分析

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

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

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

 Enter your image description here:

推荐一个iOS高级交流群:624212887,群文件自行下载,不管你是小白还是大牛热烈欢迎进群 ,分享面试经验,讨论技术, 大家一起交流学习成长!希望帮助开发者少走弯路。——点击:加入

二、基础知识预备

2.1:如何获取屏幕宽高

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

var config = this.$getConfig();
console.log(config);

输出信息如下:

 Enter your image description here:

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

2.2:Weex的生命周期

[removed]
  module.exports = {
    data: {},
    methods: {},

    init: function () {
      console.log('在初始化内部变量,并且添加了事件功能后被触发');
    },
    created: function () {
      console.log('完成数据绑定之后,模板编译之前被触发');
    },
    ready: function () {
      console.log('模板已经编译并且生成了 Virtual DOM 之后被触发');
    },
    destroyed: function () {
      console.log('在页面被销毁时调用');
    }
  }
[removed]
  • init内一般用于初始化一些内部变量,绑定一些自定义事件,这时还没有数据绑定,没有创建vdom,所以不能通过this获取到data和* methods,也不能获取vdom的节点
  • created 完成了数据绑定 ,但还未开始编译模板,可以通过this获取data和methods,但不能获取vdom的节点
  • ready表示渲染完成 ,从子组件往上触发
  • destroyed 组件销毁,比如页面跳转,从子组件开始往上触发

2.3:组件之间通信

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

2.4:本地缓存组件的使用

参考官方文档:storage

三、开发过程

3.1:Weex开发的组件骨架

<template>
</template>

&lt;style&gt;
&lt;/style&gt;

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

3.2:项目目录结构

 Enter your image description here:

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

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

<template>
    <div class="container" xss=removed>
        <div class="dialog_container">
            <text class="title">新增事件</text>
            &lt;input class="title-input" placeholder="请输入标题" type="text"
                   oninput="oninputForTitle"&gt;&lt;/input&gt;
            &lt;input class="time-input" placeholder="请输入时间" type="text"
                   oninput="oninputForTime"&gt;&lt;/input&gt;
            <div class="bottom">
                <text class="cancel" xss=removed>取消</text>
                <text class="ok" xss=removed>确定</text>
            </div>
        </div>
    </div>
</template>

&lt;style&gt;
    .container{
        background-color:grey;
        position: fixed;
        width: 750px;
        top:0;
        left: 0;
        align-items: center;
        justify-content: center;
    }
    .dialog_container{
        background-color: white;
        width: 600px;
        height: 310px;
        align-items: center;
    }
    .title{
        margin-top: 20px;
        font-size:40px;
    }
    .title-input{
        margin-top: 20px;
        height: 60px;
        width: 500px;
        font-size: 25px;
        border-width: 1px;
    }
    .time-input{
        margin-top: 20px;
        height: 60px;
        width: 500px;
        font-size: 25px;
        border-width: 1px;
    }
    .bottom{
        margin-top: 30px;
        flex-direction: row;
        width: 400;
    }
    .cancel{
        text-align: center;
        flex: 1;
    }
    .ok{
        text-align: center;
        flex: 1;
    }

&lt;/style&gt;

[removed]
    module.exports = {
        data: {
            screenHeight:0,
            opacity:0.5,
            title: '',
            time: ''
        },
        created: function () {
            var config = this.$getConfig();
            var env = config.env;
            var screenHeight = env.deviceHeight;
            this.screenHeight = screenHeight;
        },
        methods:{
            cancel: function () {
                this.$dispatch('dialog-cancel');
            },
            ok: function () {
                this.$dispatch('dialog-ok',{
                    title : this.title,
                    time : this.time
                });
            },
            oninputForTitle: function(event) {
                this.title = event.value;
            },
            oninputForTime : function (event) {
                this.time = event.value;
            }
        }
    }

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

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

    oninputForTitle: function(event) {
    this.title = event.value;
    },
    oninputForTime : function (event) {
    this.time = event.value;
    }
  • 点击确定和取消的时间需要通过This.$dispatch()方法传递给父组件
    cancel: function () {
    this.$dispatch('dialog-cancel');
    },
    ok: function () {
    this.$dispatch('dialog-ok',{
        title : this.title,
        time : this.time
     });
    },

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

module.exports = {
     check: "http://p1.bpimg.com/567571/1a7a707567b04e4e.png",
    nocheck : "http://p1.bpimg.com/567571/b3e63a0c308955f0.png"
}

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

const icon = require('./icon');
icon.check
icon.nocheck

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

<template>
   <div class="container">
      <text class="text" xss=removed>新增</text>
      <text class="text" xss=removed>完成</text>
      <text class="text" xss=removed>删除</text>
   </div>
</template>

&lt;style&gt;
    .container{
       background-color: aquamarine;
       height: 200px;
       flex-direction: row;
       align-items: center;
    }
   .text{
      flex: 1;
      text-align: center;
      padding: 40px;
   }
&lt;/style&gt;

[removed]
   module.exports = {
      data : {

      },
      methods : {
         add : function () {
            this.$dispatch('bottom-add');
         },
         finish : function () {
            this.$dispatch('bottom-finish');
         },
         delete : function () {
            this.$dispatch('bottom-delete');
         }
      }
   }

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

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

<template>
    <div class="container">
        <image src="{{picUrl}}" class="pic" xss=removed></image>
        <text class="title" xss=removed>{{item.title}}</text>
        <text class="time">{{item.time}}</text>
    </div>
</template>

&lt;style&gt;
    .container{
        background-color:gainsboro;
        height: 80px;
        margin: 10px;
        flex-direction: row;
        align-items: center;
    }
    .pic{
        width: 40px;
        height: 40px;
        margin-left: 20px;
    }
    .title{
        margin-left: 20px;
        flex: 1;
    }
    .time{
        margin-right: 20px;
    }
&lt;/style&gt;

[removed]
    const icon = require('./icon');

    module.exports = {
        data : {
            item:[]
        },
        methods : {
            check : function () {
                this.item.check = !this.item.check;
            }
        },
        computed: {
            picUrl: {
                get :  function () {
                    if(this.item){
                        var check = this.item.check;
                        if(check){
                            return icon.check;
                        }else{
                            return icon.nocheck;
                        }
                    }
                }
            },
            textDecoration: {
                get : function () {
                    if(this.item){
                        var finish = this.item.finish;
                        if(finish){
                            return 'line-through';
                        }else{
                            return 'none';
                        }
                    }
                }
            }

        }
    }

[removed]
  • 父组件中通过以下方式切入子组件
<todolist item="{{item}}"></todolist>

需要在子组件的data区域中也要定义一个item属性,我们才能接收到父组件传给子组件的值。

  • 对显示的数据进行预处理。因为每一cell种图片是否选中item中只有一个check字段与之对应,而check字段只是bool,并不是一个check图片的picUrl。picUrl不在data区域,而是根据data区域的值的逻辑获得,所以我们可以在computed区域中对其的get方法进行操作。
        computed: {
            picUrl: {
                get :  function () {
                    if(this.item){
                        var check = this.item.check;
                        if(check){
                            return icon.check;
                        }else{
                            return icon.nocheck;
                        }
                    }
                }
            },
            textDecoration: {
                get : function () {
                    if(this.item){
                        var finish = this.item.finish;
                        if(finish){
                            return 'line-through';
                        }else{
                            return 'none';
                        }
                    }
                }
            }

        }

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

<template>
    <div xss=removed>
        <div class="list-container">
            <list>
                <cell repeat="{{item in items}}">
                    <todolist item="{{item}}"></todolist>
                </cell>
            </list>
        </div>
        <todolist></todolist>
        <add if="{{showDialog}}"></add>
    </div>
</template>

&lt;style&gt;
    .list-container{
        background-color: bisque;
        flex: 1;
    }
&lt;/style&gt;

[removed]
    //require('weex-components');
    require('./component/todolist_bottom.we');
    require('./component/todolist_cell.we');
    require('./component/add_dialog.we');
    var modal = require('@weex-module/modal');
    var storage = require('@weex-module/storage');

    module.exports = {
        data: {
            platform: 'Web',
            screenHeight : 0,
            showDialog: false,
            items : []
        },
        init: function () {

        },
        created: function () {
            var config = this.$getConfig();
            console.log(JSON.stringify(config));
            var env = config.env;
            var screenHeight = env.deviceHeight;
            this.screenHeight = screenHeight;
            this.platform = env.platform;
            if (this.platform && this.platform === 'Web'){

            }else{
                this.screenHeight = screenHeight - 120;
            }

            var self = this;
            storage.getItem('todolist_cache', function(e) {
                var result = e.result;
                if (result === 'success') {
                    var data = e.data;
                    self.items = JSON.parse(data);
                } else {
                }
            });

            var self = this;
            this.$on('bottom-add', function () {
                self.showDialog = true;
            });
            this.$on('bottom-finish', function () {
                for(var index in this.items){
                    var item = this.items[index];
                    var check = item.check;
                    if(check){
                        item.finish = true;
                        item.check = false;
                    }
                }
                storage.setItem('todolist_cache', JSON.stringify(this.items), function(e) {
                });
            });
            this.$on('bottom-delete', function () {
                var tempArray = [];
                for(var index in this.items){
                    var item = this.items[index];
                    var check = item.check;
                    if(!check){
                        tempArray.push(item);
                    }
                }
                this.items = tempArray;

                storage.setItem('todolist_cache', JSON.stringify(this.items), function(e) {
                });
            });
            this.$on('dialog-cancel', function () {
                this.showDialog = false;
            });
            this.$on('dialog-ok',function (e) {
                this.showDialog = false;
                var detail = e.detail;
                var title = detail.title;
                var time = detail.time;
                this.items.push({
                    title:title,
                    time:time,
                    check:false,
                    finish:false
                });
                storage.setItem('todolist_cache', JSON.stringify(this.items), function(e) {
                });
            });

        },
        ready: function () {

        },
        methods:{

        },

    }
[removed]
  • list组件的使用
<div class="list-container">
    <list>
         <cell repeat="{{item in items}}">
             <todolist item="{{item}}"></todolist>
         </cell>
    </list>
</div>
  • 引用自定义组件的系统自带组件
    require('./component/todolist_bottom.we');
    require('./component/todolist_cell.we');
    require('./component/add_dialog.we');
    var modal = require('@weex-module/modal');//系统自带toast组件
    var storage = require('@weex-module/storage');//系统自带本地数据缓存组件
  • 数据缓存 获取数据,注意这里需要保存this对象给self,应该在回调方法中,this对象已经不是该类自己了。
var self = this;
storage.getItem('todolist_cache', function(e) {
      var result = e.result;
      if (result === 'success') {
          var data = e.data;
          self.items = JSON.parse(data);
      } else {
      }
});
  • 保存数据
storage.setItem('todolist_cache', JSON.stringify(this.items), function(e) {
});
  • 父组件中注册监听子组件中传递过来的事件
this.$on('bottom-add', function () {
});
this.$on('bottom-finish', function () {
});
this.$on('bottom-delete', function () {
});
this.$on('dialog-cancel', function () {
});
this.$on('dialog-ok',function (e) {
});

四、总结

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

yixiangdeMacBook-Pro:ToDoList yixiang$ weex todolist.we 
ERR! ModuleNotFoundError: Module not found: Error: Cannot resolve module 'babel-runtime/core-js/json/stringify' in /Users/yixiang/Weex/Demo/ToDoList 
info Please try to enter directory where your we file saved, and run command 'npm install babel-runtime' 
yixiangdeMacBook-Pro:ToDoList yixiang$ weex todolist.we --qr
ERR! ModuleNotFoundError: Module not found: Error: Cannot resolve module 'babel-runtime/core-js/json/stringify' in /Users/yixiang/Weex/Demo/ToDoList 
info Please try to enter directory where your we file saved, and run command 'npm install babel-runtime' 

尝试根据提示npm install babel-runtime,应该就会解决问题。

五、联系方式

推荐一个iOS高级交流群:624212887,群文件自行下载,不管你是小白还是大牛热烈欢迎进群 ,分享面试经验,讨论技术, 大家一起交流学习成长!希望帮助开发者少走弯路。——点击:加入

如果觉得对你还有些用,就关注小编+喜欢这一篇文章。你的支持是我继续的动力。

下篇文章预告:开源啦,一个iOS中完全解耦的ViewPager实现

文章来源于网络,如有侵权,请联系小编删除。

收藏
0
sina weixin mail 回到顶部