摘要：背景第一天练习支付宝小程序的时候写好了一个简单的页面后续是新增重置按钮连接后端接口然后加入图标网上看了很多小程序加图标例子说实话没有多带带能成功的我也不记得结合了多少个才成功了还是自己写了篇文章记录下引入流程可能有点啰嗦但是比较详细连接后端接
背景:第一天练习支付宝小程序的时候写好了一个简单的页面.后续是新增重置按钮,连接后端接口.然后加入icon图标.网上看了很多小程序加icon图标例子,说实话,没有多带带能成功的,我也不记得结合了多少个才成功了.还是自己写了篇文章,记录下引入流程.可能有点啰嗦...但是比较详细.
连接后端接口:第一步:设置服务器域名白名单
在开发区阿中的设置里面有个开发设置,在这里设置白名单的.我用的是公司账号.公司给了https的地址的.
第二步:调用my.request()方法
没写过app不知道怎么调用这个方法.但是还是知道是写在js文件里面的.然后把官网的例子丢进了js的page里面. 就开始报错了.后面又丢到page外面就不报错了.然后我就以为我放对位置了.结果改了url后.传参数.一直报这个错:
最后发现这个方法是可以直接调用的.像这样,点击提交的时候直接调用这个方法.我觉得那个成功调用方法后的弹框应该是可以有其他方法的, 我这样写有些野蛮了.不过这个项目只需要这一个页面,也只用这一个接口.我就直接粗暴的在调用接口成功的地方根据不同的情况直接弹框了.当然loading还是要加一个的.
附上调用方法成功的代码截图:
介绍下小程序开发者工具一些小功能:
小程序上面有个模拟器,打开了右边就会出现一个模拟的情况.就不用一直使用真机调试了.还可以切换手机型号,屏幕大小等等.
小程序开发者工具上方的调试器打开后就是这样:
这个功能还是蛮好的,和Google里打开F12一样.AXML里面是可以修改样式的.记得常用rpx为后缀,因为可以做到自适应屏幕.
(吐槽下,AXML就是输入样式的地方不太友好,.你得慢慢输入...不能急躁...自行体会..)
第一步:进去阿里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图标的~加油~~!
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116371.html
摘要：文件名字支付宝页面标题导航栏背景色是否允许下拉刷新默认页面是否支持纵向拽拉超出实际内容。请求数据请求支付宝的请求是如果需要设置支付宝为微信是参数不同如果是请求，需要给的值加上最终为 ①支付宝创建个人身份 【假如想要变成公司项目的 小程序管理员，千万千万不要变成==自研开发者==】 会设置不了的 ②支付宝的缓存机制 setStorageSync 【设置本地存储】 my.setStor...
摘要：继微信正式推出微信小程序后，各个大厂陆续发布了各自的小程序平台支付宝小程序百度小程序头条小程序，跨小程序平台开发也成为了众多小程序开发者要面临的问题。 继微信正式推出微信小程序后，各个大厂陆续发布了各自的小程序平台 —— 支付宝小程序、百度小程序、头条小程序，跨小程序平台开发也成为了众多小程序开发者要面临的问题。 Antmove - 小程序跨平台解决方案 小程序开发血泪史 小程序发展初...
摘要：月日，在阿里云峰会北京站上，阿里巴巴旗下的阿里云支付宝淘宝钉钉高德等联合发布阿里巴巴小程序繁星计划提供亿元补贴，扶持万小程序开发者万商家。会上，阿里云正式发布了小程序云。看到繁星计划已上热搜。通过小程序云服务可以极大的降低交付部署成本。3月21日，在2019阿里云峰会·北京站上，阿里巴巴旗下的阿里云、支付宝、淘宝、钉钉、高德等联合发布阿里巴巴小程序繁星计划：提供20亿元补贴，扶持200万+小...
阅读 3441·2021-11-18 10:02
阅读 1590·2021-10-12 10:12
阅读 2948·2021-10-09 09:53
阅读 4712·2021-09-09 09:34
阅读 760·2021-09-06 15:02
阅读 2754·2021-08-05 10:02
阅读 3113·2019-08-30 15:44
阅读 3105·2019-08-28 18:04
