小程序学习笔记2-使用weui开发小程序

2018-01-12 本文已影响1981人 Doris_Lee

不会写样式，怎样开发小程序？

作为一个对CSS一知半解的iOS开发者，开发小程序时如何写样式成为一大难题。幸好微信提供了WeUI这个样式库，让开头没有那么难，先用WeUI实现部分样式，过程中自己再慢慢巩固学习CSS样式。毕竟要实现设计效果，CSS（wxss）是一定要会的。

关于weui

上一篇笔记小程序学习笔记1中用到的weui是从别的项目抠出来的，要正式开始用先下载一下官方的库和Demo。
GitHub地址

集成步骤：

工程根目录下创建lib文件夹，下载weui.wxss放入lib中。
导入weUI，由于我要在整个项目中用，所以直接在app.wxss中导入

 @import "lib/weui.wxss";

weui GitHub主页上有相关使用说明，这里就不再赘述，稍微搬过来一点儿，先大体了解一下~

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

weui小程序Demo

weui 部分常用组件

各种样式的按钮：

button.png

常用表单输入：

input.png
各种列表样式:

List.png

最简单的开发方式-copy

打开下载的weui的Demo，找到自己需要的样式，将代码copy出来，粘贴到自己需要的地方就可以了~

抠代码.png

weui使用实战

确认开发需求，下图是一个简单的设置页面的UI。
下一步就是要实现这个效果，先从weuiDemo中找到相应的效果。
copy对应的wxml代码

<view class="weui-cells weui-cells_after-title">
            <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
                <view class="weui-cell__bd">cell standard</view>
                <view class="weui-cell__ft weui-cell__ft_in-access"></view>
            </navigator>
            <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
                <view class="weui-cell__bd">cell standard</view>
                <view class="weui-cell__ft weui-cell__ft_in-access"></view>
            </navigator>
        </view>

将这段代码粘贴到自己的设置页面中，修改一下文字

  <view class="weui-cells weui-cells_after-title">
    <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
        <view class="weui-cell__bd">问题反馈</view>
        <view class="weui-cell__ft weui-cell__ft_in-access"></view>
    </navigator>
    <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
        <view class="weui-cell__bd">关于我们</view>
        <view class="weui-cell__ft weui-cell__ft_in-access"></view>
    </navigator>
  </view>

编译一下，就这么简单一句样式都没写，一个页面就写完了~
与设计图还稍微有些不同，这就需要稍微修改一下CSS样式了。微信开发者工具提供了调试功能，对于新手来说，该样式比自己生写简单多了-_-

使用weui开发聊天列表页面

跟上面套路一样先确认页面需求：
从weui Demo中找相似的页面。可以用上面List中带标题、说明的列表项，也可以用下面Badge中的列表样式。

Badge.png
copy代码并修改，注意设计中的Badge是小红点，所以把Demo中的数字换成上面提供的小红点，然后右侧加上两行说明文字表示时间，稍微调整一下样式。

<view class="weui-cells weui-cells_after-title">
      <view class="weui-cell">
          <view class="weui-cell__hd" style="position: relative;margin-right: 10px;">
              <image src="../../images/chat_man.png" style="width: 50px; height: 50px; display: block"/>
              <view class="weui-badge weui-badge_dot" ></view>
          </view>
          <view class="weui-cell__bd">
              <view>王先生</view>
              <view style="font-size: 13px;color: #888888;">在吗？昨天和您签约的房...</view>
          </view>
          <view class="weui-cell__ft ">
              <view>2018-01-12</view>
              <view style="font-size: 13px;color: #888888;">12:04:45</view>
          </view>
      </view>
 </view>

WXSS中加了几行样式,设置头像image为圆角，调整小红点的位置。

.weui-cell__hd image {
  border-radius: 50%;
}
.weui-cell__hd .weui-badge_dot {
  position: absolute;
  top: .1em;
  right: .1em;
}

将列表项代码复制几条，编译一下，一个聊天列表就出来了。

image.png

只写了几行简单的样式，一个聊天列表页就搭建完成了，weui真的给开发人员省了不少力啊~