本系列针对新手,为一些新手可能需要到的知识点聚合,更多本系列相关文章,请看相关文章内;
一:weui-wxss的使用WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
预览:用微信web开发者工具打开dist目录(请注意,是dist目录,不是整个项目)
Github下载地址:
https://github.com/weui/weui-wxss
使用:
- 组件的wxml结构请看dist/example/下的组件
- 样式文件可直接引用dist/style/weui.wxss,或者单独引用dist/style/widget下的组件的wxss
使用示例:
- 下载weui-wxss压缩包,解压。
- 把dist/style/weui.wxss文件放到你项目的根目录(或者其他目录)。
-
在app.wxss中添加如下代码:@import 'weui.wxss';
注意:路径要对应上!
接下来我们以SearchBar为例,在自己的小程序里使用SearchBar样式。
- 新建快速项目
- 去除掉无用代码
- 把weui.wxss文件拷贝到项目目录
- 在app.wxss里引用样式文件 @import 'weui.wxss';
- 新建一个searchbar文件夹,在app.jason中定义searchbar页面
- 把weui-wxss里的 weui-wxss-master\dist\example\searchbar 文件都拷贝到你新建的项目 searchbar文件里
-
调试、查看结果
其他效果同理
二:page.json中设置背景色不生效解决办法分享者:Pluto,原文地址demo下载地址:
https://download.csdn.net/detail/sundayaaron/9709961文件下载:weui的使用.zip
在page.json中按照官方文档设置
{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" } |
实际上是并没有看到效果。。没找到解决办法,自己直接在wxss中改了样式,如下:
Page { background: #203348; color: #fff; font-size: 30rpx; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; } |