同时实现简单记事本对比VUE/Angular/小程序

一前言

最近做完app的一个小功能，就想年底了，做个总结吧。花了两三天的时间，断断续续分别用VUE，Angular以及小程序做了个小的todolist功能，初衷是一方面技术总结，另一方面对比它们的实现方式，进而加深对它们的理解。本来还想用react也实现一下，但由于react的all js思想，和这三个的MVVM模板思想不一样，实现方面，没有强烈的可比性，或者说易混淆性，以后有时间，单独写一下吧。

二小程序

1 开发环境

采用微信提供的开发者工具，在官网注册开发者账号，在后台配置相应的服务域名信息。开发工具很友好，自动本地调试，真机调试等功能，有很好的兼容性。同时微信提供很多组件可以使用，使得开发小程序也更加的简单。开发思想上和vue类似，语法上有很多也很像，在主要语法章节，可以自行对比。

2 项目结构

3 主要语法

         小程序和vue很多地方都很像，git上面有专门用vue开发小程序的npm包。

     2.3.1 数据绑定

{{ item.name }}

    2.3.2 事件绑定（只需要写函数名即可）

        切换选择全部

    2.3.3 属性绑定



    2.3.4 条件指令

        {{ leftCount }}事项可选

    2.3.5 循环指令

        {{ item.name }}

    2.3.6 父子组件通信(和vue类似)

     第一步：编写子组件

     第二步：在子组件的json文件中,将该文件声明为组件{“component”:true}

     第三步：在需要引入的父组件的json文件中,声明引入的组件名和路径{“usingComponents”:{“tab-bar”:’../../components/tabBar/tabBar’}}

    第四步：父组件向子组件通信,

直接将值赋值给一个变量,在子组件properties中,接收传递的值.

        如:父组件

        子组件properties: { currentpage:{ type:String, value:’index’}}

    第五步：子组件向父组件通信

    //myevent事件名,myEventDetail要传递的参数子组件:

     this.triggerEvent(‘myevent’,myEventDetail);

     父组件:

    2.3.7 路由跳转

    wx.navigateTo():将原来的页面保存在页面栈中，只有这样，点击手机返回可以调到上页

    wx.redirectTo()：先清除栈中的原来页面，然后目标页面进栈

    wx.switchTab()：先清除栈中的原来页面，然后目标页面进栈, 跳转的页面必须是tabBar中声明的页面

    wx.navigateBack(): 只能返回页面栈中指定页面,一般和navigateTo配合使用

    2.3.8 钩子函数

    onLoad：页面加载资源

    onReady：页面初次渲染完成

    onShow：页面显示

    onHide：页面隐藏

    onUnload：页面卸载

    onPullDownRefresh：用户下拉动作

    onReachBottom：页面上拉触底事件

    onShareAppMessage：右上角分享

    2.3.9 数据初始化

    data: {    input: '',    todos: [],    leftCount: 0,    allCompleted: false,    logs: [] }访问时，需通过this.data.*来访问

4 效果图

三 VUE+LESS+VUX+WEBPACK3

1 开发环境

主框架VUE以及VUE生态VUE-ROUTER控制路由,UI框架用了移动端开源组件VUX, LESS用于开发样式，是一种预编译的样式。打包用webpack3，和webpack2的区别是配置更简洁清晰，直接使用webpack-dev-server进行构建。

2 项目结构

Build和config是构建项目打包所需的文件，src为真正开发的代码，static为外部静态资源。Src/assets项目所用资源文件，component为可以抽取出来的公共组件，router路由配置，view为视图模块，即单页面应用路由跳转对应的视图。App.vue和main.js为入口文件。

3 主要语法

3.3.1 数据绑定



        {{ item.name }}

    3.3.2 事件绑定（只需要写函数名即可）

        v-on:click 或@click

        切换选择全部

    3.3.3 属性绑定

         v-bind:type 或:type



3.3.4 条件指令

         {{leftCount}} 事项可选

    3.3.5 循环指令



             {{ item.name }}



   3.3.6 父子组件通信(和vue类似)

     第一步：编写子组件

     第二步：在需要使用的父组件中通过import引入,并在components中注册

     第三步：在模板中使用,注意驼峰式转连接符式

    第四步：父组件向子组件通信,

父组件向子组件通信,通过属性绑定的方式,在子组件props中,接收传递的值

        如:父组件

        子组件 props: { currentpage:{ type:String, value:’index’}}

    第五步：子组件向父组件通信

    //myevent事件名,myEventDetail要传递的参数子组件:

子组件:this.$emit(‘myevent’,myEventDetail);

父组件:

3.3.7 路由跳转

Js代码实现: this.$router.push({path:`/describe/id`, params:{ name:'wl' } })

模板实现: go to foo

3.3.8 钩子函数

    beforeCreate：组件实例刚被创建，组件属性计算之前，如data属性等

    created：组件实例创建完成，属性已绑定，但dom还未生成，$el属性还不存在

    beforeMount: 模板编译/挂载之前

    mounted: 模板编译/挂载之后

    beforeUpdate: 组件更新之前

    updated: 组件更新之后

    beforeDestory: 组件销毁前调用

    destroyed: 组件销毁后调用

   3.3.9 数据初始化

    data () {     return {       input:'',       todos:[],       leftCount:0,       allCompleted:false,       logs:[]     } } 使用时，直接访问this.input

4 效果图

四 Angular5+Ionic4+SCSS

1 开发环境

Angular和Vue在开发思想上有很多类似的地方，只是从Angular2之后，引入了TypeScript，另外它的依赖注入是Vue没有的。从学习的曲线上讲，这个要相对难一些。要掌握TypeScript需要有很深厚的Es6基础，以及面向对象的思想。本项目采用Angular4+Ionic4+SCSS，ionic是一个用来开发混合手机应用的,开源的,免费的代码库，利用ionic-cli脚手架直接生成项目结构，项目采用SCSS来开发样式文件。和VUE不同的是，模板，样式，逻辑分别在三个不同的文件中，而VUE的习惯写法是写在同一个文件中，形成单文件的组件或视图。

2 项目结构

Ionic脚手架搭建的项目，src/app是类似vue的app.vue的入口模块。page文件夹放置页面视图，通过ionic generate page **生成，每个视图自动保护.html,.scss,.ts,.module.ts四个文件。分别控制这模板显示，样式布局，业务逻辑以及模块管理。

3 主要语法

4.3.1 数据绑定



        {{item.name}} ody>

   4.3.2 事件绑定（只需要写函数名即可）

        切换选择全部

4.3.3 属性绑定



    4.3.4 条件指令

         {{leftCount}} 事项可选

    4.3.5 循环指令

         {{item.name}}

    4.3.6 路由跳转

         this.router.navigate(['/detail', { id: 'readMore'}])

    3.3.8 钩子函数

        Angular生命周期钩子

        ngOnChanges：检测到输入数据变化，首次触发发生在ngOnInit前。注意对象的属性发生变化时监听不到

        ngOnInit：组件初始化，通常会设置一些初始值

        ngDoCheck：手动触发更新检查

        ngAfterContentInit：内容初始化到组件之后

        ngAfterContentChecked：内容变更检测之后

        ngAfterViewInit：视图初始化之后

        ngAfterViewChecked：视图发生变化检测之后，这个可以用来保证用户视图的及时更新

        ngOnDestroy：组件注销时的清理工作，通常用于移除事件监听，退订可观察对象等

        Ionic生命周期钩子

        ionViewDidLoad：页面所需资源加载完成触发，但还没有进入这个页面，只会调用一次

        ionViewWillEnter：页面即将切换，可以对页面数据进行预处理

        ionViewDidEnter：已经进入新页面时触发

        ionViewWillLeave：页面准备离开时触发

        ionViewDidLeave：页面已经离开时触发，页面处于非激活状态

        ionViewWillUnload：页面中的资源即将被销毁时触发

        ionViewCanEnter：用于限制是否可以进入某个页面

        ionViewCanLeave：用于限制是否可以离开这个页面

    3.3.9 数据初始化

    通过ts文件的构造函数进行数据初始化。直接通过this访问。