乐趣区

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

jiezi

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

连接后端接口:

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

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

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

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


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

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

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

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


小程序开发者工具上方的调试器打开后就是这样:

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

引入阿里 icon 图标:

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

第二步: 在右上角有个购物车会显示一个 1

第三步: 点击打开购物车, 点击添加至项目


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


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

第五步: 打开下载后的文件, 解压到桌面

找到这个 ttf 后缀的文件备用, 然后用浏览器进入 https://transfonter.org 网站.

根据我截图的 5 个步骤来. 在第一步的时候选中你桌面刚刚备用的 ttf 后缀的文件. 然后依次执行 2345 步.

这是在生成文件的状态 (这里不需要操作, 只是截图出来看看):

然后点击 Download, 下载生成后的文件.

同样解压至桌面:

两个文件不要混淆了. 最好改个名字. 虽然我没改 …

最后找到这个文件, 找到里面的 iconfont.ttf 和 stylesheet.css 文件备用.(温馨提示: 不要找错了文件.. 是后下载的这个文件, 刚刚要你们改名的这个文件)

第六步: 打开小程序开发者工具, 在 pages 下面新建个 static 文件, 在 static 里面再建个 ali-icon 文件.
(虽然我没搞明白为什么要建这么多层的意义.. 但还是这样做了 …)
然后把刚刚备用的 iconfont.ttf 和 stylesheet.css 文件丢进 ali-icon 的文件夹里.
stylesheet.css 文件改名为 stylesheet.acss. 再新建个 iconfont.acss 文件.
(iconfont.acss 里面要引入 styleheet.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{
  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 图标上. 点击编辑图标

我圈起来的这两个地方. 要在 iconfont.acss 里面用到的.

就是这里要更改的地方.

这个是 iconfont.ttf 在小程序开发者工具里打开的样子. 不用意外也不用管. 本来就是这样的.
(只是截图给介绍一下, 这里不需要做事情)

这个是 stylesheet.acss 打开的样子. 里面就是刚刚在 https://transfonter.org 网站里得到的文件.
(只是截图给介绍一下, 这里也不需要做事情)

第七步: 在 app.acss 里面导入 iconfont.acss 文件.

最后在需要用 icon 的地方使用它.
这里 class=” ” 里面的名字一定要跟你下载的 icon 图标名字一样. 如果你在 icon 项目里面改了名字. 那这里就用你改的名字. 我没有改.

附上我的小程序页面图.

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

   不要慌, 我遇到过很多次了. 就是导入文件的层级关系出现了问题. 小程序开始运行加载的就是 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 图标的~ 加油~~!

退出移动版