微信小程序ui--集成WeUI.wxss
2017-01-12 19:35
971 查看
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则集成成功。
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则集成成功。
相关文章推荐
- 微信小程序之使用weui.wxss(八)
- 微信小程序 WeUi.wxss
- 1.3.3微信小程序WeUI.js网页开发样式库
- 让微信小程序和页面界面 UI 统一:WeUI 前端样式库
- 【微信小程序】微信小程序中WeUI的使用
- 微信小程序WeUI.js网页开发样式库
- 微信小程序weapp的底层实现原理
- 微信开发jquery WeUi框架
- 推荐手机H5应用快速开发 UI库(Framework7、SUI(淘宝)、MUI、WeUI(微信)、GMU(百度)、Frozen UI(QQ))
- 微信小程序把玩(一)Hello WeApp
- WeUI logo专为微信设计的 UI 库 WeUI
- 原创:WeZRender:微信小程序Canvas增强组件
- 微信小程序 - app.wxss文件
- jQuery 微信 weui 访问地址
- 微信小程序精品demo完工:We重邮
- [教程]微信官方开源UI库-WeUI使用方法【申明:来源于网络】
- HTML我帮您打造拖拽可视化的WEUI小程序工具
- 微信weui之dialog应用
- WeUI首页、文档和下载 - 专为微信设计的 UI 库 - 开源中国社区
- hello-weapp 微信小程序最简示例教程