微信小程序:其中wxml和wxss的样式说明

微信小程序:其中wxml和wxss的样式说明

一、简介

对于css不熟悉的Android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了。微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指定了界面的框架结构,而wxss指定了界面的框架及元素的显示样式。

二、wxml

界面结构wxmL比较容易理解,主要是由八大类基础组件构成:

关于这八大类的属性和具体用法可参考以下参考文献链接:

http://www.w3cschool.cn/weixinapp/itz51q8o.html

https://mp.weixin.qq.com/debug/wxadoc/dev/component/

三、wxss

wxml理解起来容易,但光搭好了框架,并不能达到我们想要的界面效果,这就需要用到wxss样式了。

wxss样式决定了组件应该如何显示,并在css的基础上做了一些功能扩展,主要包括:

1.尺寸单位

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。

rpx 与 px单位换算如下:

2.样式导入

可以使用@import语句来导入外联样式表,其后面跟需要导入外联样式表的相对路径,并以分号结束。

例如:

/** other.wxss **/

.appText{

  margin:10px;

}

/** app.wxss **/

@import “other.wxss“;

.content_text:{

  margin:15px;

}

app.wxss是全局样式,作用于每一个页面,而page下的每一个的wxss文件只作用于当前页面,并对全局样式中的相同属性会覆盖。

对于微信小程序wxss样式的使用来说,其实大部分都和css样式一致,下面简单的进行介绍一下:

wxss样式属性

(1)wxss display(显示)

flex:多栏多列布局 http://www.360doc.com/content/14/0811/01/2633_400926000.shtml

(2)wxss position(定位)

(3)wxss float(浮动)

(4)wxss backgrounp(背景)

(5)wxss border(边框)

(6)wxss outline(轮廓)

(7)wxss text(文件属性)

(8)wxss font(字体属性)

(9)wxss margin(外边距)

(10)wxss padding(填充)

(11)wxss 选择器

有一些属性值太多且实际应用的比较少 可以参考w3cschool的css文档:

http://www.w3cschool.cn/css/css-tutorial.html

对于微信小程序的文档手册可参考以下链接:

http://www.w3cschool.cn/weixinapp/9wou1q8j.html

原文地址:https://www.cnblogs.com/lizm166/p/9309185.html

时间: 2024-10-07 07:49:02

微信小程序:其中wxml和wxss的样式说明的相关文章

原创:新手布局福音!微信小程序使用flex的一些基础样式属性

来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能使用不同以往的居中方式并减少css的相关样式声明. 先来看看关于flex的一张图: 从上面可以看到一些flexbox的相关信息, main axis 和 cross axis 指的是flexbox内部flex项目(flex item)的排列方向,通俗点说就是,里面的flex项目是按照横轴或者纵轴排列的顺

小北微信小程序之小白教程系列之 -- 样式(WXSS)

为了适应广大的前端开发者,WXSS 具有 CSS 大部分 特性.同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改.与 CSS 相比,WXSS 扩展的特性有:尺寸单位和样式导入. 补充:关于扩展的特性我们下面会说,既然文档说了WXSS具有CSS 大部分特性,那么有什么不同那? 1.没有body 是的,在小程序的每一个page里是没有body属性的,不过你可以通过在wxss中对page的设置来影响整个页面的样式,比如下面的代码 page { background:#F8F8F8

HTML5标签转微信小程序(wxml)初学者

最近做项目的时候碰到一个问题,就是调用接口获取信息到页面上,内容与HTML5标签一起获取过来了.一起显示在微信端上.通过查找方法,找到了一个可以把HTML5标签转换微信小程序格式显示html5内容数据插件(wxParse),这种做法缺点就是每一次调用都会执行一次.但是可以把带html标签的数据输出为微信小程序正常显示的格式. 所以以下解决方法. 先把转换的html5的插件下载下来.1.下载地址:https://github.com/icindy/wxParse wxParse插件 我把下载好的插

小程序02 wxml和wxss

微信小程序的排版就跟wxml和wxss有关,它们两者相当于HTML和CSS,其中wxml指定了界面的框架结构,而wxss指定了界面的框架及元素的显示样式. 一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 view 视图容器 icon  图标 scroll-view 可滚动视图容器 text 文字 swiper 可滑动的视图容器 progress 进度条

微信小程序 text属性设置 WXSS样式

>微信小程序的布局css样式 参考自  珺L 文字 width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-weight:bold;    /*设置字体加粗*/border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/ font-family:"宋体";   /*设置字体为宋体*/ ----------------------

微信小程序去掉checkbox前面的方框/样式修改

微信小程序checkbox <checkbox-group bindchange="checkboxChange"> <label class="checkbox" wx:for="{{items}}" wx:key="item"> <checkbox value="{{item.name}}" checked="{{item.checked}}">{

微信小程序radio组件 - 如何改变默认样式大小?

今天在写小程序的时候用到radio组件,但是很懊恼并未提供修改radio组件大小属性,第一感觉准备用css width , height 改变radio的大小,但是怎么搞也无法改变. 但是又不愿意搞个图片或者字体啥的,感觉麻烦,后来用了下面样式可以改变radio默认样式大小: radio{ transform:scale(.8)  } 原文地址:https://www.cnblogs.com/changxue/p/8432531.html

webstrom支持微信小程序的wxml文件和wxss文件

webstrom默认不支持wxml文件和wxss文件,设置里面手动添加支持. 对wxml文件的支持: 文件 -> 设置 -> 编辑器 -> 文件类型 然后选择XML文件,然后点击下面的绿色添加按钮,如下图添加通配符设置,点击确认即可,然后点击确定按钮即可配置成功,就可看到webstrom支持wxml文件了 文件 -> 设置 -> 编辑器 -> 文件和代码模板, 点击上面的绿色添加按钮,如下图所示填写,然后点击确定,弹出注册新文件类型关联窗口,选择css,确定即可配置成功

微信小程序的wxml文件和wxss文件在webstrom的支持

webstrom默认不支持wxml文件和wxss文件,所以要进入设置里面手动添加支持. 对wxml文件的支持: 文件 -> 设置 -> 编辑器 -> 文件类型, 然后选择XML文件,然后点击下面的绿色添加按钮,如下图添加通配符设置,点击确认即可,然后点击确定按钮即可配置成功,就可看到webstrom支持wxml文件了 文件 -> 设置 -> 编辑器 -> 文件和代码模板, 点击上面的绿色添加按钮,如下图所示填写,然后点击确定,弹出注册新文件类型关联窗口,选择css,确定

微信小程序循环 给当前的css样式

<repeat for="{{array}}" key="index" index="index" item="item"> <form report-submit="true" @submit="submit" @reset="reset"> <button form-type="submit" class=&quo