微信小程序03：引用外部wxss

1.资料：

01:微信小程序引用
02:阿里巴巴矢量图库

2.前言

weui是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一，所以，可以在小程序中直接使用weui中的组件。

3.引用weui中的wxss

第一步，下载weui的压缩包

压缩包有两种，一种解压之后，weui的css样式是css后缀名，一种是wxss后缀。我在小程序中使用，需要下载后缀名为wxss的
地址：https://github.com/Tencent/weui-wxss/

第二步，复制wxss后缀的文件

下载，解压之后，可以看到

解压后的weui.jpg

我需要的wxss在dist/style中

wxss的地址.jpg

第三步，放入小程序中

复制这个wxss到你小程序的根目录中：

小程序根目录.jpg

第四步，引入样式表

在app.wxss的头部引入该文件样式：@import "weui.wxss";

4.在小程序中使用字体图标

第一步，下载字体图标

以“阿里巴巴矢量图库”为例，建议新建一个项目管理你所需的图标。
例如：创建一个mui文件项目，里面保存的都是这个项目所需的图标文件。

image.png

点击下载，解压

image.png

第二步，ttf文件转换成base64文件

进入网址：https://transfonter.org/，进行转换，得到下图：

image.png

image.png

第三步，在微信小程序页面新建iconfont.wxss，和app.wxss同级就好

image.png

iconfont.wxss的组成由两部分组成：
第一部分，ttf文件转换后的stylesheet.css文件里面的内容
第二部分，图标字体下载后的iconfont.css中的图标字体内容（打叉部分不需要）

image.png

第四步，引用

在app.wxss的头部引入该文件样式：@import "iconfont.wxss";
通过font-size改变图标大小，通过color改变图标颜色。