美文网首页
小程序集成WeUI

小程序集成WeUI

作者: Programmer客栈 | 来源:发表于2017-01-18 17:53 被阅读0次

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则集成成功。

相关文章

  • 小程序集成WeUI

    WeUI 为微信 Web 服务量身设计。WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微...

  • TODO:小程序集成WeUI

    TODO:小程序集成WeUI WeUI 为微信 Web 服务量身设计。WeUI 是一套同微信原生视觉体验一致的基础...

  • 前端技术前沿4

    1:WeUI 小程序–使用教程 https://weui.io/ 2:美团小程序框架mpvue Github:h...

  • WeUI 小程序

    概述 WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用...

  • 小程序引用UI库-weUI

    WeUI for 小程序 为微信小程序量身设计 WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计...

  • 微信小程序之第三方UI框架

    一、WeUI WXSS WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体...

  • 小程序引入weui、修改weui样式

    引入weui:在app.json里添加 在需要使用weui的页面的json文件里引入要使用的组件 修改weui样式...

  • 2019-04-22

    微信小程序使用NPM npm init npm install --save weui-miniprogram 微...

  • WeUI for 小程序--使用教程

    WeUI for 小程序–使用教程 weUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 ...

  • 微信小程序 查看WeUI案例Demo报错:缺少文件, not s

    微信小程序 查看WeUI案例报错:缺少文件, error: /game.json not found 解决办法: ...

网友评论

      本文标题:小程序集成WeUI

      本文链接:https://www.haomeiwen.com/subject/uurbbttx.html