微信小程序的学习笔记--（一）iconfont的引入

本人刚开始接触微信小程序的开发，写博客在于记录自己的学习历程，也希望各位大神能够指导一下小白*^_^*

1、微信小程序开发的准备工作

开发微信小程序前，首先去微信小程序官网下载微信小程序开发工具，官网地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，安装完成后，要进行后续项目的开发，需要申请一个微信小程序appID注册这一过程，鉴于个人只能申请5次小程序的appID，对于首次开发微信小程序的人员来说，可以暂时使用测试号进行开发实践，等到以后自己打算独立做一个项目的时候再注册一个个人appID也不迟。

2、微信小程序开发文档

官网中的开发文档写的很清楚，大家可以直接在官网上观看，此处列举一些个人觉得官网上不太详细的点

引入weui

因为开发的是微信小程序，因此在开发是，页面的风格要是能有一套标准的样式库的画会方便很多，weui就是小程序官方提供的一套样式库，下载地址：https://github.com/Tencent/weui-wxss，其中还有一些例子，建议在编辑其中打开查看，对开发比较有帮助，若需要引入其他的wxss样式库，引入方式同上。

iconfont的引入

wxss支持css、styl、less样式，但是不支持直接引入css样式文件，因此我们在引入iconfont的时候需要进行转换，将下载下来的iconfont压缩包中iconfont.ttf文件转换为base84的格式，转换网址：https://transfonter.org/

add fonts --> Base64 encode --> Formats --> Convert --> Download

将转换后的文件下载下来，建议建一个公共的global.wxss文件，将解压后将stylesheet.css文件中的内容拷贝到global.wxss，再将iconfont压缩包中iconfont.css中除了@font-face的那一段样式，其他的都拷贝出来到公共global.wxss文件，然后就可以正常使用了。

global.wxss

@font-face {
    font-family: 'iconfont';
    src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:20px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-kefu:before { content: "\e635"; }

.icon-iconset0135:before { content: "\e62e"; }

.icon-shouye11:before { content: "\e63c"; }

.icon-shaixuan:before { content: "\e64c"; }

.icon-lianxi:before { content: "\e636"; }

.icon-shouye2:before { content: "\e66d"; }

.icon-geshi_tupianpng:before { content: "\e6cf"; }

.icon-yonghubianji:before { content: "\e6b4"; }

.icon-bianji1:before { content: "\e602"; }

.icon-yasuobao:before { content: "\e64e"; }

关于正式开发前的准备工作暂时到这里，后续的开发再第二篇中再继续，