|
本系列针对新手，为一些新手可能需要到的知识点聚合，更多本系列相关文章，请看相关文章内； 一：weui-wxss的使用
概述：WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。 预览：用微信web开发者工具打开dist目录（请注意，是dist目录，不是整个项目）
使用：- 组件的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中设置背景色不生效解决办法
在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;
} | 
收藏