weuicss样式,weui设计规范

微信小程序使用weui怎么只有样式功能却用不了?

方法/步骤

下载 weui.wxss

请点击输入图片描述

解压缩文件，可以看到如下文件

请点击输入图片描述

打开开发者工具，新建一个项目

请点击输入图片描述

下面的小程序初始化的文件内容及结构

请点击输入图片描述

找到上述文件dist/style目录下weui.wxss

请点击输入图片描述

将weui.wxss放到小程序项目的更目录下

请点击输入图片描述

引用weui.wxss，在app.wxss引入

请点击输入图片描述

实验weui.wsxx

请点击输入图片描述

查看效果，此时说明我们的样式已经引用成功。

请点击输入图片描述

相关问答

Q1: jquery weui中tabar触发颜色怎么改

weui_tabbar_label 这个CSS 样式 color 自己改你想要的颜色就行

看下文档啊 兄弟 几分钟的事情 你这样等答案累死你

Q2: Taro 3.3 alpha 发布：用 ant-design 开发小程序？

小程序的设计并没有完全遵循 Web 规范，导致小程序生态和传统 Web 开发生态之间的割裂，海量优秀的 Web 物料并不能直接用于小程序开发。因而 Taro 在相当一段时间内生态都相对薄弱，UI 框架选择不多的问题更是深深困扰着开发者。

另一方面，业界有着存量的 H5 应用，中短期内 H5 应用适配到小程序端的需要还会存在。我们希望能减少 H5 应用迁移到小程序端的成本，甚至能够直接运行在小程序端。

Taro 团队一直在思考如何最大限度地在小程序环境中复用 Web 生态，直到 Taro 3.0 诞生后，这种想法有了落地的可能。下文将介绍基于 Taro 3.0 实现 H5 同构的思路与问题，以及我们尝试适配了三大移动端 UI 框架 WEUI 、 Ant Design Mobile 、 VantUI 的实验结果。

Taro 3.0 是一款重运行时的跨端框架，它通过模拟实现浏览器的 BOM 和 DOM API 实现了对 React、Vue 等 Web 开发框架的兼容。

既然已经有了浏览器环境的 BOM 和 DOM API，Taro 应用和 Web 应用之间的鸿沟在于小程序组件和 HTML 标签之间的差异。

Taro3 的渲染数据流如下：

前端框架 - Taro DOM - 小程序 data

HTML 标签和小程序组件的标签名、属性、事件是有差异的，而前端框架无需感知这些差异。

因此前端框架适配层、Taro DOM 层不需要改动，只要在 Taro DOM 序列化为小程序 data 这一步作映射即可。

HTML 标签相对小程序组件封装程度更低、功能更简单，可以看作是小程序组件的子集。因此可以按一定的规则，把 HTML 标签映射为小程序组件，如：

完整的标签名映射规则请看： RFC 附录一

如果 HTML 标签的属性能在对应小程序组件的属性上找到对应，则进行映射，如：

完整的属性名映射规则请看： RFC 附录二

把 HTML 特有的事件在小程序端找到相似的事件进行映射，如：

完整的事件映射规则请看： RFC 附录三

前文介绍了我们会把 HTML 标签映射为小程序组件，但是 H5 应用中使用到的 CSS 标签选择器就会失效。

因此 Taro 使用了类名去进行模拟：

Taro 提供两种内置的浏览器默认样式，可以直接引入生效：

理想很美好，但现实却略显骨感。即使 Taro 能实现 BOM、DOM API，支持使用 HTML 标签等，同构方案还是存在着一些框架层面抹平不了的差异。以下列举出若干主要限制：

在 H5 中我们可以调用 DOM API 同步获取元素的尺寸：

但是在小程序中，获取元素尺寸的 API 是异步的：

因此不能兼容那些使用了同步 DOM API 去获取元素尺寸的组件。

canvas 、 video 、 audio 等标签在 H5 端可以直接调用 HTMLElement 上的方法：

但是在 Taro 中，要调用组件上的原生方法，必须先创建对应的 Context ：

部分样式或 CSS 选择器在小程序中不支持，如：

首先需要安装 v3.3 的 CLI 工具：

然后进入项目，把 package.json 文件中 taro 相关依赖的版本修改为 ^3.3.0-alpha.2 ，再重新安装依赖（建议先把 node_modules 文件夹删除）。

为了节省项目空间，同构功能是可选的，以 Taro 插件的形式提供。

首先开发者需要安装插件 @tarojs/plugin-html ：

然后配置使用此插件：

为了验证同构功能的可用性和效果，我们对 CSS 样式库 WEUI 、React 组件库 Antd Design Mobile 、Vue2 组件库 VantUI 的所有组件进行了测试。

测试效果比较理想，甚至稍微超出我们的预期，配合各组件库自身的按需加载能力，能以小巧的体积使用丰富的组件，相信各位开发者会喜欢这个功能。

仓库地址： taro-weui

WEUI 是一个 CSS 的样式库，与框架无关，兼容性比较高，大部分组件能直接使用。

仓库地址： taro-antd-mobile

能直接兼容使用的组件大概为 80%，主要问题在于：

仓库地址： taro-vant

VantUI 的组件十分丰富，能直接兼容使用的组件大概为 70%。部分开发者会在 Taro 中配合使用 Vant Weapp，但 Vant Weapp 只能运行在微信小程序，因此对 VantUI 的直接适配是一个很好的补充。

适配过程主要遇到的问题有：

同构方案还在持续优化中，部分实现还没有最终定稿。欢迎各位开发者到我们的论坛下留言，提出您的宝贵意见～： 同构方案 RFC 。

欢迎关注凹凸实验室

Q3: jqeury weui和weui.css不一样吗

weui.css只是微信的UI布局

weui应该还包括他的js文件吧，包含了js文件才能实现微信表单的响应，包括页面切换，按钮点击事件等效果。

weui应该提供了一个默认的网页路由式交互demo，这个可以好好研究一下，对做手机H5页面非常有用。

Q4: 如何利用weui作为前端来开发

先引用样式文件. 请在github上下载对应的文件.

下载地址为: 3次未审核, 搜索吧.

下载之后的目录结构为:

dist : 编译之后的目录, 里面的文件可以直接使用

src : 源码目录

可以打开dist下example目录, 这个是官方的例子文件. 里面比较全的基本使用方法.

打开example目录下的index.html 就可以看到官方的例子了.

这里需要说明一下, 这个官方使用的zepto.js框架. 这个框架更加适用移动端.

开始使用, 如果使用呢? 第一步先把css文件引用到页面中.

link rel="stylesheet" type="text/css" href="路径地址" /

然后, 就可以使用官方的样式了. 首先来说明一下button.

使用方法:class="weui_btn weui_btn_primary"

其中属性有:

weui_btn weui_btn_primary

weui_btn weui_btn_warn

weui_btn weui_btn_default

三种, 如果你想扩展, 直接增加响应的样式就可以了.

Tab使用:

tab包含两种: navbar 和 tabbar

使用方法.

navbar :

div class="weui_tab"

div class="weui_navbar"

div class="weui_navbar_item weui_bar_item_on" 选项一/div

div class="weui_navbar_item" 选项二 /div

div class="weui_navbar_item"选项三 /div

/div

div class="weui_tab_bd"/div

/div

weui_bar_item_on 为选中项

tabbar:

div class="weui_tabbar"

a href="javascript:;" class="weui_tabbar_item weui_bar_item_on"

div class="weui_tabbar_icon"

img src="./images/icon_nav_button.png" alt=""

/div

p class="weui_tabbar_label"微信/p

/a

a href="javascript:;" class="weui_tabbar_item"

div class="weui_tabbar_icon"

img src="./images/icon_nav_msg.png" alt=""

/div

p class="weui_tabbar_label"通讯录/p

/a

a href="javascript:;" class="weui_tabbar_item"

div class="weui_tabbar_icon"

img src="./images/icon_nav_article.png" alt=""

/div

p class="weui_tabbar_label"发现/p

/a

a href="javascript:;" class="weui_tabbar_item"

div class="weui_tabbar_icon"

img src="./images/icon_nav_cell.png" alt=""

/div

p class="weui_tabbar_label"我/p

/a

/div

图片来自官方例子中的素材.

Toast

弹出层: 一个是弹出提示数据.

div id="toast"

div class="weui_mask_transparent"/div

div class="weui_toast"

i class="weui_icon_toast"/i

p class="weui_toast_content"已完成/p

/div

/div

使用$('#toast').show();进行显示数据.

searchBar搜索框

简单的搜索, 搜索世界的大不同, 不是所有的网站都可以

图标的使用.

i class="weui_icon_msg weui_icon_success"/i

i class="weui_icon_msg weui_icon_info"/i

i class="weui_icon_msg weui_icon_warn"/i

i class="weui_icon_msg weui_icon_waiting"/i

i class="weui_icon_safe weui_icon_safe_success"/i

i class="weui_icon_safe weui_icon_safe_warn"/i

Panel的使用

div class="weui_panel weui_panel_access"

div class="weui_panel_hd"图文组合列表/div

div class="weui_panel_bd"

a href="javascript:void(0);" class="weui_media_box weui_media_appmsg"

div class="weui_media_hd"

img class="weui_media_appmsg_thumb" src="" alt=""

/div

div class="weui_media_bd"

h4 class="weui_media_title"标题一/h4

p class="weui_media_desc"由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。/p

/div

/a

a href="javascript:void(0);" class="weui_media_box weui_media_appmsg"

div class="weui_media_hd"

img class="weui_media_appmsg_thumb" src="" alt=""

/div

div class="weui_media_bd"

h4 class="weui_media_title"标题二/h4

p class="weui_media_desc"由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。/p

/div

/a

/div

a class="weui_panel_ft" href="javascript:void(0);"查看更多/a

/div

图片里面没有填写地址, 请您自己填写信息.

Q5: weui.css里面有个地方看不懂，请大神解答

红框标注的地方是CSS注释 无需在意

红框下方看上去貌似是base64转码过的一个远程文件地址