uni-app引入官方的css样式库、动画库和自定义图标库

你的名字 2024-04-17 22:09 33阅读 0赞

### uni-app修炼之路（三） ###

*  导语
 *  引入官方css样式库
 *   *  从官方演示模板项目复制过来
     *   *   *  1.创建官方演示模板Hello-uniapp
             *  2.打开Hello uni-app项目中的App.vue文件，复制以下内容到我们自己需要引入CSS样式库的项目中的App.vue文件。
             *  3.在Hello uni-app项目中把上面引入的uni.css文件复制到我们的项目中，同样自己新建一个common目录，把它放到里面。
             *  4.使用实例
             *   *   *  以uList为例，输入ulist按回车键，便出现了如下代码
                     *  这里与官方文档给出的结果不同，官方文档给出的如下
                     *  这里我们可以自定义去更改我们的代码块

# 导语 #

上次我记录一下如何使用**uni-app**创建项目，并讲解**uni-app**的结构。隔了一个星期在准备ACM就没有写，今天来介绍一下如何引入官方的css样式库。

# 引入官方css样式库 #

## 从官方演示模板项目复制过来 ##

#### 1.创建官方演示模板Hello-uniapp ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70]

#### 2.打开Hello uni-app项目中的App.vue文件，复制以下内容到我们自己需要引入CSS样式库的项目中的App.vue文件。 ####

/* uni.css - 通用组件、模板样式库，可以当作一套ui库应用 */
        @import './common/uni.css';

#### 3.在Hello uni-app项目中把上面引入的uni.css文件复制到我们的项目中，同样自己新建一个common目录，把它放到里面。 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 1]

#### 4.使用实例 ####

> 首先我们打开uni-app官网查看[高效开发技巧][Link 1]，里面为我们提供了很多快捷键

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 2]

###### 以uList为例，输入ulist按回车键，便出现了如下代码 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 3]

###### 这里与官方文档给出的结果不同，官方文档给出的如下 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 4]

###### 这里我们可以自定义去更改我们的代码块 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 5]  
在右边的自定义代码块中的大括号里面添加以下代码，保存即可

"ulist":{
    		"body":[
    			"<view class=\"uni-list\">",
    			    "\t<view class=\"uni-list-cell\">",
    			        "\t\t<view class=\"uni-list-cell-navigate uni-navigate-right\" v-for=\"(item,index) in list\" :key=\"index\">",
    			            "\t\t\t{
       {item.value}}",
    			        "\t\t</view>",
    			    "\t</view>",
    			"</view>"
    		],
    		"prefix": "ulist",
    		"project": "uni-app",
    		"scope": "source.vue.html"	
    	}

可以看到，这个ulist中的样式，便是使用了官方样式库中的uni-list样式  
例如下面的代码展示了列表的使用

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/307887feeaba415db903b2cc7fa2db5f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/9950882bcc954a35b6595455e498bc5b.png
[Link 1]: https://uniapp.dcloud.io/snippet
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/060aaefc1a484f559adb4fd0aee8628c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/cfe43e52e7954ae6b762e952405a7dcc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/8d378a257bd84fc4a623dd2443a3b743.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/541283155c85425ea18c02f2ba4e07c9.png