WeUI 自学总结

WeUI 李宜发 •
文章标签: WeUI总结
10

(一).自学内容

WeUI概述

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含buttoncell、dialog、progress、toastarticle、actionsheet、icon等各式元素。

WeUI的引入

  1. 下载地址：weui.wxss
    注意：样式文件可直接引用dist/style/weui.wxss，或者单独引用dist/style/widget下的组件的wxss
  2. 页头和主体使用class="page__xx"(注意是两个下划线)。
  3. 组件的子组件样式，例如weui-flex还有weui-flex__item信息。注意：子组件样式后面使用的两个下划线，"__"

(二).展示项目案例效果

   (1)主页效果图

  001.png

(2)注册页面效果图                /     密码找回页面效果图


002.png          004.png

(3)完成注册页面效果图


003.png

(4)通过邮箱地址重设密码页面效果图  /     通过手机号码重设密码页面效果图  


005.png                           006.png

({{handupNumber}}) ({{favoriteNumber}})
还能输出{{restrictNumber}}个字符  

  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :