背景：第一天练习支付宝小程序的时候写了一个简单的页面。后续就是添加一个reset按钮，连接到后台接口。然后添加一个图标图标。在网上看过很多给小程序添加icon图标的例子，说实话，没有人能单独成功，也不记得有多少组合成功了。还是自己写了一篇文章，记录一下介绍的过程。可能有点啰嗦……但是比较详细。连接后端接口：第一步：设置服务器域名白名单。在开发区的setting里面有一个developmentsetting，在这里设置白名单。我用的是公司账户。公司给出了https的地址。第二步：调用my.request()方法从来没有写过，app不知道怎么调用这个方法。但是我还是知道是写在js文件里的。然后我把官网的例子丢到js页面里。就开始报错了。后面丢到页面外就不会报错了。然后我想我把它放在了正确的地方。结果改了url，传了参数，一直报这个错：终于发现这个方法可以直接调用了。像这样，当我点击提交的时候，我直接调用了这个方法。我想方法调用成功后的弹出框应该还有其他方法。这样写对我来说有点野蛮。但是这个项目只需要这个页面，只用这个接口。我就直接粗暴的调用接口成功。根据不同的情况，框架会直接弹出。当然，loading还是要加上的。附上调用方法成功的代码截图：介绍小程序开发者工具的一些小功能：小程序上有个模拟器，打开右边有模拟的情况。您不必一直使用真实电话进行调试。还可以切换手机型号，屏幕大小等，小程序开发者工具上方的调试器打开后，是这样的：这个功能还是挺不错的，和谷歌打开一样F12。可以在AXML中修改样式。记得使用rpx作为后缀，因为可以适配屏幕。（吐槽下，AXML对输入样式不是很友好，得慢慢输入。。。不能急。。。自己体会。。）引入阿里图标icon：第一步：进入官网阿里图标，https://www.iconfont.cn/，一定要登录，没有账号就注册一个github账号，会很快的。然后构建一个项目。点击返回首页，搜索你需要的icon图标。然后将鼠标移到图标上并单击将其添加到库中。（本库的图标很漂亮，而且免费，很好用~）第二步1：右上角有个购物车，会显示一个1Step3：点击打开购物车，点击添加到项目第四步：来到这个页面，点击下载到本地如果添加项目后没有自动跳转到这个页面，可以我已经找到我项目的位置了：第五步：打开下载的文件，解压到桌面找到后缀为ttf的文件进行备份，然后用浏览器进入https://transfonter.org网站。按照我截图中的5个步骤加油。第一步，在桌面选择刚才备份的ttf后缀的文件。然后依次执行步骤2345。这是生成文件的状态（这里不用操作，直接截图看看）：然后点击下载，下载生成的文件。也解压到桌面：不要混淆这两个文件。最好改个名字。虽然我没改过。。。终于找到这个文件，找到里面的iconfont.ttf和stylesheet.css文件备份。（温馨提示：不要找错文件。。是你后来下载的文件，你只是要求重命名）第六步：打开小程序开发者工具，在pages下新建一个静态文件，创建一个ali-图标文件。（虽然没看懂建这么多层是什么意思。。但我还是照做了。。。）然后把刚才省下来的iconfont.ttf和stylesheet.css文件放到ali-icon文件夹里重命名.stylesheet.css文件到stylesheet.acss。然后创建一个新的iconfont.acss文件。（stylesheet.acss文件需要导入到iconfont.acss中，可以根据自己的目录结构更改文件地址，反正我的写法是导入成功。）iconfont.acss文件内容：@import》。/stylesheet.acss";@font-face{font-family:'iconfont';src:url('iconfont.eot');src:url('iconfont.eot?#iefix')format('embedded-opentype'),url('iconfont.woff')format('woff'),url('/static/ali-icon/iconfont.ttf')format('truetype'),/*使用的是ttf，所以这里的路径不能错*/url('iconfont.svg#iconfont')format('svg');}.iconfont{左边距：10px；保证金顶部：50像素;填充顶部：10px；字体系列：“iconfont”！重要；字体大小：17px；font-style:normal;}.icon-saoma:before{content:'\e686';}.icon-home1:before{content:'\e7a3';}.icon-gouwuche:before{content:'\e60c';}返回阿里图标官网。我的项目在哪里。将鼠标移动到图标icon。点击编辑图标圈出的两个地方是要在iconfont.acss中使用的。这里就是要改的地方。这是iconfont.ttf在小程序开发者工具中打开时的样子。别担心。是这样的（只是截图介绍一下，这里不用做什么）这就是打开的stylesheet.acss。就是刚刚从https://transfonter.org网站上拿到的文件。（只是截图介绍一下，这里也是什么都不用做）第七步：在app.acss中导入iconfont.acss文件。最后，在需要图标的地方使用它。这里，class=""中的名称必须与您下载的图标名称相同。如果您更改了图标项目中的名称。然后使用您在此处更改的名称。我没有改变它。附上我的小程序的页面图。引入阿里icon图标需要注意的事项：1：出现这样的错误信息：不要慌，我遇到过很多次了。导入文件的层级关系有问题。applet开始运行时会加载app.acss。因此，请在此处检查导入iconfont.acss的路径。@import"./pages/static/ali-icon/iconfont.acss";这样写就可以找到iconfont.acss文件了。如果报这个错，可以根据自己的实际路径情况更改。尝试并调整它。2：如果icon图标显示不全，请检查iconfont.acss中的内容是否写错了。这里是：icon-saomiaoshibie380:before{content:'e686';}3：如果你是第一次按照我的步骤操作，是没有成功的。然后把文章拉到最上面按照步骤再试一次~以此类推~一定能导入icon图标成功~加油~~！
