LightJSNative与普通网页开发的区别

jsnative工程的开发同样使用了vue组件化开发的方式。

在实际的开发过程中,jsnative环境和web环境还有一些非常明显的差异,需要在开发过程中尽量规避,否则会造成应用无法启动或者页面报错的问题。

页面开发实例

<template>
<div>
<text>Hello,World !</text>
</div>
</template>
<script>
export default {
data(){
return {};
},
}
</script>
<style scoped>
</style>

与web的差异

jsnative 环境中没有 DOM

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

不支持 DOM 操作

既然原生环境中不支持 Web API,没有 Element 、Event 、File 等对象,详细列表可以参考 Web APIs on MDN。不支持选中元素,如 document.getElementById 、 document.querySelector 等;当然也不支持基于 DOM API 的程序库(如 jQuery)。

有限的事件类型

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

  • 并不支持 Web 中所有的事件类型,详情请参考《通用事件》。
  • 不区分事件的捕获阶段和冒泡阶段,相当于 DOM 0 级事件。

jsnative 环境中没有 BOM

BOM(Browser Object Model),即浏览器对象模型,是浏览器环境为 javascript 提供的接口。jsnative 在原生端没有并不基于浏览器运行,不支持浏览器提供的 BOM 接口。

没有 window 、screen 对象

jsnative 中并未提供浏览器中的 window 和 screen 对象,不支持使用全局变量。如果是想要获取设备的屏幕或环境信息,可以使用 WXEnvironment 变量。

  • WXEnvironment
    • Version: jsnative SDK 的版本。
    • appName: 应用的名称。
    • appVersion: 应用的版本。
    • platform: 运行平台,可能的值是 Web 、Android 、iOS 之一。
    • osName: 系统的名称。
    • osVersion: 系统版本。
    • deviceWidth: 设备宽度。
    • deviceHeight: 设备高度。

没有 document 对象

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

没有 history 、location 、navigator 对象

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

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

能够调用移动设备原生 API

在 jsnative 中能够调用移动设备原生 API,使用方法是通过注册、调用模块来实现。其中有一些模块是 jsnative 内置的,如 clipboard 、 navigator 、storage 等。

注意事项

在jsnative应用的开发过程中至少有一下几点要特别注意:

  1. 不支持 margin、panding 合并写法,例如margin:10px 30px,但支持 margin:10px;
  2. 不支持 margin 的 auto属性,要居中需要计算margin-left值;
  3. 只支持像素值px作为单位,不支持相对单位(em、rem);
  4. 盒模型计算宽高度不需要减掉padding值,因为已经设置box-sizing:border-box;
  5. 不支持 z-index 设置元素层级,但靠后的元素层级更高,因此,对于层级高的元素,可将其排列在后面;
  6. 不支持border简写,要分为border-width、border-style、border-color三个值设置,不支持border-radius:50%,需要设置具体数值;
  7. background设置背景色要加background-color,不支持简写;
  8. 包裹的父级必须要加上flex-direction属性确定子元素排列方向;
  9. 不支持class继承写法,如 .classA text,必须要在每个组件上定义class;
  10. 文本值只能用<text>包裹,不支持子组件,lines可指定文本行数,但是只能在class里设置才能生效,在组件上设置无效;
  11. <image>组件要闭合,src支持引入本地链接,需要明确指定 width 和 height,不支持子组件;
  12. <input />组件必须要‘/’结尾,不支持 click 事件,用 change 替代;
  13. 不支持在滚动类型的元素上监听touch、swiper等手势,例如 scroller,list 和 webview 这三个组件;
  14. 只有滚动组件才能滚动,其他例如body 和 div,高度设置再高也不会出现滚动,并且设置高度100%无效;
  15. <list> 组件必须加高度,只能在高度指定区域滚动;
  16. 支持 :class=”” 绑定样式, 但需要写成数组 :class="[]" 的形式,不支持对象:class="{}"的写法;
  17. 不支持 v-show ,但支持 v-if;
  18. 不支持在classstyle中定义相同的样式属性。