uniapp动态修改app图标,unifiap怎么设置

　　Uni如何更改图标：首先将图标文件中的“iconfont.ttf”放入静态文件夹中；然后打开“iconfont.css”检查unicode编码；最后，在“page.json”的配置项中填入相应图标的代码，并进行文本化。

　　UNI-APP开发(仿饿)开发课程：进入学习

　　本教程运行环境：Windows7系统，Uni-App版本2.5.1。这个方法适用于所有品牌的电脑。

　　推荐(免费):uni-app开发教程

　　UNI-APP添加顶部导航栏并且更换图标

　　Uni-app是一个使用Vue.js开发跨平台应用的前端框架

　　uni-app通过编写Vue.js代码，将其编译到iOS、Android、微信小程序等平台，保证其正确操作和优秀体验。

　　记录更换顶部导航栏的过程。

　　最终效果图

　　page.json中的配置项

　　{

　　路径:页面/我的/索引，

　　样式:{

　　app-plus :

　　标题视图:

　　按钮:[{

　　文本: \ue605 ，

　　fontSrc: /static/iconfont.ttf ，

　　fontSize: 22px ，

　　浮动:左

　　},

　　{

　　文本: \ue606 ，

　　fontSrc: /static/iconfont.ttf ，

　　fontSize: 22px

　　}

　　]

　　}

　　}

　　}

　　},

　　更换图标

　　1.在阿里巴巴矢量地图中选择你喜欢的图标，然后点击收藏。

　　收藏图标

　　2.右上角下载所有收藏的图标。

　　下载

　　3.在编辑器中打开下载的文件，将文件中的iconfont.ttf丢到静态文件夹中，然后打开iconfont.css查看unicode编码。

　　Unicode编码

　　4.最后在page.json的配置项文本中填入对应图标的代码，需要写成 \u*** ，然后重启。

　　5.最后填写相应的页面生命周期方法，通过e.index配置不同的方法

　　onNavigationBarButtonTap:函数(e){

　　console.log(JSON.stringify(e))

　　}，以上是uniapp如何改变图标的细节。更多请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。