qinjs 组成和跨端原理

基本语言和开发规范

qinjs 代码编写，基本语言包括 js 、 vue 、 css 。以及 ts 、 scss 等 css 预编译器。

为了实现多端兼容，综合考虑编译速度、运行性能等因素， qinjs 约定了如下开发规范：

• 页面文件遵循 Vue 单文件组件 (SFC) 规范，即每个页面是一个.vue文件
• 组件标签靠近小程序规范，详见qinjs 组件规范
• 接口能力（JS API）靠近小程序规范，但需将前缀 wx、my 等替换为 qin，详见qinjs接口规范
• 数据绑定及事件处理同 Vue.js 规范，同时补充了应用生命周期及页面的生命周期

qinjs 分编译器和运行时（runtime）。 qinjs 能实现一套代码、多端运行，是通过这2部分配合完成的。

编译器将开发者的代码进行编译，编译的输出物由各个终端的runtime进行解析，每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime。

编译器

• 编译器运行在电脑开发环境。一般是内置在HBuilderX工具中，也可以使用独立的cli版。
• 开发者按 qinjs 规范编写代码，由编译器将开发者的代码编译生成每个平台支持的特有代码
  • 在 H5 平台，将 .vue 文件编译为 js 代码。与普通的 vue cli 项目类似
  • 在微信小程序平台，编译器将 .vue 文件拆分生成 wxml 、 wxss 、 js 等代码
• 编译器基于Vite实现，性能更快
• 编译器支持条件编译，即可以指定某部分代码只编译到特定的终端平台。从而将公用和个性化融合在一个工程中。

// #ifdef H5
console.log("这段代码只有在H5平台才会被编译进去。非H5平台编译后没有这段代码")
// #endif

// #ifdef H5
console.log("这段代码只有在H5平台才会被编译进去。非H5平台编译后没有这段代码")
// #endif

更多编译器介绍参见：编译器

运行时（runtime）

runtime 不是运行在电脑开发环境，而是运行在真正的终端上。

qinjs 在每个平台（H5 、各家小程序）都有各自的 runtime 。这是一个比较庞大的工程。

• 在小程序端， qinjs 的 runtime ，主要是一个小程序版的 vue runtime ，页面路由、组件、 api 等方面基本都是转义。
• 在 H5 端， qinjs 的 runtime 相比普通的 vue 项目，多了一套ui库、页面路由框架、和 qin 对象（即常见API封装）

qinjs runtime 包括 3 部分：基础框架、组件、 API 。

1. 基础框架：

• 包括语法、数据驱动、全局文件、应用管理、页面管理、 js 引擎、渲染和排版引擎等
• 在web和小程序上，不需要 qinjs 提供 js 引擎和排版引擎，直接使用浏览器和小程序的即可。

2. 组件：

• runtime中包括的组件只有基础组件，如<view>、<button>等。扩展组件不包含在qinjs 的 runtime 中，而是下载到用户的项目代码中。（这些组件都是 vue 组件）
• 为了降低开发者的学习成本， qinjs 的内置基础组件命名规范与小程序基本相同。
• 这几十个组件不管在哪个平台，已被处理为均有一致表现。
• 在小程序端，qinjs 基础组件会直接转义为小程序自己的内置组件。在小程序的 runtime 中不占体积。
• 在 H5 端，这几十个组件都在 qinjs 的 runtime 中，会占用一定体积，相当于内置了一套 ui 库。
• 组件的扩展：
  • 有了几十个基础组件，大多数扩展组件也都是基于这些基础组件封装的。比如官方提供的扩展ui库qin ui。
  • 在 H5 平台，for web的各种ui库（如 elementUI ）也可以使用，但这些库由于操作了dom，无法跨端在小程序中使用。
  • qinjs 同时支持将微信自定义组件运行到微信小程序、web、app这3个平台。注意微信自定义组件不是vue组件。

3. API：

• qinjs runtime 内置了大量常见的、跨端的 API，比如联网(qin.request)、读取存储(qin.getStorage)
• 同时 qinjs 不限制各端原生平台的 API 调用。开发者可以在 qinjs 框架中无限制的调用该平台所有能使用的 API 。即，在小程序平台，小程序的所有API都可以使用；在web平台，浏览器的所有API都可使用。
• 也就是说，使用 qinjs 的标准 API ，可以跨端使用。但对于不跨端的部分，仍可以调用该端的专有 API 。由于常见的API都已经被封装内置，所以日常开发时，开发者只需关注 qin 标准 API ，当需要调用特色端能力时在条件编译里编写特色 API 调用代码。

• 小程序平台： qin 对象会转为小程序的自有对象，比如在微信小程序平台，编写 qin.request 等同于 wx.request 。那么所有 wx. 的 API 都可以这样使用。
• H5 平台： window 、 dom 等浏览器专用 API 仍可以使用

qinjs 还支持 uni-app 的插件市场，大多数用得着的组件和API都已经有现成的插件。

逻辑层和渲染层分离

在 H5 平台，逻辑层（js）和渲染层（html、css），都运行在统一的 webview 里。

但在小程序端，逻辑层和渲染层被分离了。分离的核心原因是性能。

小程序逻辑层都独立为了单独的js引擎，渲染层仍然是 webview 。

所以注意小程序的逻辑层都不支持浏览器专用的 window 、 dom 等 API 。

关于逻辑层和渲染层分离带来的注意事项，请详读