uniapp引入js css 插件 npm包

#js 文件引入

js文件或script标签内（包括 renderjs 等）引入js文件时，可以使用相对路径和绝对路径，形式如下

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js';
// 相对路径
import add from '../../common/add.js';

注意

• js 文件不支持使用/开头的方式引入

引入css

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>

css文件或style标签内引入css文件时（scss、less 文件同理），可以使用相对路径或绝对路径（HBuilderX 2.6.6）

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

css文件或style标签内引用的图片路径可以使用相对路径也可以使用绝对路径，需要注意的是，有些小程序端 css 文件不允许引用本地文件（请看注意事项）。

/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);

Tips

• 引入字体图标请参考，字体图标
• @开头的绝对路径以及相对路径会经过 base64 转换规则校验
• 不支持本地图片的平台，小于 40kb，一定会转 base64。（共四个平台 mp-weixin, mp-qq, mp-toutiao, app v2）
• h5 平台，小于 4kb 会转 base64，超出 4kb 时不转。
• 其余平台不会转 base64

引入插件

内置原生插件

使用方式：可通过uni.requireNativePlugin直接使用。

    <template>
        <view>
            <text class="my-iconfont">&#xe85c;</text>   
        </view>
    </template>
    <script>
        export default{
            beforeCreate() {
                const domModule = uni.requireNativePlugin('dom')
                domModule.addRule('fontFace', {
                    'fontFamily': "myIconfont",
                    'src': "url('http://at.alicdn.com/t/font_2234252_v3hj1klw6k9.ttf')"
                });
            }
        }
    </script>
    <style>
        .my-iconfont {
            font-family:myIconfont;
            font-size:60rpx;
            color: #00AAFF;
        }
    </style>

非内置原生插件，分为 本地插件 和 云端插件 。

第一步：获取插件

• 方式一：插件市场下载免费uni-app原生插件
  可以登录uni原生插件市场，在免费的插件详情页中点击“下载for离线打包”下载原生插件（zip格式），解压到HBuilderX的uni-app项目下的“nativeplugins”目录（如不存在则创建），以下是“DCloud-RichAlert”插件举例，它的下载地址是：https://ext.dcloud.net.cn/plugin?id=36
• 方式二：开发者自己开发uni-app原生插件

原生插件开发完成后按指定格式压缩为zip包，参考uni-app原生插件格式说明文档。 按上图的格式配置到uni-app项目下的“nativeplugins”目录。

第二步：配置本地原生插件
在manifest.json -> App原生插件配置 -> 选择本地插件 -> 选择需要打包生效的插件 -> 保存后提交云端打包生效。

• 注意如果需要真机调试需要打包自定义基座

NPM支持

uni-app支持使用npm安装第三方包。

此文档要求开发者们对npm有一定的了解，因此不会再去介绍npm的基本功能。如若之前未接触过npm，请翻阅NPM官方文档进行学习。

初始化npm工程

若项目之前未使用npm管理依赖（项目根目录下无package.json文件），先在项目根目录执行命令初始化npm工程：

npm init -y

cli项目默认已经有package.json了。HBuilderX创建的项目默认没有，需要通过初始化命令来创建。

安装依赖

在项目根目录执行命令安装npm包：

npm install packageName --save

使用

安装完即可使用npm包，js中引入npm包：

import package from 'packageName'
//或者
const package = require('packageName')

注意

• 为多端兼容考虑，建议优先从 uni-app插件市场 获取插件。直接从 npm 下载库很容易只兼容H5端。
• 非 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 模块，安装的模块及其依赖的模块使用的 API 必须是 uni-app 已有的 API（兼容小程序 API），比如：支持高德地图微信小程序 SDK。类似jQuery 等库只能用于H5端。
• node_modules 目录必须在项目根目录下。不管是cli项目还是HBuilderX创建的项目。