欢迎光临,了解微信小程序开发,就上易用通!

面向新手《十一》:weui-wxss的使用,page.json中背景色不生效

发布:2018-02-01 17:53浏览: 来源:网络 作者:cola

本系列针对新手,为一些新手可能需要到的知识点聚合,更多本系列相关文章,请看相关文章内;
一:weui-wxss的使用

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

预览:

用微信web开发者工具打开dist目录(请注意,是dist目录,不是整个项目)

Github下载地址: 
https://github.com/weui/weui-wxss

11.jpg

使用:
  • 组件的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文件里
  • 调试、查看结果 
    12.jpg
    其他效果同理
demo下载地址: 
https://download.csdn.net/detail/sundayaaron/9709961
文件下载:
面向新手《十一》:weui-wxss的使用,page.json中背景色不生效(图3)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;

}





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。