JSNative模块开发工程

JSNative是一种业务功能开发的实现技术,使开发者能基于通用跨平台的 Web 开发语言和开发经验,来构建可在 Android、iOS 和 Web 环境下运行的模块功能。简单来说,使用Light JSNative技术你可以使用 JavaScript 语言和前端开发经验来开发移动应用中的模块。开发出来的代码在原生设备运行时以原生渲染的方式展现,从而提高页面的加载和运行效率。

现阶段的light工程已经可以做到三端统一的运行效果,以同一份代码编译出不同设备平台的运行代码。

创建开发工程

创建JSN模块开发工程可以使用以下指令:

$ light create -t jsn

生成的基本的模板开发工程比较简单,目录结构大致如下,基本的模板工程包含了一个JSNative的”hello,world”页面。

demo
├── app.js
├── index.html
├── lib
│   └── package.json
├── project.json
└── view
└── index.vue

2 directories, 5 files

JSNative模块工程的project.json配置项中的插件配置启用了jsnative插件,改插件赋予了工程JSNative代码编译的能力。

添加生成视图

可以参考视图的概念和定义章节进行视图的定义和生成。

注意事项

视图中页面功能的实现必须符合JSNative的规范,只允许使用JSNative中支持的语法来开发工程,切忌不可以纯H5开发的代码经验来实现JSNative的视图。

使用原生接口

为了方便开发者使用调用原生API,我们提供了light-sdk模块,具体的使用方法如下:

  1. 在源代码目录的lib目录执行:npm install -d --save light-sdk
  2. 在需要使用light-sdk的js或者vue文件中使用如下代码:import LightSDK from “light-sdk”
  3. 具体的使用指令及API文档参考light-sdk的API文档

运行JSNative模块工程

JSNaitve项目可以通过:light release -wb 指令启动并启动开发模式。

其中-w参数是指编译是会开启watch选项,当发生代码变更的时候自动触发代码编译;-b选项表示在应用编译完成后打开浏览器并在默认3000端口监听http请求,以对资源进行一个简单的本地server的运行查看和调试。端口号也可以自定义。

light release -wb
[2019-04-16 17:47:42][INFO] 清除/tmp/jsnative1555408061974-6861837146828487目录
[2019-04-16 17:47:42][INFO] 拷贝/tmp/jsnative到/tmp/jsnative1555408061974-6861837146828487目录
[2019-04-16 17:47:42][INFO] jsnative@1.0.12插件加载成功
[2019-04-16 17:47:42][INFO] 阶段:prepare,调用插件type-vue@1.1.17开始
[2019-04-16 17:47:42][INFO] 阶段:prepare,调用插件jsnative@1.0.12开始
[2019-04-16 17:47:42][INFO] 阶段:prepare,调用插件jsnative@1.0.12成功
[2019-04-16 17:47:42][INFO] 阶段:prepare,调用插件type-vue@1.1.17成功
[2019-04-16 17:47:42][INFO] 处理资源装配:index
[2019-04-16 17:47:42][INFO] 处理脚本资源注入:index
[2019-04-16 17:47:42][INFO] 阶段:build,调用插件type-vue@1.1.17开始
[2019-04-16 17:47:43][INFO] 准备编译jsn环境下的jsnative文件...
[2019-04-16 17:47:46][INFO] 阶段:build,调用插件type-vue@1.1.17成功
[2019-04-16 17:47:46][INFO] 阶段:serve,调用插件jsnative@1.0.12开始
[2019-04-16 17:47:46][INFO] 阶段:serve,调用插件jsnative@1.0.12成功
[2019-04-16 17:47:46][INFO] 已开启本地资源监听...
[2019-04-16 17:47:46][INFO] 资源编译成功

编译过程中的日志信息大致如上(省略了编译进度的细节部分日志信息),可以看出完整的编译流程中触发了JSNative插件和type-vue插件的运行。

可以重点看一下打开页面手机预览模式的控制台后,右侧展示的部分。

  1. 点击资源详情的链接可以打开编译模块的详细视图,包括每个模块参与编译的时机以及大小
  2. 二维码可以直接被lightview扫描以展示在真机设备上的JSNative运行效果