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

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

作为一个对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使用实战

1. 确认开发需求，下图是一个简单的设置页面的UI。

   
   
   

2. 下一步就是要实现这个效果，先从weuiDemo中找到相应的效果。

   
   
   

3. copy对应的wxml代码

            
                cell standard
                
            
            
                cell standard
                
            
        

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

  
    
        问题反馈
        
    
    
        关于我们
        
    
  

5. 编译一下，就这么简单一句样式都没写，一个页面就写完了~

   
   
   

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

使用weui开发聊天列表页面

1. 跟上面套路一样先确认页面需求：

   
   
   

2. 从weui Demo中找相似的页面。可以用上面List中带标题、说明的列表项，也可以用下面Badge中的列表样式。

   
   
   

   Badge.png

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

      
          
              
              
          
          
              王先生
              在吗？昨天和您签约的房...
          
          
              2018-01-12
              12:04:45
          
      
 

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

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

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

   
   
   

   image.png

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