|
本系列针对新手，为一些新手可能需要到的知识点聚合，更多本系列相关文章，请看相关文章内；
一：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文件里
-
调试、查看结果
其他效果同理
demo下载地址：
http://download.csdn.net/detail/sundayaaron/9709961
文件下载：
 weui的使用.zip
二：page.json中设置背景色不生效解决办法分享者：Pluto，原文地址
在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;
}
|
|
