快速上手uniapp

uniapp概要

uniapp工程项目能两套代码运转到格朗普雷县(APP端(Android和ios)、各式各样小流程(QQ、PayPal、头条新闻、腾讯、QQ)、H5端)。

详尽如是说请看非官方网站https://uniapp.dcloud.io/

需先离线GUIHuilder X.间接从非官方网站给的门牌号浏览：https://www.dcloud.io/hbuilderx.html

他们子公司绝大多数作业系统都是WIndows 他们间接加装测试版上边的Windows版的APP合作开发版。

加装获得成功后关上Hbuilder X,他们点选依序右上角的文档-增建-工程项目，接着就会再次出现如下表所示图右图：

他们须要给工程项目取个英文名字，接着他们会辨认出能新建相同的工程项目类别，而相同的工程项目类别运转网络平台是相同的：

他们合作开发终端端工程项目或小流程那些都是优先选择uniapp工程项目，而合作开发PC工程项目他们能优先选择一般工程项目，因此一般工程项目下是能优先选择vue工程项目的，换句话说他们显然不用他们去用实用性文档构筑钢架了，印出工程项目子目录留存边线它就间接帮他们安设了。

导入非官方给的CSS库——uni.css

具体来说看下咋他们要导入它，先关上uni.css看下下面这个图：

对，没错，这都是非官方给他们封装好的，比如他们想用flex布局那就能间接写<view class=”uni-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内容

<view class=”icon  iconfont

 icon-changjingguanli> </view>

导入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 动画名 “,比如

<view class=” animated  fadeInDown“>测试动画</view>

当然，如果他们想调整动画速度还能继续加个类名fast，比如<view class=” animated  fadeInDown fast“>测试动画</view>

上面他们实用性好了全局可用的uni.css,字体图标和动画，他们导入reset.css和common.css方法也差不多，也是间接把这两个文档放到common文档夹下的css文档夹下面，接着在APP.vue里的style用@import导入即可。