微信小程序WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。
WeUI的核心是对原生语义的渲染，基于此，我们为小程序开发者提供了一整套易用的高质量 UI 组件，帮助开发者更快速地开发出优质的小程序。
WeUI 支持多端同步开发：Web、iOS、Android、小程序。 WeUI 将会成为未来 Web 界面开发新标准。
WeUI 支持多端同步开发：Web、iOS、Android、小程序；它不仅能够带来一致性的体验，而且还能够大大减少前端工作量。WeUI 将会成为未来 Web 界面开发新标准。
WeUI 在界面上利用了大量的圆角和直线来衔接元素之间的关系；在字体上使用了中文字体“思源宋体”和“思源黑体”作为中文字体；在动效上使用了 CSS3 加速动效来衔接元素之间的关系。
// WeUI 样式代码片段
.weui-btn {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
padding-left: 14px;
font-size: 18px;
text-align: center;
color: #FFFFFF;
line-height: 2.55555556;
border-radius: 5px;
}
WeUI 样式代码片段如上所述：position 表明元素定位方式；display 表明元素显隐方式；margin 表明元素水平对齐方式；padding 表明内部间隙大小 ；font-size 表明字体大小 ；text-align 表明文本对齐方向 ；color 表明文本字体颜色 ；line-height 表明行间隙大小 ；border-radius
Cell是列表或者是表单的一项，常用于设置页的展示，或者用在表单中，作为表单的每一个要填写的项，Cell必须要放在Cells组件的下面。
{
"usingComponents": {
"mp-cells": "../components/cells/cells",
"mp-cell": "../components/cell/cell",
"mp-slideview": "../components/slideview/slideview"
}
}<view class="page">
<view class="page__hd">
<view class="page__title">Cell</view>
<view class="page__desc">列表</view>
</view>
<view class="page__bd">
<mp-cells ext-class="my-cells" title="带说明的列表项">
<mp-cell value="标题文字" footer="说明文字"></mp-cell>
<mp-cell>
<view>标题文字（使用slot）</view>
<view slot="footer">说明文字</view>
</mp-cell>
<mp-slideview buttons="{{slideButtons}}" bindbuttontap="slideButtonTap">
<mp-cell value="左滑可以删除" footer="说明文字"></mp-cell>
</mp-slideview>
</mp-cells>
<mp-cells title="带图标、说明的列表项" footer="底部说明文字">
<mp-cell value="标题文字" footer="说明文字">
<image slot="icon" src="{{icon}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
</mp-cell>
<mp-cell value="标题文字" footer="说明文字">
<image slot="icon" src="{{icon}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
</mp-cell>
</mp-cells>
<mp-cells title="带跳转的列表项">
<mp-cell link hover value="有hover效果" footer="说明文字">
<image slot="title" src="{{icon}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
</mp-cell>
<mp-cell link value="无hover效果" footer="说明文字">
<image slot="icon" src="{{icon}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
</mp-cell>
<mp-cell link url="../index" value="无hover效果，带跳转URL" footer="说明文字">
<image slot="icon" src="{{icon}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
</mp-cell>
</mp-cells>
</view>
</view>var base64 = require("../images/base64");
Page({
onLoad: function(){
this.setData({
icon: base64.icon20,
slideButtons: [{
text: "普通",
src: "/page/weui/cell/icon_love.svg", // icon的路径
},{
text: "普通",
extClass: "test",
src: "/page/weui/cell/icon_star.svg", // icon的路径
},{
type: "warn",
text: "警示",
extClass: "test",
src: "/page/weui/cell/icon_del.svg", // icon的路径
}],
});
},
slideButtonTap(e) {
console.log("slide button tap", e.detail)
}
});
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| ext-class | string | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | |
| icon | string | 否 | Cell的最左侧的icon，是本地图片的路径，icon和名为icon的slot互斥 | |
| title | string | 否 | Cell最左侧的标题，一般用在Form表单组件里面，icon和title二选一，title和名为title的slot互斥 | |
| hover | boolean | false | 否 | 是否有hover效果 |
| link | boolean | false | 否 | 右侧是有跳转的箭头，v1.0后的版本，link: true 会自带 hover 效果 |
| value | string | 是 | Cell的值，和默认的slot互斥 | |
| show-error | boolean | false | 否 | 用在Form表单组件里面，在表单校验出错的时候是否把Cell标为warn状态 |
| prop | string | 否 | 用在Form表单组件里面，需要校验的表单的字段名 | |
| footer | string | 否 | Cell右侧区域的内容，和名为footer的slot互斥 | |
| inline | boolean | 否 | 用在Form表单组件里面，表示表单项是左右显示还是上下显示 |
| 名称 | 描述 |
|---|---|
| icon | 左侧图标slot |
| title | 标题slot |
| 默认 | 内容slot |
| footer | 右侧区域slot |
该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。#在动态组件上使用 keep-alive我们之前曾经在一个...
为了学习如何更好地使用 Vue，不需要阅读本页，但是它提供了更多信息，如果你想知道渲染在背后是如何工作的。#虚拟 DOM现在我们...
快捷键列表（Shortcuts Cheatsheet）我把本文出现的Sublime Text按其类型整理在这里，以便查阅。通用（General）↑↓←→：上下...
问题描述：st3下ctrl+b执行python文件，报错“ImportError: cannot import name ThreadingTCPServer”但是在命令行下没有问题，...
这里我们可以先一起来玩一个“大家来找茬”的游戏：图1是使用没有修改过任何编辑器设置的 VS Code 打开的一个 JavaScript 的文件...