站在巨人的肩膀上，所以先推荐一下两篇微信小程序UI相关的文章，我感觉挺好的，也许对你也有帮助。
因为我是Android端开发，所以思考方式可能会按照自己在Android中的布局方式去理解。在开发之前，首先把微信官方的组件看一遍，可以直接使用组件的用组件来完成。
一、基础
个人感觉薄荷健康商店小程序挺好看的，这里模仿这个小程序UI设计 和京东商城UI设计。当然功能添加会更多的使用自己在开发过程中遇到的问题以及处理方法，这部分只关注UI。
布局
1、 块级元素 例如<view/>
默认占一行高度，一般一行内有一个块级元素，添加新元素时，新元素会自动换行显示。一般作为容器出现，用于组织结构。
特点：
1）总是在新行上开始
2）宽度默认为 width + marginLeft + marginRight + paddingLeft + paddingRight 刚好等于父级元素内容区宽度，除非设定一个新宽度，当设置块级元素宽度为100%,如果当前块级元素存在padding margin则会导致块级元素溢出父元素
3）盒子模型高度默认由内容决定
4）盒子模型中高度、宽度、内外边距都可控制
5）可以容纳行内元素和其他块级元素
2、inline 行内元素。例如<text/>
特点
1）和其他非块级元素都在一行上
2）盒子模型中高度、宽度、上下margin，上下padding设置均无效，只能设置左右
3）宽度就是文字或图片的宽度，不可改变
4）行内元素宽度、高度都不能直接设置
5）行内元素只能容纳其他行内元素，在行内元素中放置块级元素会引起不必要的混乱
3、行内块元素。
可以设置宽高内外边距，可简单认为 行内块元素就是把块级元素以行的形式展现
4、浮动和定位
浮动 float
浮动框不在文档的普通流中，可向左或向右移动，直到其外边缘碰到其他包含或者另一个浮动框的边框为止
定位 position
1）fixed ：固定位置，这个挺好用的，例如购物车列表的结算，列表无论有多少数据，这个结算按钮一定要显示在屏幕底部位置，不能列表过长就把结算按钮覆盖住。这么多废话，还是来张图吧。底部的结算部分用fixed就比较容易实现
2）absolute：绝对定位。相对于屏幕上与自己相邻view来确定自己的位置。
3）relative：相对定位。相对于父容器来确定自己的位置
这几个都可通过 top right left bottom 来实现对组件位置的控制。【备注：可以在开发工具中试一下效果，怎么实现不重要，重要的是在考虑到手机适配问题的情况下你能实现】
4）static：没有定位(没使用过），top right left bottom 无法控制view的位置。
5、flex布局
1）display : 其中使用最多的是flex ，据说这是一种伸缩模型，提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。使用中 会发现这特别好用，如下图，微信官方示例效果图：
介绍几个常用的属性
flex-direction: view的排列方式
值： row | row-reverse | column | column-reverse
justify-content: 横轴方向的对齐方式
值：flex-start | flex-end | center | space-between | space-around
align-items: 纵轴方向的对齐方式
值：flex-start | flex-end | center | baseline | stretch
flex-wrap: 超出父容器时，是否换行
值：nowrap|wrap|wrap-reverse|initial|inherit;
align-content 属性用于修改 flex-wrap 属性的行为。用于设置各个行的对齐
其他设置
文字：
1）文字大小：font-size
2）加粗 ： font-weight : bolder 加粗效果更明显/bold 加粗
3）文字颜色：color：#ffffff
4）文字字体：font-family: Serif / Sans-serif / Monospace / Cursive / Fantasy
5）文字添加删除线：text-decoration：line-through
6）文字转换：text-transform:lowercase(小写字母) / uppercase(大写字母) / capitalize(每个单词首字母大写)
7）文字首行缩进： text-indent：30rpx
8）字间距： letter-spacing：10rpx
9）文字阴影：text-shadow: h-shadow v-shadow blur color; blur模糊度 可省略
10）文本换行规则： text-wrap：normal|none|unrestricted|suppress;
更多设置 可参考CSS文本效果
边框：
边框样式：border-style：none(无边框）/dotted(点状边框）/dashed(虚线边框）/solid(实线边框）/double(两个边框）/groove(3D沟槽边框）/ridge(3D脊边框）/inset(3D嵌入边框）/outset(3D突出边框）
设置边框简写，例如设置一个灰色的背景框
border-top: 1px solid #eee;
圆角： border-radius:50%;
盒阴影： box-shadow:10px 10px 5px #ccc;
空格
在<text></text>可设置空格，其他标签无效
<text decode='true'>手 机 号 </text>
ensp 中文字符空格一半大小 写法：  
emsp 中文字符空格大小 写法： & emsp;
nbsp 根据字体设置的空格大小 写法： & nbsp;
当然还有很多，这里仅仅列出我在开发中经常使用的，如果想了解更多，可查看上面CSS教程。
============================================================
ok,接下来 利用自己了解的知识点，来完成项目中购物车的页面（备注：项目中暂时放本地数据，后期会添加网络请求相关的，暂时不考虑网络请求）
要完成的页面 如图：
不会截动图，如果你看到这里，恰巧你知道什么好用的截动图的软件，或者知道怎么截，阔以告诉我一下呀，在此多谢你啦，谢谢哦
分析：
首先完成一个个商品的子条目，然后绘制店铺，这里需要循环嵌套两个循环来完成，一个是店铺的商品，一个是店铺，一个二维数组就搞定了。
绘制线，有两种方式，1）如果底色不是白色 可以用margin-top/margin-bottom绘制线。2）通过border来绘制，这个其实是绘制边框的，可以绘制左右上下，所以当然也可以绘制你想要的线条啦
细看会发现，图片外层有一层边框，这个并不是通过边距就可以做出来的，这里是绘制一个固定的边框，然后把图片等比缩放 放在框里，用相对布局就可以了。即 position: relative;，之前特别傻，要在一个view下面设置一张图片，用的都是margin 取负值放上去的，其实可以直接用相对布局实现
标题文字部分 在代码中我用了固定宽度，因为flex布局，当文字内容过多时 关闭按钮 会被挤的很小，当文字内容过少时 关闭按钮 会在文字后面 撑不到右边。当然 也可以直接对view设置定宽来实现。其实基于对屏幕适配一开始并不想使用固定的宽度，但是微信小程序中屏幕宽度固定为750rpx，所以写成定宽或者按比例分配是没有影响的。
注意，在wxml中，引用变量的地方，也就是{{}}的内容 ，注意{{}}前后不能有空格，例如 点击事件多了一个空格，提示如下错误：
wxml：
<view class='container'>
<block wx:for-items='{{list}}' wx:key='list' wx:for-item="item">
<!--店铺名称-->
<view class='flex-row white-bg padding20 mgn-b2'>
<image src='../../images/common/shop_logo.png' mode='aspectFit' class='shop-logo' />
<text class='font28 c-333 txt-c'>{{item.storeName}}</text>
</view>
<block wx:for-items='{{item.goods}}' wx:key='goods' wx:for-item="item">
<view class='item flex-row white-bg mgn-b2'>
<view class='item-body margin20'>
<image src='{{item.img}}' mode='aspectFit' />
</view>
<view class='flex-column margin20 item-content'>
<view class='flex-row '>
<text class='font30 c-333 cont-title'>{{item.title}}</text>
<image src='../../images/common/close.png' mode='aspectFit' class='shop-logo' />
</view>
<view class='flex-row between margin-t20'>
<text class='font32 c-fa6e57'>¥{{item.price}}</text>
<view class='flex-row font30'>
<view wx:if='{{num<2}}' class='bound-f plus-cut margin-r20 c-999'>
<text>-</text>
</view>
<view wx:else class='bound-3 plus-cut margin-r20 c-333'>
<text>-</text>
</view>
<view class='bg-e plus-cut'>{{item.num}}</view>
<view class='bound-3 plus-cut c-333 margin-l20 c-333'>
<text>+</text>
</view>
</view>
</view>
</view>
</view>
</block>
</block>
</view>
wxss 其实主要是这个设置属性的文件
.shop-logo {
width: 32rpx;
height: 32rpx;
}
.mgn-b2 {
margin-bottom: 2rpx;
}
.item {
position: relative;
left: 0;
}
.item-body {
width: 180rpx;
height: 180rpx;
border: 2rpx solid #eee;
}
.item-body image {
max-height: 160rpx;
max-width: 160rpx;
padding: 10rpx;
}
.item-content {
width: 100%;
}
.cont-title {
padding-right: 20rpx;
width:430rpx;
/**
设置显示两行，超过两行 则显示省略号
**/
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
max-lines: 2;
min-height: 80rpx;
}
.bound-3{
border: 1rpx solid #333333;
}
.bound-f{
border: 1rpx solid #999999;
}
.plus-cut{
display: flex;
width: 56rpx;
height: 56rpx;
justify-content: center;
align-items: center
}
.bg-e{
background-color: #eeeeee;
}
.txt-center{
text-align: center;
align-self: center;
}
js 设置数据
list:[{
storeName:'happy的小店',
goods:[{
img: "../../images/temp/slider.jpg",
title: '饱腹小清新，健康添动力',
price: '35.00',
num: 1
}, {
img: "../../images/temp/slider.jpg",
title: '饱腹小清新，健康添动力,饱腹小清新，健康添动力,饱腹小清新，健康添动力,饱腹小清新，健康添动力',
price: '35.00',
num: 1
}, {
img: "../../images/temp/slider.jpg",
title: '饱腹小清新，健康添动力',
price: '35.00',
num: 1
}]
}, {
storeName: 'happy的小店',
goods: [{
img: "../../images/temp/slider.jpg",
title: '饱腹小清新，健康添动力',
price: '35.00',
num: 1
}]
}, {
storeName: 'happy的小店',
goods: [{
img: "../../images/temp/slider.jpg",
title: '饱腹小清新，健康添动力',
price: '35.00',
num: 1
}]
}, {
storeName: 'happy的小店',
goods: [{
img: "../../images/temp/slider.jpg",
title: '饱腹小清新，健康添动力',
price: '35.00',
num: 1
}]
}]
希望能够帮到你，愿我们初心不改，热爱生活
微信小程序开发系列笔记：
微信小程序开发笔记（一）
