微信小程序开发从入门到放弃去网站下载微信开发者工具，安装完成后打开，新建项目，这里AppID选用测试号为了简单起见，方便

去网站下载微信开发者工具，安装完成后打开，新建项目，这里AppID选用测试号

为了简单起见，方便入门，我们把其它文件删除掉，如下图目录

起步

先来运行个简单的hello world

app.json 所有用到的页面都要在这里面注册

index.js 提供页面所要的数据等

index.json 这里面必须要{}

index.wxml 看到的页面结构都写在这里，相当于html页面

index.wxss 页面的样式，相当于css文件

运行效果如下所示

进阶

在pages新建一个image目录，准备了几张图片放到了该目录下

index.wxml代码如下

<view class="container">

	<view class="item" wx:for="{{img}}" wx:key="{{key}}">

		<view class="top">
			<view class="top-img">
				<image src="{{item.imgsrc}}" mode=""></image>
				
			</view>
		</view>

		<view class="bottom">
			<view class="info">
				<view class="user-header">
					<image src="{{item.user_img}}"></image>
				</view>
				<view class="user-name">
					{{item.user_name}}
				</view>
			</view>
			
			<view class="comment">
				<view class="comment-img">
					<image src="{{item.comment_img}}"></image>
				</view>
				<view class="count">
					{{item.count}}
				</view>
			</view>

		</view>
	</view>

</view>

index.wxss代码如下


.item{
  width: 45%;
  float: left;
  padding: 5px;
}
.top{
	
	height: auto;
}
.top-img{
	width: 100%;
	height: 100%;
}
.top image{
	width: 100%;
}


.user-header{
	width: 30px;
	height: 30px;
}

.user-header image{
	border-radius: 50%;
	height: 100%;
	width: 100%;
}

.bottom{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.info{
	display: flex;
	flex-direction: row;
}
.comment{
	display: flex;
	flex-direction: row;
	
	padding-right: 5px;
}
.comment-img{
	width: 20px;
	height: 20px;
}
.comment-img image{
	height: 100%;
	width: 100%;
	border-radius: 50%;
	padding-top: 5px;
}
.count{
	margin-top: 3px;
	padding-right: 5px;
	padding-left: 3px;
}
.user-name{
	padding-top: 5px;
	padding-left: 5px;
}

index.js代码如下

Page({
  data:{
    img:[
     { imgsrc: "../image/img_2.jpg", user_img: "../image/photo.jpg", user_name:"阿里巴巴", comment_img:"../image/comment.png",count:7},
     { imgsrc: "../image/img_1.jpg", user_img: "../image/photo.jpg", user_name:"腾讯", comment_img:"../image/comment.png",count:12},
     { imgsrc: "../image/img_1.jpg", user_img: "../image/photo.jpg", user_name:"百度", comment_img:"../image/comment.png",count:34},
     { imgsrc: "../image/img_2.jpg", user_img: "../image/photo.jpg", user_name:"抖音", comment_img:"../image/comment.png",count:13},
     { imgsrc: "../image/img_2.jpg", user_img: "../image/photo.jpg", user_name:"马云", comment_img:"../image/comment.png",count:22},
	 { imgsrc: "../image/img_1.jpg", user_img: "../image/photo.jpg", user_name:"马化腾", comment_img:"../image/comment.png",count:10},
	 { imgsrc: "../image/img_1.jpg", user_img: "../image/photo.jpg", user_name:"李颜宏", comment_img:"../image/comment.png",count:1}
    ]
  }
})

运行效果如下

需要注意的是<image>组件，怎么显示出图片原来的高度，可以查看官方文档了解，目前这个问题我还没有解决

瀑布流布局

我们接着优化这个页面，使用css瀑布流布局，<image>组件组件设置图片模式

index.wxss代码如下


.container{
	margin: 0 auto;
	width: auto;
	column-count: 2;
	column-width: 150px;
	column-gap: 1px;
}
.item{
  width: 90%;
  padding: 5px;
  margin-bottom: 10px;
  break-inside: avoid;
}

.top-img{
	width: 100%;
	
}
.top image{
	width: 100%;
	
}


.user-header{
	width: 30px;
	height: 30px;
}

.user-header image{
	border-radius: 50%;
	height: 100%;
	width: 100%;
}

.bottom{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.info{
	display: flex;
	flex-direction: row;
}
.comment{
	display: flex;
	flex-direction: row;
	
	padding-right: 5px;
}
.comment-img{
	width: 20px;
	height: 20px;
}
.comment-img image{
	height: 100%;
	width: 100%;
	border-radius: 50%;
	padding-top: 5px;
}
.count{
	margin-top: 3px;
	padding-right: 5px;
	padding-left: 3px;
}
.user-name{
	padding-top: 5px;
	padding-left: 5px;
}