uniapp可以封装组件嘛_快速上手uniapp

uniapp简介

uniapp项目可以一套代码运行到多端(APP端(安卓和ios)、各种小程序(微信、支付宝、头条、百度、QQ)、H5端)。

详细介绍请看官网https://uniapp.dcloud.io/

快速上手uniapp

先要下载安装编辑器Huilder X.直接从官网给的地址下载：https://www.dcloud.io/hbuilderx.html

我们公司大多数操作系统都是WIndows 我们直接安装正式版下边的Windows版的APP开发版。

安装成功之后打开Hbuilder X,我们点击依次左上角的文件-新建-项目，然后就会出现如下图所示：

我们需要给项目取个名字，然后我们会发现可以新建不同的项目类型，而不同的项目类型运行平台是不同的：

我们开发移动端项目或小程序这些都是选择uniapp项目，而开发PC项目我们可以选择普通项目，并且普通项目下是可以选择vue项目的，也就是说我们根本不用自己去用命令行搭建脚手架了，填好项目根目录保存位置它就直接帮我们搭好了。

uniapp项目引入基础配置

引入官方给的CSS库——uni.css

首先看下为啥我们要引入它，先打开uni.css看下下面这个图：

对，没错，这都是官方给我们封装好的，比如我们想用flex布局那就能直接写这样就不用自己再去写样式了，有木有感觉很方便呀！

好，知道了uni.css的用途后我们再看下如何用它：

建议在用uniapp开发项目的时候，我们先下载官方给我们的uniapp项目的一个demo,我们还是新建项目，选择uni-app,填写项目名称，选择项目保存位置，选择Hello uni-app。

下载好后打开，我们在common文件夹下看到了uni.css：

在实际开发项目中也是这样，不过我们习惯uni.css放在common文件夹下的css文件夹下，然后在APP.vue里的style里引入@ import './common/uni.css',如下图这样:

引入完，我们就能在任何vue文件里使用啦!

引入阿里巴巴矢量图标库的字体图标

 废话少说，直接上引入步骤:

1.将图标库里选好的字体图标下载至本地

2.下载好后打开，我们要用到的只有iconfont.css,也就是图中我用红线框出来的地方

我们直接复制这个iconfont.css,所以我们将iconfont.css复制粘贴到common文件夹下的css文件夹下，并改名为icon.css然后再在APP.vue里的style里引入

@import  ‘./common/css/icon.css’;然后打开icon.css删除如下一些代码：

最后icon.css里只剩下类似这样的代码：

@font-face{ font-family:”iconfont”

 src:url(‘data:application/x-font-          woff2...............’)format(‘woff2’);

}

.iconfont{

   font-family:”iconfont” !important,

   font-size:16px;

}

再在vue文件里使用

打开刚才下载的demo.html文件，选择Font class,控制台里复制class内容

iconfont

 icon-changjingguanli> 

引入css动画库

有时候我们需要做一些动画处理，那么我们可以直接用别人封装好的文件，废话少说，上使用步骤：

直接百度输入animate css搜索，出现的第一条就是：

或者说我们直接进Animate中文网http://www.animate.net.cn/，然后下载animate.css，将下载好的animate.css文件复制粘贴到根目录下的common文件夹下的css文件夹下面,再在App.vue里的style里全局引入动画库@import  ‘./common/css/animate.css’;然后我们就能在任何vue文件里使用他们提供的动画了。

使用动画也很简单,和使用字体图标差不多，直接给想添加动画的元素添加class=”animated 动画名 “,比如

测试动画

当然，如果我们想调整动画速度还可以继续加个类名fast，比如测试动画

上面我们配置好了全局可用的uni.css,字体图标和动画，我们引入reset.css和common.css方法也差不多，也是直接把这两个文件放到common文件夹下的css文件夹下面，然后在APP.vue里的style用@import引入即可。

一起来学习 长按或扫码关注