UniApp 进阶与配置 ​

HTML5 Plus ​

uni-app App 端内置 HTML5+ 引擎，让 JS 可以直接调用丰富的原生能力。

条件编译 ​

// #ifdef APP-PLUS
var appid = plus.runtime.appid
// #endif

// #ifdef APP-PLUS
var appid = plus.runtime.appid
// #endif

不需要 plus ready ​

在 html 中使用 plus 的 api 需要等待 plus ready，但 uni-app 不需要。

事件监听 ​

// #ifdef APP-PLUS
plus.globalEvent.addEventListener('newintent', function () {})
// #endif

// #ifdef APP-PLUS
plus.globalEvent.addEventListener('newintent', function () {})
// #endif

Native.js ​

Native.js 通过 JS 直接调用 Android/iOS 原生 API，详见 官方文档。

renderjs ​

renderjs 是一个运行在视图层的 JS，支持 app-vue 和 web。主要作用：

1. 大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力
2. 在视图层操作 dom，运行 for web 的 JS 库

平台支持 ​

使用方式 ​

<script module="test" lang="renderjs">
export default {
  mounted() { /* ... */ },
  methods: { /* ... */ },
}
</script>

<script module="test" lang="renderjs">
export default {
  mounted() { /* ... */ },
  methods: { /* ... */ },
}
</script>

注意事项 ​

• 目前仅支持内联使用
• 可以使用 vue 组件的生命周期（不支持 beforeDestroy、destroyed）
• APP 端可以使用 dom、bom API，不可直接访问逻辑层数据，不可以使用 uni.request
• H5 端逻辑层和视图层在同一环境，可直接访问逻辑层数据

编译器配置 ​

manifest.json ​

配置 Vue 版本（Vue2/Vue3）以及 H5 平台路由模式等。

vue.config.js ​

修改 webpack 配置，包括环境变量。

vite.config.js ​

修改 Vite 配置（Vue3 项目）。

package.json ​

在自定义条件编译平台时，在 env 节点下配置环境变量。

.env ​

CLI 创建的项目中可在根目录放置 .env 文件指定环境变量。

环境变量配置方式 ​

1. vue.config.js — webpack 配置，包括环境变量
2. package.json — 自定义条件编译平台时在 env 节点配置
3. .env — CLI 项目根目录放置
4. manifest.json — Vue 版本、H5 路由模式等