uniapp开发问题记录(一)

该篇博文主要是对uniapp开发遇到问题的记录,之后会逐步更新。

一、uniapp导入阿里巴巴字体库

uniapp开发问题记录(一)_第1张图片

首先在阿里巴巴矢量图标库中收集自己要的字体,专门建立一个项目,然后点击下载到本地,解压,把其中的iconfont.css拷贝到自己的项目下(可以新建一个common/css目录),然后在自己的 APP.vue中引入,然后在点击“查看在线连接”——选择Unicode,点此复制代码,把这代码复制到刚才的iconfont.css文件中,添加上https,如下图:

uniapp开发问题记录(一)_第2张图片

 uniapp开发问题记录(一)_第3张图片

 使用:如下1在class中加入iconfont 和阿里巴巴中的font class名即可

uniapp开发问题记录(一)_第4张图片

问题: 

1.如上图中引入iconfont.css文件时必要要主要后面的分号,漏了的话会引入不进来,下面代码的颜色也变了,这是写法的问题

2.如果更新了图标,在项目中重新加入了图标,直接点击“在线连接”,他会提示有图标更新,需要更新代码,直接点击即可更新完后复制代码替换iconfont.css中的font-face代码即可。有一个问题是,如果我直接按class的方式(上图中的方式1)引入新加入的图标,会无效,只有按上图中的方式2,class方式和unicode方式一起用才有用,而更新之前的图标是可以用class方式引入的,这有点奇怪,也望知道原因的小伙伴交流一下

 

二、手机端H5或者APP padding-right无效

如下图:在一个盒子中设置了width:100%,然后padding-right就无效了。解决办法就是给这盒子设置:box-sizing:border-box,或者去掉width:100%的设置即可。

uniapp开发问题记录(一)_第5张图片

你可能感兴趣的:(uniapp)