小程序官方推荐使用flex布局。pages/home目录下新建home.wxss文件，文件的样式只适用于当前页面。
rpx是小程序为适应不同宽度的手机而发明的长度单位，所有手机宽度都为750rpx。
weui是腾讯官方维护的UI框架，我们可以直接拿来用。
将weui库中dist目录下的app.wxss拷贝到我们项目中的 app.wxss 中，在wxml文件中直接使用定义好的规则, 如 weui-btn 。
图片使用 image 标签。默认宽度为屏幕宽度。
图片轮播使用 swiper 标签。
先引用样式文件. 请在github上下载对应的文件.下载地址为: 3次未审核, 搜索吧.
下载之后的目录结构为:
dist : 编译之后的目录, 里面的文件可以直接使用
src : 源码目录
可以打开dist下example目录, 这个是官方的例子文件. 里面比较全的基本使用方法.
打开example目录下的index.html 就可以看到官方的例子了.
这里需要说明一下, 这个官方使用的zepto.js框架. 这个框架更加适用移动端.
开始使用, 如果使用呢? 第一步先把css文件引用到页面中.
<link rel="stylesheet" type="text/css" href="路径地址" />
然后, 就可以使用官方的样式了. 首先来说明一下button.
使用方法:class="weui_btn weui_btn_primary"
其中属性有:
weui_btn weui_btn_primary
weui_btn weui_btn_warn
weui_btn weui_btn_default
三种, 如果你想扩展, 直接增加响应的样式就可以了.
Tab使用:
tab包含两种: navbar 和 tabbar
使用方法.
navbar :
<div class="weui_tab">
<div class="weui_navbar">
<div class="weui_navbar_item weui_bar_item_on">选项一</div>
<div class="weui_navbar_item">选项二 </div>
<div class="weui_navbar_item">选项三 </div>
</div>
<div class="weui_tab_bd"></div>
</div>
weui_bar_item_on 为选中项
tabbar:
<div class="weui_tabbar">
<a href="javascript:" class="weui_tabbar_item weui_bar_item_on">
<div class="weui_tabbar_icon">
<img src="./images/icon_nav_button.png" alt="">
</div>
<p class="weui_tabbar_label">微信</p>
</a>
<a href="javascript:" class="weui_tabbar_item">
<div class="weui_tabbar_icon">
<img src="./images/icon_nav_msg.png" alt="">
</div>
<p class="weui_tabbar_label">通讯录</p>
</a>
<a href="javascript:" class="weui_tabbar_item">
<div class="weui_tabbar_icon">
<img src="./images/icon_nav_article.png" alt="">
</div>
<p class="weui_tabbar_label">发现</p>
</a>
<a href="javascript:" class="weui_tabbar_item">
<div class="weui_tabbar_icon">
<img src="./images/icon_nav_cell.png" alt="">
</div>
<p class="weui_tabbar_label">我</p>
</a>
</div>
图片来自官方例子中的素材.
Toast
弹出层: 一个是弹出提示数据.
<div id="toast">
<div class="weui_mask_transparent"></div>
<div class="weui_toast">
<i class="weui_icon_toast"></i>
<p class="weui_toast_content">已完成</p>
</div>
</div>
使用$('#toast').show()进行显示数据.
searchBar搜索框
简单的搜索, 搜索世界的大不同, 不是所有的网站都可以
图标的使用.
<i class="weui_icon_msg weui_icon_success"></i>
<i class="weui_icon_msg weui_icon_info"></i>
<i class="weui_icon_msg weui_icon_warn"></i>
<i class="weui_icon_msg weui_icon_waiting"></i>
<i class="weui_icon_safe weui_icon_safe_success"></i>
<i class="weui_icon_safe weui_icon_safe_warn"></i>
Panel的使用
<div class="weui_panel weui_panel_access">
<div class="weui_panel_hd">图文组合列表</div>
<div class="weui_panel_bd">
<a href="javascript:void(0)" class="weui_media_box weui_media_appmsg">
<div class="weui_media_hd">
<img class="weui_media_appmsg_thumb" src="" alt="">
</div>
<div class="weui_media_bd">
<h4 class="weui_media_title">标题一</h4>
<p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
</div>
</a>
<a href="javascript:void(0)" class="weui_media_box weui_media_appmsg">
<div class="weui_media_hd">
<img class="weui_media_appmsg_thumb" src="" alt="">
</div>
<div class="weui_media_bd">
<h4 class="weui_media_title">标题二</h4>
<p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
</div>
</a>
</div>
<a class="weui_panel_ft" href="javascript:void(0)">查看更多</a>
</div>
图片里面没有填写地址, 请您自己填写信息.
方法/步骤
下载 weui.wxss
请点击输入图片描述
解压缩文件，可以看到如下文件
请点击输入图片描述
打开开发者工具，新建一个项目
请点击输入图片描述
下面的小程序初始化的文件内容及结构
请点击输入图片描述
找到上述文件dist/style目录下weui.wxss
请点击输入图片描述
将weui.wxss放到小程序项目的更目录下
请点击输入图片描述
引用weui.wxss，在app.wxss引入
请点击输入图片描述
实验weui.wsxx
请点击输入图片描述
查看效果，此时说明我们的样式已经引用成功。
请点击输入图片描述
