vue 在weex 中的不同

John Doe
2019-09-09

vue在weex中的不同

语法差异

1、“html标签”
目前Weex支持了基本容器（div）、文本（text）、图片（image）、视频（video）等组件，注意是组件，不是标签，虽然使用起来和html标签很像，至于其他标签基本可以使用以上组件组合而成。

2、 Weex环境中没有DOM
因为Wexx解析vue 得到的并不是dom,而是原生布局树。

3、支持有限的事件
并不支持 Web 中所有的事件类型，详情请参考《通用事件》

4、没有BOM 但可以调用原生API
在 Weex 中能够调用移动设备原生 API，使用方法是通过注册、调用模块来实现。其中有一些模块是 Weex 内置的，如 clipboard 、 navigator 、storage 等。
《clipboard 剪切板》
《navigator 导航控制》
《storage 本地存储 》

为了保持框架的通用性，Weex 内置的原生模块有限，不过 Weex 提供了横向扩展的能力，可以扩展原生模块，具体的扩展方法请参考《iOS 扩展》 和《Android 扩展》。

样式差异

Weex 中的样式是由原生渲染器解析的，出于性能和复杂度的考虑，Weex对css的特性做了一些取舍

1、Weex 中只支持单个类名选择器，不支持关系选择器，也不支持属性选择器。

2、组件级别的作用域，为了保持web和native的一致性，需要<style scoped> 写法。

3、支持了基本的盒模型和flexbox布局，详情可参考Weex通用样式文档，但是需要注意的是：

  • 不支持display：none；可用opacity：0；（opacity <= 0.01时，元素可点透）
  • 样式属性暂不支持简写（提高解析效率）
  • flex布局需要web的兼容性
  • css 不支持3D变换

Vue 语法

举个例子，以下是严选App Demo 首页的简化代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<template>
    <div class="wrapper">
        <text class="iconfont"></text>
        <home-header></home-header>
        <scroller class="main-list" offset-accuracy="300px">
            <refresher></refresher>
            <div class="cell-button" @click="jumpWeb('https://m.you.163.com')">
                <yx-slider :imageList="YXBanners" ></yx-slider>
            </div>
            <div class="cell-button">
                <block-1 :title="block1.title" :items="block1.items"></block-1>
            </div>
        </scroller>
    </div>
</template>
<style scoped>
    .iconfont {  font-family:iconfont;  }
    .main-list{ position: fixed; top: 168px; bottom: 90px; left: 0; right: 0;  }
</style>
<script>
    var navigator = weex.requireModule('navigator');
    import util from '../../src/assets/util';
    import Header from '../components/Header.vue';
    import refresher from '../components/refresh.vue';
    import YXSlider from '../components/YXSlider.vue';
    import Block1 from '../components/Block1.vue';
    export default {
        components: {
            'home-header': Header,
            'refresher': refresher,
            'yx-slider': YXSlider,
            'block-1': Block1
        },
        data () {
            return {
                YXBanners: [
                    { title: '', src: 'http://doc.zwwill.com/yanxuan/imgs/banner-1.jpg'},
                    { title: '', src: 'http://doc.zwwill.com/yanxuan/imgs/banner-2.jpg'},
                    { title: '', src: 'http://doc.zwwill.com/yanxuan/imgs/banner-3.jpg'}
                ]
            }
        },
        methods: {
            jumpWeb (_url) {
                const url = this.$getConfig().bundleUrl;
                navigator.push({
                    url: util.setBundleUrl(url, 'page/web.js?weburl='+_url) ,
                    animated: "true"
                });
            }
        }
    }
</script>

Weex 工程中常用的标签有<div />，<text />，<image />，<video />（组件另算），由此四种标签基本可以满足绝大多数场景的需求，虽说此标签同 web 工程下的标签用法一致，但此处的标签已不再是我们前端口中常提的 html 标签，而且名存实亡的 Weex 标签，确切讲是 Weex 组件。

通过weex-loader、vue-loader、weex-vue-render的解析最终转换输出的便是实际的组件，有此设计只是为了完成「web开发体验」的目标。但是我们身为上层的开发人员要清楚自己每天「把玩」的到底是个什么「鬼」。

阉割版css

其实用阉割版来形容 Weex 的 css 支持度并不合适，但如果从「web开发体验」的角度来衡量，那么这个形容词也是可以理解的。（此处对 Weex 寄有厚望^_^）

单位

Weex 中的所有 css 属性值的单位均为 px，也可省略不写，系统会默认为 px 单位。

选择器

Weex 中只支持单个类名选择器，不支持关系选择器，也不支持属性选择器。

1
2
3
4
5
6
7
8
9
10
11
12
/* 支持单个类名选择器 */
.one-class {
  font-size: 36px;
}
/* 不支持关系选择器 */
.parent > .child {
  padding-top: 10px;
}
/* 不支持属性选择器，不支持 `v-cloak` 指令 */
[v-cloak] {
  color: #FF6600;
}

这个只是对样式定义的限制，不影响样式类名的使用，在标签中可以添加多个样式类名，如：

1
2
3
<template>
  <div class="one two three"><div>
</template>

盒模型

weex支持css基本的盒模型结构，但需要注意的是

  • box-sizing 属性的默认值为 border-box
  • margin、padding、border 等属性暂时不支持合并简写

FlexBox

Weex 中对 flexbox 布局支持度很高，但依然有部分属性并不支持，如 align-items:baseline;、align-content:space-around;、align-self:wrap_reverse;等。

具体 Weex 对 flexbox 的支持和布局算法，可通过此文进行了解由 FlexBox 算法强力驱动的 Weex 布局引擎，此处便不再赘述。

显隐性

在 Weex 的 ios 和 android 端，并不支持 display 属性。
因此，不能使用 display:none; 来控制元素的显隐性，所以 vue 语法中的 v-show 条件渲染是不生效的。
我们可以使用 v-if 代替，或者用 opacity:0; 来模拟。
需要注意的是，ios和android端并不能使用 opacity:0; 来完全模拟 visibility: hidden;，因为，当
opacity 的只小于等于 0.01 时，native 控件便会消失，占位空间还在，但用户无法进行交互操作，点击时会发生点透效果。

css3

Weex 支持 css3 属性，虽然支持并不够，但相较 React Native 的「不能用」已经是强大很多了。
以下几种属性我们在开发前需要知道她的支持度

  • transform: 目前只支持2D转换
  • transition: v0.16.0+的sdk版本支持css过度动画，可根据情况配合内组件animation 实现动画交互
  • linear-gradient:目前只支持双色变色
  • font-family: Weex 目前只支持tff和woff字体格式的自定义字体

第三方工具库

由于使用了增强版的 webpak 打包工具 weexpack，支持第三方框架也是件自然而然的事情。
常用的有 vuex、vue-router 等，可根据项目实际情况引入需要的第三方工具库

npm 包管理

npm 包管理是前端开发朋友们再熟悉不过的包管理方式了。这也是为什么 React Native 和 Weex 都选择这种管理方式的原因。
以下是本工程的 package.json 文件，这里就不做讲解了，不熟悉的朋友点这里->NPM 使用介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
{
  "name": "yanxuan-weex",
  "version": "1.0.0",
  "description": "a weex project",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "build_plugin": "webpack --config ./tools/webpack.config.plugin.js --color",
    "dev": "weex-builder src dist -w",
    "serve": "webpack-dev-server --config webpack.dev.js -p --open"
  },
  "keywords": ["weex"],
  "author": "zwwill",
  "license": "MIT",
  "dependencies": {
    "vue": "^2.4.2",
    "vue-router": "^2.7.0",
    "vuex": "^2.1.1",
    "vuex-router-sync": "^4.3.0",
    "weex-html5": "^0.4.1",
    "weex-vue-render": "^0.11.2"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-runtime": "^6.9.2",
    "css-loader": "^0.26.1",
    "history": "^4.7.2",
    "quick-local-ip": "^1.0.7",
    "vue-loader": "^13.0.4",
    "vue-template-compiler": "^2.4.2",
    "webpack": "^2.7.0",
    "webpack-dev-server": "^2.4.2",
    "weex-builder": "^0.2.7",
    "weex-loader": "^0.4.5",
    "weex-router": "0.0.1"
  }
}

UI尺寸适配

Weex 容器默认的显示宽度 (viewport) 是 750px，页面中的所有组件都会以 750px 作为满屏宽度。
这很像移动设备的逻辑像，比如 iPhone 6 的物理像素宽为 750，逻辑像素

 上一页

javascript, jquery