微信小程序之拓展篇——weui-wxss
来源:互联网 发布:iphone6s怎样设置网络 编辑:程序博客网 时间:2024/05/22 01:56
微信小程序之入门篇(一)
微信小程序之注册篇(二)
微信小程序之开发初体验(三)——开发工具使用和目录结构
微信小程序之生命周期(四)
微信小程序之数据绑定(五)
微信小程序之触控事件(六)
微信小程序之基础组件篇——视图容器(七)
微信小程序之基础组件篇——基础内容(八)
微信小程序之基础组件篇——表单组件(九)
微信小程序之基础组件篇——导航组件(十)
微信小程序之基础组件篇——媒体组件(十一)
微信小程序之API篇——豆瓣图书搜索(十二)
微信小程序之拓展篇——weui-wxss(十三)
如果你是一名前端开发攻城狮,你在使用小程序从零开始开发的时候,一定会想小程序有没有一个UI库,类似于前端中的Bootstrap,MD,Semantic UI这样的框架UI库,如果有的话,一定是一个完美的事情。上帝总是宠着我们,这样的好事情真的有,我的答案是weui-wxss。
http://www.jianshu.com/bookmarks
WeUI概述
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含buttoncell、dialog、progress、toastarticle、actionsheet、icon等各式元素。
WeUI的引入
- 下载地址:weui.wxss
注意:样式文件可直接引用dist/style/weui.wxss,或者单独引用dist/style/widget下的组件的wxss。
2.将style文件夹拷贝到小程序根目录中,如下图。
3.weui.wxss的引入。
方式一:在app.wxss内或者需要的页面引入style/weui.wxss。
/**app.wxss**/@import 'style.weui.wxss';
方式二:在app.wxss内或者需要的页面引入style/widget下的组件的wxss。
/**app.wxss---->引入button的wxss**/@import 'style.widget.weui-button.weui-button.wxss';
WeUI的使用
WeUI使用的例子在目录dist/example(与dist/style同一级目录),这里贴出dist/example/index.wxml代码
<view class="page"> <view class="page__hd"> <view class="page__title">WeUI</view> <view class="page__desc">WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。</view> </view> <view class="page__bd page__bd_spacing"> <view class="kind-list"> <block wx:for-items="{{list}}" wx:key="{{item.id}}"> <view class="kind-list__item"> <view id="{{item.id}}" class="weui-flex kind-list__item-hd {{item.open ? 'kind-list__item-hd_show' : ''}}" bindtap="kindToggle"> <view class="weui-flex__item">{{item.name}}</view> <image class="kind-list__img" src="images/icon_nav_{{item.id}}.png"></image> </view> <view class="kind-list__item-bd {{item.open ? 'kind-list__item-bd_show' : ''}}"> <view class="weui-cells {{item.open ? 'weui-cells_show' : ''}}"> <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item"> <navigator url="{{page}}/{{page}}" class="weui-cell weui-cell_access"> <view class="weui-cell__bd">{{page}}</view> <view class="weui-cell__ft weui-cell__ft_in-access"></view> </navigator> </block> </view> </view> </view> </block> </view> </view> <view class="page__ft"> <image src="images/icon_footer.png" style="width: 84px; height: 19px;"></image> </view></view>
分析以上代码可以发现:
- 根组件使用class="page"
<view class="page"></view>
- 页头和主体使用class="page__xx"(注意是两个下划线)
<view class="page"><!--页头--><view class="page__hd"></view><!--主体--><view class="page__bd"></view></view>
- 其他组件采用weui-xx,例如class = "weui-flex"。
<view id="{{item.id}}" class="weui-flex" > <view class="weui-flex__item">{{item.name}}</view> <image class="kind-list__img" src="images/icon_nav_{{item.id}}.png"></image></view>
- 组件的子组件样式,例如weui-flex还有weui-flex__item信息。
注意:子组件样式后面使用的两个下划线,"__"。
文档
WeUI 视觉标准参考 weui-design
- 微信小程序之拓展篇——weui-wxss
- 微信小程序开发之——weui-wxss的使用
- 微信小程序 WeUi.wxss
- 微信小程序ui--集成WeUI.wxss
- 微信小程序之wxss —— 微信小程序教程系列(13)
- 【笔记】微信小程序wxss之各种坑
- 微信小程序wxss文件属性
- 微信小程序开发教程之组件开发以及wxss介绍
- 微信小程序 - app.wxss文件
- 1.3.2微信小程序 WXSS
- 微信小程序wxss加载动画
- 微信小程序wxss设置样式
- 微信小程序框架wxss(一)wxss概述
- 微信小程序学习笔记——wxss使view填充整个页面
- 微信小程序-入门篇(app.wxml及app.wxss)
- 小程序四:视图之WXSS
- 微信小程序引入weui组件
- 微信小程序入门五:样式表wxss
- FTP主动模式和被动模式的比较
- 0223
- centos7 pip安装软件错误记录
- Pandas学习:对于Series和DataFrame一些基本操作
- Android studio git 回滚文件到上一个版本
- 微信小程序之拓展篇——weui-wxss
- ADB常用技术汇总.md
- 添加固定位置圆角
- android
- Android网络请求框架的使用okhttp
- transition,transform,animation
- iOS菜鸟开发记录(04)
- 常见SQL语句总结
- 数据预处理——One-hot编码