这里有新鲜出炉的微信小程序入门,程序狗速度看过来!
微信小程序(weixinxiaochengxu),简称小程序,缩写 XCX,英文名 mini program,是一种不需要下载安装即可使用的应用,它实现了应用 "触手可及" 的梦想,用户扫一扫或搜一下即可打开应用。
这篇文章主要介绍了微信小程序 简单 DEMO 布局,逻辑,样式的练习的相关资料, 这里写一个简单实例练习小程序的布局,并附实例代码和实现效果图,需要的朋友可以参考下
微信小程序 布局实例:
下面将会按照以下的顺序介绍:
布局的实现
逻辑的实现
样式的实现
1. 布局的实现
最大的布局是 view, view 布局中包含了:一张图片,文字描述,信息栏和分界线
- <!--最外层-->
- <view class="home-view1">
- <!--图片层-->
- <view class="home-view2">
- <image class="home-image1" src="http://qty83k.creatby.com/materials/origin/640e31829b8776967dedc670b5427d0f_origin.jpg">
- </image>
- </view>
- <!--描述层-->
- <text class="home-text1">
- 小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物
- </text>
- <!--信息层-->
- <view class="home-view3">
- <view class="home-view4">
- <image class="home-image-heart" src="http://qty83k.creatby.com/materials/origin/c5656ef00d38d89eae437c5a9102f8fa_origin.png">
- </image>
- <text class="home-text-heart bgColor">
- 22
- </text>
- </view>
- <text class="home-text-time">
- 2016.10.29
- </text>
- </view>
- <!--分界线line-->
- <view class="home-view-line">
- </view>
- <!--图片层(下面的代码直接复制了上面的所有布局代码)-->
- <view class="home-view2">
- <image class="home-image1" src="http://qty83k.creatby.com/materials/origin/640e31829b8776967dedc670b5427d0f_origin.jpg">
- </image>
- </view>
- <!--描述层-->
- <text class="home-text1">
- 小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物
- </text>
- <!--信息层-->
- <view class="home-view3">
- <view class="home-view4">
- <image class="home-image-heart" src="http://qty83k.creatby.com/materials/origin/c5656ef00d38d89eae437c5a9102f8fa_origin.png">
- </image>
- <text class="home-text-heart bgColor">
- 22
- </text>
- </view>
- <text class="home-text-time">
- 2016.10.29
- </text>
- </view>
- <!--分界线line-->
- <view class="home-view-line">
- </view>
- </view>
2. 逻辑的实现
只是注册了 Page 界面
- Page({
- data: {
- }
- })
3. 样式的实现
.home-view1 样式:display 规定最大 View 布局为弹性布局,justify-content 规定内容居中,竖直排列, …
.home-view3 样式:display 规定了信息栏布局为弹性布局,justify-content 规定内容水平平均分配
.home-view4 样式:display 规定了收藏图片和收藏数的父布局为弹性布局,align-items 规定内容在竖直方向居中
.home-image1 样式:规定图片的高度
.home-image-heart 样式:规定收藏图片的大小
.home-text1 样式:规定描述文字的样式,text-align 规定文字居中,line-height 规定两行文字之间的高度
.home-text-heart 样式:规定收藏数的样式,border-radius 规定边界圆角
.home-view-line 样式:是一条分界线
.bgColor 样式:规定收藏数的背景
- .home - view1 {
- display: flex;
- justify - content: center;
- flex - direction: column;
- height: 100 % ;
- width: 100 % ;
- margin: 6px;
- }
- .home - view3 {
- display: flex;
- justify - content: space - between;
- }
- .home - view4 {
- display: flex;
- align - items: center;
- }
- .home - image1 {
- height: 200px;
- }
- .home - image - heart {
- width: 30px;
- height: 30px;
- }
- .home - text1 {
- text - align: left;
- line - height: 25px;
- margin - top: 6px;
- margin - right: 6px;
- color: gray;
- }
- .home - text - heart {
- width: 22px;
- height: 22px;
- margin - left: 10px;
- border - radius: 20 % ;
- pad: 5px;
- text - align: center;
- }
- .home - text - time {
- text - align: center;
- margin - right: 20px;
- padding - top: 5px;
- color: gray;
- }
- .home - view - line {
- width: 100 % ;
- height: 6px;
- margin - top: 5px;
- background - color: gainsboro;
- }
- .bgColor {
- background - color: lightblue;
- opacity: 0.6;
- }
4. 效果图
来源: http://www.phperz.com/article/17/0721/330037.html