浅谈使用Vue开发Weex——以智能硬件项目为例

in 默认分类Vue.js大前端 with 0 comment

Weex_logo副本.jpg

介绍

weex是阿里出品的一个类似RN的框架,可以使用前端技术来开发移动应用,实现一份代码支持H5,iOS和Android。最新版本的weex已默认将Vue.js作为前端框架,而wisdom-medical-hardware则是我第一次使用Weex和Vue开发的原生应用,在项目中使用了vue-router等官方组件。下面我们以该项目代码为例,具体了解如何使用weex技术栈进行开发,实现同一份代码在 iOS、Android下都能完整地工作。

这是我Weex开发初体验,其中难免出现常识性的纰漏,还请各位指正~

效果

1619943642.jpeg

代码分析

将项目里的src导入到IDE里,可以看到代码结构如下:
831837101.jpeg

简单说明

入口程序

import App from './App.vue'
import router from './router'
import * as filters from './filters'
import mixins from './mixins'

// register global utility filters.
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

// register global mixins.
Vue.mixin(mixins)

new Vue(Vue.util.extend({ el: '#root', router }, App))

router.push('/')

该段代码主要实现将各个组件和扩展导入,执行各种初始化工作,包括view、router等核心功能。暂且说这么多,后面再详说。

vue-router (https://github.com/vuejs/vue-router)是vue.js生态里重要的一环,是vue.js官方router它与Vue.js核心深度集成,使得使用Vue.js构建单页面应用程序变得轻而易举,包含如下特性:

我们本项目项目来看如何使用vue-router:

// import Vue from 'vue'
import Router from 'vue-router'

import MineDeviceView from './views/MineDeviceView.vue'
import AddDeviceView from './views/AddDeviceView.vue'
import BloodSugarResultView from './views/BloodSugarResultView.vue'
import BloodSugarRunView from './views/BloodSugarRunView.vue'
import BlueToothPreView from './views/BlueToothPreView.vue'
import BlueToothRunView from './views/BlueToothRunView.vue'
import BlueToothErrorView from './views/BlueToothErrorView.vue'
import BloodPressureResultView from './views/BloodPressureResultView.vue'
import BloodPressureRunView from './views/BloodPressureRunView.vue'

Vue.use(Router)

export default new Router({
  // mode: 'abstract',
  routes: [
    { path: '/device-mine', component: MineDeviceView },
    { path: '/device-add', component: AddDeviceView },
    { path: '/blood-sugar-result', component: BloodSugarResultView },
    { path: '/blood-sugar-run', component: BloodSugarRunView },
    { path: '/bluetooth-pre', component: BlueToothPreView },
    { path: '/bluetooth-run', component: BlueToothRunView },
    { path: '/bluetooth-error', component: BlueToothErrorView },
    { path: '/blood-press-result', component: BloodPressureResultView },
    { path: '/blood-press-run',component: BloodPressureRunView },
    { path: '/', redirect: '/device-mine' } 
  ]
})
<router-link :to="...">
router.push(...)
router.push({ path: 'home' })
router.push('home')
router.push({ name: 'user', params: { userId: 123 }})
声明式编程式
<router-link :to="...">router.push(...)
Vue.mixin(mixins)
export default {
  methods: {
    jump (to) {
      if (this.$router) {
        this.$router.push(to)
      }
    }
  }
}

这是抄袭自weex官方demo

filters过滤器

filter是vue.js的一个特性,过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使用管道标志 " | ", 比如:

{{ msg | capitalize }}

// 'abc' => 'ABC'

项目里的定义如下:

export function timeAgo (time) {
  const between = Date.now() / 1000 - Number(time)
  if (between < 3600) {
    return pluralize(~~(between / 60), ' minute')
  } else if (between < 86400) {
    return pluralize(~~(between / 3600), ' hour')
  } else {
    return pluralize(~~(between / 86400), ' day')
  }
}

格式化时间的filter

使用过滤器

<text>{{comment.time|timeAgo}} ago</text>

App.vue

<template>
  <div @androidback="back" id="app" class="app">
    <transition name="fade">
      <router-view style="flex:1"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  methods: {
    back: function() {
      this.$router.back()
    }
  }
}
</script>

<style>
.app {
    background-color: #F7F7F7;
}
</style>

定义了一个div作为body容器,transition 作为过渡动画容器,router-view作为component容器

这里存在一个问题是似乎transition过渡动画的存在是个然并暖

new Vue(Vue.util.extend({ el: '#root', router }, App))
router.push('/')

代码最后一行,router.push('/') , 跳转到'/', 根据上篇的内容,会跳转到/device-mine

export default new Router({
  // mode: 'abstract',
  routes: [
    { path: '/device-mine', component: MineDeviceView },
    { path: '/device-add', component: AddDeviceView },
    { path: '/blood-sugar-result', component: BloodSugarResultView },
    { path: '/blood-sugar-run', component: BloodSugarRunView },
    { path: '/bluetooth-pre', component: BlueToothPreView },
    { path: '/bluetooth-run', component: BlueToothRunView },
    { path: '/bluetooth-error', component: BlueToothErrorView },
    { path: '/blood-press-result', component: BloodPressureResultView },
    { path: '/blood-press-run',component: BloodPressureRunView },
    { path: '/', redirect: '/device-mine' } 
  ]
})

MineDeviceView.vue(我的设备)

<template>
    <div>
        <HeaderNor title="我的设备"></HeaderNor>
        <div v-if="showTag === true">
            <text class="tag1">目前尚未使用任何设备</text>
            <text class="tag2">请点击屏幕右上角添加设备</text>
        </div>
        <div>
            <list style="width: 750px;height: 1294px;top: 2px;">
                <cell class="device-list" v-for="item in items" @click="jumpTo(item.query)">
                    <image class="device-pic" v-bind:src="item.img"></image>
                    <text class="device-title">{{ item.title }}</text>
                    <text class="device-used-time">{{ item.time }}使用</text>
                    <text v-if="item.showValueTitle === true" class="device-subtitle">上次测量结果</text>
                    <text class="device-value">{{ item.lastValue }}</text>
                </cell>
            </list>
        </div>
    </div>
</template>
<script>
    import HeaderNor from '../components/HeaderNor.vue'

    const storage = weex.requireModule('storage')
    const modal = weex.requireModule('modal')

    export default {
        mounted () {
            this.getItem()
        },
        data() {
            return {
                items: [],
                showTag: true
            }
        },
        methods: {
            jumpTo (query) {
                this.jump('/' + query)
//                this.$router.push({path: 'blood-press-result', query: {result: '115,56'}})
            },
            getItem () {
                var vm = this
                var isCatch = false
                storage.getItem('bloodPress', event => {
                    console.log('get value:', event)
                    if (event.data != "undefined") {
                        var jsonobj = JSON.parse(event.data)
                        jsonobj.time = vm.countTimeDifference(jsonobj.time)
                        vm.items.push(jsonobj)
                        isCatch = true
                        if (isCatch) {
                            vm.showTag = false
                        }
                    }
                })
            },
            catchShowTag () {
                console.log(this.items)
                console.log(this.items.length)
                if (this.items.length > 0) {
                    this.showTag = false
                }
            },
            countTimeDifference (dateString) {
                var timeDifference = Date.parse(new Date()) - Date.parse(dateString)
                var timeDifferenceSeconds = parseInt(timeDifference / 1000)
                if (timeDifferenceSeconds > 0 && timeDifferenceSeconds < 3600) {
                    let minute = Math.round(timeDifferenceSeconds / 60)
                    if (minute === 0) {
                        return '1分钟前'
                    } else {
                        return Math.round(timeDifferenceSeconds / 60) + '分钟前'
                    }
                } else if (timeDifferenceSeconds >= 3600 && timeDifferenceSeconds < 86400) {
                    return Math.round(timeDifferenceSeconds / 3600) + '小时前'
                } else if (timeDifferenceSeconds >= 86400) {
                    return Math.round(timeDifferenceSeconds / 86400) + '天前'
                }
            }
        },
        components: {
            HeaderNor
        }
    }
</script>
<style scoped>
    .text {
        font-size: 200px;
    }

    .tag1 {
        position: absolute;
        top: 575px;
        left: 238px;
        color: #838383;
        font-size: 28px;
    }

    .tag2 {
        position: absolute;
        top: 621px;
        left: 208px;
        color: #838383;
        font-size: 28px;
    }

    .device-list {
        height: 160px;
        border-bottom-color: #B4B4B4;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        background-color: #FFFFFF;
    }

    .device-pic {
        height: 100px;
        width: 78px;
        position: relative;
        left: 46px;
        top: 30px;
        bottom: 30px;
    }

    .device-title {
        font-size: 31px;
        position: absolute;
        top: 46px;
        left: 158px;
    }

    .device-used-time {
        position: absolute;
        font-size: 19px;
        top: 95px;
        left: 159px;
        color: #838383;
    }

    .device-subtitle {
        position: absolute;
        top: 57px;
        right: 49px;
        font-size: 19px;
        color: #333333;
    }

    .device-value {
        position: absolute;
        top: 88px;
        right: 49px;
        font-size: 19px;
        color: #333333;
    }
</style>

组件通过props属性传递数据

MineDeviceView

<HeaderNor title="我的设备"></HeaderNor>

HeaderNor组件

Vue.js可以使用 props 把数据传给子组件,prop 是父组件用来传递数据的一个自定义属性,子组件需要显式地用 props 选项声明 "prop":

<template>
    <div>
        <div class="header">
            <div class="in-header">
                <image class="return" src="https://hardware.baichengyiliao.com/static/return-button.jpg"
                       @click="goBack()"></image>
                <image class="add" src="https://hardware.baichengyiliao.com/static/add-button.jpg"
                       @click="jump('/device-add')"></image>
                <text class="title">{{ title }}</text>
            </div>
        </div>
        <div style="height: 88px">
        </div>
    </div>
</template>

<script>
    const native = weex.requireModule('event');
    export default {
        methods: {
            goBack () {
                native.backToMain()
            }
        },
        props: ['title']
    }
</script>

子组件

在MineDeviceView中,包含子组件HeaderNor,使用时需要import
import HeaderNor from '../components/HeaderNor.vue'

<template>
    <div>
        <div class="header">
            <div class="in-header">
                <image class="return" src="https://hardware.baichengyiliao.com/static/return-button.jpg"
                       @click="goBack()"></image>
                <image class="add" src="https://hardware.baichengyiliao.com/static/add-button.jpg"
                       @click="jump('/device-add')"></image>
                <text class="title">{{ title }}</text>
            </div>
        </div>
        <div style="height: 88px">
        </div>
    </div>
</template>

<script>
    const native = weex.requireModule('event');
    export default {
        methods: {
            goBack () {
                native.backToMain()
            }
        },
        props: ['title']
    }
</script>

两个关键点

谈一谈使用Vue.js开发Weex的一些体验

Weex 可以让前端开发人员开发native app程序,值得点赞

缺点是目前坑还比较多,开源社区资源也较少

在开发过程中遇到一些情况

  1. Weex 盒模型基于 CSS 盒模型,每个 Weex 元素都可视作一个盒子。本项目中绝大多数布局,都基于「盒模型」概念。但是,Weex目前对盒模型的支持并不完全。

    • Weex 对于长度值目前只支持像素值,不支持相对单位(em、rem)

    • 设定边框,border 目前不支持类似这样 border: 1 solid #ff0000; 的组合写法

    .button-choice {
        border-radius: 110px;
        height: 221px;
        width: 221px;
        border-color: #B4B4B4;
        border-width: 1px;
        border-style: solid;
        background-color: #5A33BE;
    }

写出来的CSS很多时候都是这个样子的,在web可以一行带带吗搞定的问题,在这个可能需要3行或者4行,并且,weex是不支持全局样式的,所在在style标签中scoped是必须的。

  1. style选择器只支持class

这个在上面的MineDeviceView代码中有所体现,写到最后会发现满屏幕的class。。。

  1. 令人困惑的官方文档
    以下代码来自于官方手册

https://weex.incubator.apache.org/cn/v-0.10/guide/syntax/style-n-class.html

<template>
  <div>
    <text style="font-size: {{fontSize}};">Alibaba</text>
    <text class="large {{textClass}}">Weex Team</text>
  </div>
</template>
<style>
  .large {font-size: 32;}
  .highlight {color: #ff0000;}
</style>
<script>
  module.exports = {
    data: {
      fontSize: 32,
      textClass: 'highlight'
    }
  }
</script>

class="large {{textClass}}"
style="font-size: {{fontSize}};"
这样的写法我相信写过vue的人都知道是不可以的,但是,weex手册中出现了,那么在weex中支持这样的写法吗?答案是不支持。反正我被文档骗了一整天。
正确的写法是使用v-bind指令:v-bind:style="...",那么v-bind:class="..."应该也是支持的吧?结果是不支持

生命周期,到底是ready还是mounted?
官方手册,Weex 和 Vue 2.x 的语法差异
https://weex.incubator.apache.org/cn/references/migration/difference.html

weexvue
生命周期ready: function() {}mounted: function() {}

……
实际情况当然是mounted,被骗一天+1

对动画的支持
weex提供了animation模块,我们可以很方便的在页面中加入动画,利用相关的API,可以设置动画对象、动画类型、持续时间、回调函数,但是我们无法手动结束动画

本地存储
相比较动画,weex的storage做的还是不错的。
storage 是一个在前端比较常用的模块,可以对本地数据进行存储、修改、删除,并且该数据是永久保存的,除非手动清除或者代码清除。但是,storage 模块有一个限制就是浏览器端(H5)只能存储小于5M的数据,因为在 H5/Web 端的实现是采用 HTML5 LocalStorage API。而 Android 和 iOS 这块是没什么限制的。


storage.setItem('bloodPress', vm.data.jsonString, event => {
    console.log('set success')
})

很容易就可以保存相关的数据,和使用h5的localStorage很相似。

Comments are closed.