支付宝小程序之连接后端+详谈引入阿里icon图标

更新于 2019-09-10  约 11 分钟

背景:第一天练习支付宝小程序的时候写好了一个简单的页面.后续是新增重置按钮,连接后端接口.然后加入icon图标.网上看了很多小程序加icon图标例子,说实话,没有单独能成功的,我也不记得结合了多少个才成功了.还是自己写了篇文章,记录下引入流程.可能有点啰嗦...但是比较详细.

连接后端接口:

第一步:设置服务器域名白名单

在开发区阿中的设置里面有个开发设置,在这里设置白名单的.我用的是公司账号.公司给了https的地址的.

clipboard.png

第二步:调用my.request()方法

       没写过app不知道怎么调用这个方法.但是还是知道是写在js文件里面的.然后把官网的例子丢进了js的page里面.
   就开始报错了.后面又丢到page外面就不报错了.然后我就以为我放对位置了.结果改了url后.传参数.一直报这个错:

clipboard.png

    最后发现这个方法是可以直接调用的.像这样,点击提交的时候直接调用这个方法.我觉得那个成功调用方法后的弹框应该是可以有其他方法的,
我这样写有些野蛮了.不过这个项目只需要这一个页面,也只用这一个接口.我就直接粗暴的在调用接口成功的地方根据不同的情况直接弹框了.当然loading还是要加一个的.

附上调用方法成功的代码截图:

clipboard.png

介绍下小程序开发者工具一些小功能:

小程序上面有个模拟器,打开了右边就会出现一个模拟的情况.就不用一直使用真机调试了.还可以切换手机型号,屏幕大小等等.

clipboard.png
小程序开发者工具上方的调试器打开后就是这样:
clipboard.png
这个功能还是蛮好的,和Google里打开F12一样.AXML里面是可以修改样式的.记得常用rpx为后缀,因为可以做到自适应屏幕.
(吐槽下,AXML就是输入样式的地方不太友好,.你得慢慢输入...不能急躁...自行体会..)

引入阿里icon图标:

第一步:进去阿里icon官网,https://www.iconfont.cn/ 一定要登录,没有帐号就注册一个github的帐号,很快的.然后建个项目出来.
点回主页,搜索出自己需要的icon图标.然后鼠标移到图标上,点击添加入库.(这个库里面图标好看还都是免费的.用起来很顺心~)
clipboard.png
第二步:在右上角有个购物车会显示一个1
clipboard.png
第三步:点击打开购物车,点击添加至项目
clipboard.png

clipboard.png
第四步:来到这个页面,点击下载至本地

clipboard.png
如果添加进项目后没有自动跳转至这个页面的话,可以自己找到我的项目的位置:

clipboard.png

第五步:打开下载后的文件,解压到桌面
clipboard.png
找到这个ttf后缀的文件备用,然后用浏览器进入 https://transfonter.org 网站.
clipboard.png
根据我截图的5个步骤来.在第一步的时候选中你桌面刚刚备用的ttf后缀的文件.然后依次执行2345步.
clipboard.png
这是在生成文件的状态(这里不需要操作,只是截图出来看看):
clipboard.png
然后点击Download,下载生成后的文件.
clipboard.png
同样解压至桌面:
clipboard.png
两个文件不要混淆了.最好改个名字.虽然我没改...
clipboard.png
最后找到这个文件,找到里面的iconfont.ttf和stylesheet.css文件备用.(温馨提示:不要找错了文件..是后下载的这个文件,刚刚要你们改名的这个文件)
clipboard.png

第六步:打开小程序开发者工具,在pages下面新建个static文件,在static里面再建个ali-icon文件.
(虽然我没搞明白为什么要建这么多层的意义..但还是这样做了...)
然后把刚刚备用的iconfont.ttf和stylesheet.css文件丢进ali-icon的文件夹里.
stylesheet.css文件改名为stylesheet.acss.再新建个iconfont.acss文件.
(iconfont.acss里面要引入styleheet.acss文件的,文件地址你们根据自己的目录结构来改.反正我的这样写是引入成功了的.)
clipboard.png

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{
  margin-left: 10px;
  margin-top: 50px;
  padding-top: 10px;
  font-family: "iconfont" !important;
  font-size: 17px;
  font-style: normal;
}

 
.icon-saoma:before{content:'\e686';}
.icon-home1:before{content:'\e7a3';}
.icon-gouwuche:before{content:'\e60c';}


回到阿里icon的官网.我的项目的地方.鼠标移到icon图标上.点击编辑图标
clipboard.png
我圈起来的这两个地方.要在iconfont.acss里面用到的.
clipboard.png
就是这里要更改的地方.
clipboard.png
这个是iconfont.ttf在小程序开发者工具里打开的样子.不用意外也不用管.本来就是这样的.
(只是截图给介绍一下,这里不需要做事情)
clipboard.png
这个是stylesheet.acss打开的样子.里面就是刚刚在 https://transfonter.org 网站里得到的文件.
(只是截图给介绍一下,这里也不需要做事情)
clipboard.png
第七步:在app.acss里面导入iconfont.acss文件.
clipboard.png
最后在需要用icon的地方使用它.
这里class=" " 里面的名字一定要跟你下载的icon图标名字一样.如果你在icon项目里面改了名字.那这里就用你改的名字.我没有改.

clipboard.png

附上我的小程序页面图.

clipboard.png

引入阿里icon图标需要注意的地方:
1:出现这样的报错信息:
clipboard.png

   不要慌,我遇到过很多次了.就是导入文件的层级关系出现了问题.小程序开始运行加载的就是app.acss.所以在这里检查你导入iconfont.acss的路径就可以了.@import "./pages/static/ali-icon/iconfont.acss"; 我这样写是可以找到iconfont.acss文件的.如果报了这个错误.你们根据自己实际路径情况去改吧.多试试就调好了的.

2:如果icon图标显示不全,就去检查iconfont.acss里面的content是不是写错了.
就是这里:icon-saomiaoshibie380:before{content:'e686';}
3:如果按照我的步骤第一次没有成功.那么就把文章拉倒最上面跟着步骤再试一次~依次类推~你肯定能成功导入的icon图标的~加油~~!

阅读 1.1k更新于 2019-09-10

推荐阅读
目录