项目进度
github地址:github.com/icindy/fend…
相对第一天的计划来说，进度不是很理想，比预期的界面和功能要多很多，另外最近业余时间比较少，但是自己吹的牛，含着泪熬着夜也要完成。文章可能要滞后一些才能发。
可以看第一篇：7天写”分答”微信小程序第一天:组织与首页
今天的开始
创建必要的公共类是必要的，能够统一整体ui效果，减少开发时间，有利于团队开发过程中的重复利用率和效率。同时后期维护也会轻松很多
这是本篇的文章
icindy/fenda/blob/master/common.wxss
/*定义公共基础色彩*/
.fd-color-orange{
color: #f85f48;
}
.fd-backcolor-orange{
background-color: #f85f48;
}
.fd-color-blue{
color: #28aef5;
}
.fd-backcolor-blue{
background-color: #28aef5;
}
.fd-color-green{
color: #1ccda6;
}
这是本篇的主要效果gif
前提
创建公共类前，你必须要知道整体的要求、整体的逻辑及整体的UI，避免做重复工作和无用功.
接下来是我在制作分答微信小程序过程中分析顺序和建立顺序。
公共颜色、字体、高度
既然wxss没有sass的变量等功能，我们就没有办法实现类似宏定义的方式来定义公共颜色、公共字体大小等，但是我们可以建立一套公有的wxss，在需要的时候为元素添加必要的css效果
- 1.简单实用标注工具(markman)进行标注必要的颜色，高度等
微信小程序中app.wxss为公共类，当然你也可以自己建立common.wxss，并使用@import "common.wxss";引入使用
小TIPS： 微信小程序建议使用rpx或者rem,本篇使用rpx(iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。)
/*定义公共基础色彩*/
.fd-color-orange{
color: #f85f48;
}
.fd-backcolor-orange{
background-color: #f85f48;
}
.fd-color-blue{
color: #28aef5;
}
.fd-backcolor-blue{
background-color: #28aef5;
}
/............/
/*定义高度*/
.fd-avatar-large{
height: 106rpx;
width: 106rpx;
border-radius: 50%;
}
.fd-avatar-middle{
height:74rpx;
width: 74rpx;
border-radius: 50%;
}
.fd-avatar-small{
height: 50rpx;
width: 50rpx;
border-radius: 50%;
}公共组件
微信提供的组件可以满足简单的无自定义UI要求的程序，如果你希望完成UI给你的效果，你需要自定义自己的组件，以供程序使用。
//例子自定义已有的button
/*buttons*/
.fd-defalut-btn{
background-color: #f85f48 !important;
color: #fff !important;
border-color: #f85f48 !important;
}
// 写一个纯自定义的button
//wxml代码公共模版
公共模块是在多view中被调用，基本上所有的列表类型的可以制作一个模版文件来调用。感觉模版类似于移动开发中的viewmodel模块，当然微信小程序应该也是一种MVVM的开发模式?
/*公共模版*/
/*question,dynamic*/
.dynamic, .question{
background: #fff;
padding: .3rem .45rem;
margin: .4rem 0;
}
.dynamic-content, .question-content{
color: #3f3f3f;
font-size: .8rem;
}
.dynamic-respondent,.question-respondent{
display: inline-block;
width: 100%;
color: #999;
font-size: .65rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.dynamic-answer,.question-answer{
margin-top: .3rem;
}
.dynamic-time{
display: inline-block;
width: 50%;
color: #999;
font-size: .65rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.dynamic-num{
text-align: right;
display: inline-block;
width: 50%;
color: #999;
font-size: .65rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.avatar{
position:relative;width:1.85rem;height:1.85rem;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:.675rem;
}
.avatarImg{
position:relative;width:1.85rem;height:1.85rem;border-radius:50%;display:inline-block;
}
.voice{
display:inline-block;
}
.bubble{
float: none;
display: block;
background: #1ccda6;
line-height: 2.2rem;
height: 2.2rem;
border-radius: 1.1rem;
text-align: center;
min-width: 9rem;
color: #fff;
font-size: .8rem;
text-decoration: none;
position: relative;
margin-right: .35rem;
}
.bubble-blue {
background: #28aef5;
}
.bubble-tail {
width: .83rem;
height: 1.185rem;
position: absolute;
bottom: 0;
left: -.3rem;
background-image: url('/images/bubble-tail.png');
background-size: .83rem 1.185rem;
}
.wave3 {
display: block;
position: absolute;
width: .8rem;
height: .8rem;
background-image: url('/images/bubble-wav3.png');
background-size: .8rem;
top: .65rem;
left: .65rem;
}接下来要做的
因为今天还没有完全做完，稍后会更新今天的第二篇文章，主要讨论，分析建立模型、凭凑视图
