文档章节

TODO:小程序集成WeUI

OneTODO
 OneTODO
发布于 2016/11/15 08:18
字数 525
阅读 244
收藏 4

TODO:小程序集成WeUI

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

1.使用微信开发者工具添加新项目MWL

2.下载WeUI的源码,把style文件拷贝到MWL根目录,与pages文件夹同一级

3.WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者,我们的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序,我们对 CSS 进行了扩充以及修改。

与 CSS 相比我们扩展的特性有:

尺寸单位

样式导入

4.在app.wxss导入样式,使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

5.WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。

a)数据绑定

b)条件渲染

c)事件,关键参数是bindtap

6.组件,都包含在容器view里面,组件结合WeUI使用,构建出统一,美观都界面。

7.示例1,导航都标题是设置在*.json里面的 navigationBarTitleText,在app.json设置的参数是全局可使用,定义在page的json是局部页面可以使用。以此类推*.js也是有全局和局部之分。

代码:

看到代码里面有使用了WeUI的样式了,到此简单的WeUI则集成成功。

wxgzh:ludong86

© 著作权归作者所有

共有 人打赏支持
OneTODO
粉丝 1
博文 63
码字总数 26450
作品 0
厦门
程序员
私信 提问
jQuery WeUI v1.1.1 发布,新增滑动删除组件

微信公众账号开发利器 jQuery WeUI 更新了 V1.1.1 版本,同步官方 WeUI 最新版更新。 本次最大的改变是增加了滑动删除组件,类似于微信 iOS 端的滑动删除效果。在列表中可以通过手势滑动显示...

YC222
2017/11/13
3.1K
9
jQuery WeUI V0.6.0 发布,Bug 修复 & 新增组件

jQuery WeUI V0.6.0 发布了! jQuery WeUI 是基于微信官方 WeUI 的一个jQuery实现版,并且大大增强和拓展了官方weui的功能,非常适合进行微信公众账号的开发。 本次主要改动: 修复了日历和地...

YC222
2016/04/08
6.7K
8
jQuery WeUI V0.4.2 发布

jQuery WeUI V0.4.2 发布了! jQuery WeUI 中使用的是官方WeUI的CSS代码,并提供了jQuery/Zepto版本的JS API实现。因为直接使用了官方的CSS,所以你不用担心跟官方版本的冲突。实际上 jQuery...

YC222
2016/03/16
14.2K
28
WeUI 为微信 Web 服务量身设计

https://github.com/weui/weui WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 pr...

hi30059478
2016/02/06
2
0
jQuery WeUI 1.0.0-rc.1 发布,更新命名规则

jQuery WeUI 更新到 V1.0.0-rc.1, 同步 weui v1.1.0 官方的所有更新。 注意:因为 weui 更新了命名规则,所以 v1.0.0 开始,不兼容 v0.8.3 以及更低的版本。 建议老项目如果没有特别需要,不...

YC222
2016/12/29
2.7K
4

没有更多内容

加载失败,请刷新页面

加载更多

使用form表单同时实现上传文件和提交文本数据

使用form表单同时实现上传文件和提交文本数据,此示例中在后台将文件上传到阿里的oss存储服务器中 申请oss相关账号: endpoint = "http://oss-cn-qingdao.aliyuncs.com"; accessKeyId = "key"...

貔貅叔
12分钟前
1
0
结合实际场景谈一谈微服务配置

作为 Nacos 5W1H 的系列文章,本文将围绕“Where”,讲述 Nacos 配置管理的三个典型的应用场景: 数据库连接信息 限流阈值和降级开关 流量的动态调度 上一篇:Nacos帮我解决了什么问题? 数据...

阿里云云栖社区
15分钟前
1
0
在Windows安装运行Kafka

https://www.cnblogs.com/flower1990/p/7466882.html 一、安装JAVA JDK 1、下载安装包 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 注意:根据3......

洛水
16分钟前
1
0
插件

sftp Bracket Pair Colorizer Guides Auto Rename Tag Chinese (Simplified) Language Pack for Visual Studio Code...

dragon_tech
17分钟前
1
0
Missing Number(leetcode268)

Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missing from the array. Example 1: Input: [3,0,1]Output: 2 Example 2: Input: [9,6......

woshixin
21分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部