AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:01:59

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:面向新手《十一》:weui-wxss的使用,page.json中背景色不生效
相关的资讯,希望对您有帮助。

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

一:weui-wxss的使用 分享者:SundayAaron,原文地址 概述:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、d ...

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

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-masterdistexamplesearchbar 文件都拷贝到你新建的项目 searchbar文件里
  • 调试、查看结果
    12.jpg
    其他效果同理

二: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;
}

75阅读 | 0评论
你的回应
写文章

6928