每一个你不满意的现在,都有一个你不努力的曾经. 网站首页 > 其他
微信小程序之weui的引用及使用说明
发布时间:2019-01-11 09:28:56 修改时间:2019-01-11 09:38:08 阅读:6728 评论:0 0
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
官方demo演示地址:https://weui.io/
引用方式有两种:
样式导入示例:
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
示例代码:
/** weui.wxss **/
/*...*/
/** app.wxss **/
@import "weui.wxss";
.middle-p {
padding:15px;
}
现在我们引入weui.wxss;
首先下载weui.wxss;微信小程序UI框架we-ui github地址
或者 npm install --save weui
用微信web开发者工具打开dist目录(请注意,是dist目录,不是整个项目)
如何引用weui
组件的wxml结构请看dist/example/下的组件
样式文件可直接在app.wxss全局样式中引用dist/style/weui.wxss,或者单独引用dist/style/widget下的组件的wxss(参考以上示例)
如何使用WeUI
根组件使用class="page"
<view class="page"></view>
页面骨架组件使用class="page__xxx"(注意是两个下划线)
<view class="page">
<!--页头-->
<view class="page__hd"></view>
<!--主体-->
<view class="page__bd"></view>
<!--没有页脚-->
</view>
其他组件都已weui-开头后接组件名称,例如class="weui-footer"
<view class="weui-footer">我是页脚</view>
组件的子组件样式,例如view.weui-footer组件还有链接和版权信息。
<view class="weui-footer">
<view class="weui-footer__links">
<navigator url="" class="weui-footer__link">文章</navigator>
</view>
<view class="weui-footer__text">Copyright ©16000268号 </view>
</view>
组件和子组件使用两个下划线衔接,所以要区分什么时候用"-",什么时候用"__"
文档
WeUI 视觉标准参考 weui-design
回复列表
关键字词:style,span,margin-left,color,rgb,nbsp
上一篇:css常用属性
下一篇:微信小程序之优化建议