银商小程序

Vue在Web和终端的差异

Vue.js 最初是为 Web 平台设计的，Web 开发和手机上原生开发毕竟不同，在功能和开发体验上都有一些差异，这些差异从本质上讲是原生开发平台和 Web 平台之间的差异。

终端平台和Web平台差异如下：

原生环境下没有DOM

DOM（Document Object Model），即文档对象模型，是 HTML 和 XML 文档的编程接口，是 Web 中的概念。银商小程序的运行环境以原生应用为主，在 Android 和 iOS 环境中渲染出来的是原生的组件，不是 DOM Element。

不支持 Web DOM 操作

原生环境中不支持 Web API，没有 Element 、Event 、File 等对象，详细列表可以参考 Web APIs on MDN；

不支持选中元素，如 document.getElementById 、 document.querySelector 等；

也不支持基于 DOM API 的程序库（如 jQuery）。

银商小程序只支持有限的DOM操作，详细请参考节点操作章节。

有限的事件类型

小程序支持在标签上绑定事件，和在浏览器中的写法一样，但是 小程序 中的事件是由原生组件捕获并触发的，行为和浏览器中有所不同，事件中的属性也和 Web 中有差异。

  • 并不支持 Web 中所有的事件类型，参考《通用事件》

  • 不区分事件的捕获阶段和冒泡阶段，相当于 DOM 0 级事件。因此原生组件不支持事件修饰符，例如.prevent，.capture，.stop，.self 。 此外，按键修饰符以及系统修饰键 例如 .enter，.tab，.ctrl，.shift 在移动端基本没有意义，也不支持。

终端环境中没有 BOM

BOM（Browser Object Model），即浏览器对象模型，是浏览器环境为 javascript 提供的接口。银商小程序 在原生端并不基于浏览器运行，不支持浏览器提供的 BOM 接口。

没有 window 、screen 对象

小程序并未提供浏览器中的 window 和 screen 对象，不支持使用全局变量。如果是想要获取设备信息，可以使用 getDeviceInfo() 方法

没有 document 对象

在浏览器中 document 表示了当前活动的文档模型，在 Android 和 iOS 环境中并没有这个对象，也不支持与其相关的 DOM 操作。

没有 history 、location 对象

  • history 保存了当前页面的历史记录，并且提供了前进后退操作。
  • location 记录了当前页面 URL 相关的信息。

这些接口与浏览器自身的实现有关，可以控制页面的前进后退并且获取状态信息。虽然在 Android 和 iOS 中也有“历史”和“导航”的概念，但是它是用于多个管理视图之间的跳转的。换句话说，在浏览器中执行“前进”、“后退”仍然会处于同一个页签中，在原生应用中“前进”、“后退”则会真实的跳转到其他页面。

此外 小程序 也提供了 navigator 模块来操作页面的跳转，使用方法参考导航章节。

能够调用移动设备原生 API

在 银商小程序 中能够调用终端设备原生 API，包括clipboard 、 navigator 、storage 等设备通用的， 也包括银商U架构这些银商设备特有的。

仅引入了Vue Runtime

小程序 中仅引入 Vue Runtime 的功能，这样做除了可以减少代码体积以外，还能减少运行期编译模板的负担，提升性能。

小程序 Vue Runtime与Web Vue 的Runtime的差异：

  • 定义组件时不支持使用 template 属性。
  • 不支持使用 x-templates。
  • 不支持使用 Vue.compile。

隔离多页面的作用域

银商小程序默认是MPA模式（多页应用），每个页面都是Android的一个Activity。不同的 js bundle 将会在不同的原生Activity中执行；也就是说，不同的 js bundle 之间将不能共享 js 变量。即使是 Vue 这个变量，在MPA下 在不同页面中也对应了不同的引用。

基于这个特性，Vue 中全局功能将只在当前页面内生效：

  • Vue.config
  • Vue.component
  • Vue.directive
  • Vue.filter
  • Vue.mixin
  • Vue.use

样式差异

Web 中的 CSS 非常的灵活，积累了特别多的属性，支持多种布局方法；这是其优势，也是浏览器性能优化的一个瓶颈。

小程序 中的样式是由原生渲染器解析的，出于性能和功能复杂度的考虑，银商小程序 对 CSS 的特性做了一些取舍，使其更符合最佳实践。

单类名选择器和作用域

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

/* 支持单个类名选择器 */
.one-class {
  font-size: 36px;
}
/* 不支持关系选择器 */
.parent > .child {
  padding-top: 10px;
}
/* 不支持属性选择器，不支持 `v-cloak` 指��� */
[v-cloak] {
  color: #FF6600;
}

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

<template>
  <div class="one two three"><div>
</template>

组件级别的作用域

在 银联商务小程序 里， 每一个 Vue 组件的样式都是 scoped

支持的样式属性

小程序 持的样式特性是 CSS 的子集，并且会不断扩充；在实现过程中我们参考了 CSS 属性在浏览器中的使用频率，优先实现其中频率最高的一些属性。

小程序 支持了基本的盒模型和 flexbox 布局，以及其他常用样式，详情可参考通用样式文档。

在编写样式时，还应该注意一下几点：

  • 不需要写样式前缀
  • 不支持 display: none;，因此也不支持 v-show 指令。
  • 为了优化样式解析的效率，样式属性暂不支持简写，涉及一下属性：
    • border 、border-(top|bottom|left|right)
    • margin
    • padding
    • flex

编译环境的差异

针对 Web 平台，和普通 Vue 2.X 项目一样，可以使用任意官方推荐的方式编译源文件，如 Webpack + vue-loader 或者 Browserify + vueify。

针对银商智能终端，我们推荐使用银商脚手架工具 umstool-kit，详情请参考搭建开发环境

← 使用Promise →