收藏
回答

为什么引入weui.wxss 之后不显示图标(icon)?

一、操作步骤

https://github.com/wechat-miniprogram/weui-miniprogram

WeUI下载后,将weui-wxss-master/dist/路径下的style文件夹复制粘贴到微信小程序的新建项目里

再将WeUI的tabbarde的wxml,wxss,js源代码分别复制粘贴到微信小程序的新建项目pages/index/路径下对应的index.wxml,index.wxss,index.js里面

然后在app.wxss中 @import  'style/weui.wxss‘,

然后编译,刷新


二、出现问题

1.编译后出现的tabbar(底部导航条)文字(微信,通讯录,发现,我)和右上角的红色带圈数字和小红点都和WeUI,但是文字(微信,通讯录,发现,我)上方的icon(图标)没有出现是什么原因?

2.调试器报错内容如下:

VM1571:1 Failed to load local image resource /pages/images/icon_tabbar.png 

 the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error) 

console.error @ VM1571:1

(anonymous) @ VM1596:2

3截图如下:

左下角的tabbar文字(微信,通讯录,发现,我)上方的icon(图标)缺失是什么原因?

请指点迷津

回答关注问题邀请回答
收藏

1 个回答

  • 拾忆
    拾忆
    08-11

    对应路径下放图片

    08-11
    有用
    回复 4
    • Alex
      Alex
      08-11
      WeUI组件库简介
      这是一套基于样式库weui-wxss开发的小程序扩展组件库,同微信原生视觉体验一致的UI组件库,由微信官方设计团队和小程序团队为微信小程序量身设计,令用户的使用感知更加统一。引入WeUI的目的就是为了统一UI效果,难道我还需要自己去找几张icon(图片)?
      WeUI的tabbar的效果图里面icon(图标)
      如下图:




      请问这个每个文字上面的icon(图标)是怎么通过WeUI实现的?
      08-11
      回复
    • 拾忆
      拾忆
      08-11回复Alex
      图片
      08-11
      回复
    • 拾忆
      拾忆
      08-11回复Alex
      https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html
      08-11
      1
      回复
    • Alex
      Alex
      08-12
      明白了,但是感觉有些麻烦,按理说小程序引入WeUI的目的就是让开发者不需为UI花费时间,通过将WeUI相关文件放在项目的对应目录下,再在app.wxss中@import weui.wxss之后,整个图标可以自动导入才对,而非自己还需要再手动添加图片
      08-12
      回复
登录 后发表内容
问题标签