UniApp 资源与原生插件 ​

NPM 支持 ​

npm install packageName --save

npm install packageName --save

使用时直接引入：

import package from 'packageName'

import package from 'packageName'

注意：

• 优先从 uni-app 插件市场获取插件
• 非 H5 端不支持使用含 dom、window 操作的 vue 组件和 js 模块
• node_modules 目录必须在项目根目录下

静态资源引入 ​

Template 中引入 ​

<!-- 绝对路径 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

<!-- 绝对路径 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

注意：

• @ 开头的路径以及相对路径会经过 base64 转换规则校验
• 非 h5 平台不转为 base64
• H5 平台小于 4kb 的资源转为 base64
• App 平台自 HBuilderX 2.6.9 起 template 引用静态文件基于当前文件路径搜索

CSS 中引入 ​

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);

/* 相对路径 */
@import url('../../common/uni.css');
background-image: url(../../static/logo.png);

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);

/* 相对路径 */
@import url('../../common/uni.css');
background-image: url(../../static/logo.png);

注意：

• 不支持本地图片的平台（mp-weixin, mp-qq, mp-toutiao, app v2），小于 40kb 会转 base64
• h5 平台小于 4kb 转 base64

原生插件 ​

内置原生插件 ​

uni-app 已默认集成，支持直接在内置基座运行：

const PluginName = uni.requireNativePlugin(PluginName)

const PluginName = uni.requireNativePlugin(PluginName)

• nvue 页面：支持 BindingX, animation, DOM.addRule 等
• vue 页面：支持 clipboard, storage, stream, deviceInfo 等

本地插件 ​

放在项目 nativeplugins 目录下：

1. 从插件市场下载或自主研发
2. 在 manifest.json → App 原生插件配置 → 选择本地插件
3. 使用自定义基座开发调试
4. 提交云端打包生成正式版本

const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert')

const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert')

云端插件 ​

在插件市场绑定或购买的插件，无需下载到工程：

1. manifest.json → App 原生插件配置 → 选择云端插件
2. 使用自定义基座调试
3. 重新提交云端打包发布