欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > xiaochun系列教程--微信小程序 WeUi.wxss

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:789

HTML5自适应律师工作室类网

2020-04-04   浏览:654

高端HTML5响应式企业通用网

2020-05-06   浏览:560

html5响应式外贸网站英文版

2020-05-08   浏览:545

HTML5影视传媒文化公司类网

2020-05-12   浏览:543

xiaochun系列教程--微信小程序 WeUi.wxss

发布时间:2020-11-16  

个啥?:小程序界的Bootstrap 
去哪下?:https://github.com/weui/weui/blob/master/README_cn.md 
干啥使?:就是企鹅公司告诉你,你的小程序要和我微信要保持一个尿性,一样式的。 
咋使呢?:把东西下载下来,怎么用呢,不然不白下了吗?网吧的两块钱不白花了吗?往下瞅

1.找到你下载的目录 
注意是在【weui-wxss/dist/style/】目录下,不要【weui-wxss/src】目录里面下载

2.将weui.wxss拷贝到小程序根目录中 

这里写图片描述

 
3.在app.wxss或页面wxss导入weui.wxss

/**app.wxss**/ @import 'weui.wxss';

1

2

1

2

4.weui也提供了单个组件的样式引入,流程同上。

5 根组件使用class=”page”

<view class="page"></view>

1

1

6 页面骨架

<view class="page"> <view class="page__hd"></view><!--页头--> <view class="page__bd"></view><!--主体--> <view></view><!--没有页脚--> </view>

1

2

3

4

5

1

2

3

4

5

7 除此之外都是按照weui-开头后接组件名称,例如class=”weui-footer”

<view class="weui-footer">我是页脚</view>

1

1

8 组件的子组件样式,例如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 © 业界良心</view> </view>

1

2

3

4

5

6

1

2

3

4

5

6

9.具体组件在小程序中新建个项目,地址指向weui-wxss-master\dist,就可以随时查找自己要的效果,剩下的就是复制粘贴了

xiaochun系列教程--微信小程序 WeUi.wxss

Tips:组件和子组件使用两个下划线衔接,所以要区分什么时候用”-“,什么时候用”__”