TODO:小程序集成WeUI

Posted todosomeone

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了TODO:小程序集成WeUI相关的知识,希望对你有一定的参考价值。

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

技术分享

以上是关于TODO:小程序集成WeUI的主要内容,如果未能解决你的问题,请参考以下文章

重磅:微信小程序发布WeUI.js 官方视觉组件库!

[转]weui-wxss WeUI for 小程序 为微信小程序量身设计

微信小程序引入WeUI

微信小程序 weui 使用方法

微信小程序weui的使用

WeUI框架