github仓库地址:https://github.com/icindy/fenda
目的是什么
- 自我学习，可以通过做一款微信小程序学习微信小程序相关的开发
- 和别人交流，光说不练假把式，欢迎批评指正
- 记录过程，方便其他人学习和建议
为什么是分答？
- 分答足够的简单－目前功能也多，不过主要功能没有那么复杂，不反感
- 分答已经有自己的webapp，获取资源及设计方便，直接上手
- 分答的功能基本上能够覆盖微信小程序的功能文档，练手和学习很合适
- 知道的人多,嘿嘿
第一天任务
- 采集必要信息
- 搭建整体框架
- 实现首页UI
先抛开发中遇到的问题，求助
如果您有好的方法建议，请告诉我，谢谢
- tabbar如果没有图标的情况下如何自定义
我查看了文档，发现貌似图标和文字都是必填的，稍后再看
- 图片如何做到自适应
mode模式中尝试了，但是自适应长度后image的高度依然会占据布局。
采集必要信息
主要是分答的功能分析和UI资源获取
- 功能分析
浏览器打开 http://fd.zaih.com/ 或 微信打开分答
1.限免－问题榜和悬赏
2.收听－关注等功能
3.找人－搜索
4.我的－个人信息
分答页面
- UI整体分析
当然，我很懒惰，直接拿官方的css来看和使用
Screen Shot 2016-10-17 at 11.49.17.png
- 搭建整体框架及文件目录－请看图片标注
微信小程序分答框架标注
- 实现首页UI
** 列表－使用模版模式引入 **
使用模版后，整个页面中的代码清晰很多，建议使用
1.建立模版-question.wxml
<template name="question">
<view class="question">
<view>
<text class="question-content">{{question.content}}</text>
</view>
<view>
<text class="question-respondent">{{question.authorName}}|{{question.authorBio}}</text>
</view>
<view class="question-answer">
<view class="avatar">
<image class="avatarImg" src="{{question.authorHead}}" />
</view>
<view class="voice">
<view wx:if="{{question.qtype == 0}}" class="bubble bubble-blue">
<view class="bubble-tail" style="background-image: url('/images/bubble-tail-blue.png')"></view>
<view class="wave3"></view>
<view>限时免费</view>
</view>
<view wx:elif="{{question.qtype == 1}" class="bubble">
<view class="bubble-tail"></view>
<view class="wave3"></view>
<view>一元偷偷听</view>
</view>
</view>
</view>
</view>
</template>
2.引入模版
在index.wxml中引入
<!--使用问题列表单项模版-->
<import src="/templates/question.wxml"/>
调用
<!-- 问题列表-->
<view>
<!--嵌套模版-->
<block wx:for="{{questions}}" wx:for-item="question">
<template is="question" data="{{question}}"/>
</block>
</view>
头部－swiper-tab
<!-- 顶部切换 -->
<view class="swiper-tab">
<view class="swiper-tab-list swiper-left {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">问题榜</view>
<view class="swiper-tab-list swiper-right {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">悬赏</view>
</view>
.swiper-tab{
padding: 10px 0px;
height: 30px;
line-height: 30px;
background: #FFF;
display: flex;
position: relative;
z-index: 2;
flex-direction:row;
justify-content:center;
align-items:center;
}
.swiper-tab-list{
color: #f85f48;
text-align: center;
border: 1px solid #f85f48;
margin: 10px 0px;
padding: 0 6px;
width: 60px;
font-size: 28rpx;
font-family: Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans CN", "PingFang SC", Roboto, "微软雅黑", "Heiti SC", "Microsoft Yahei", sans-serif
}
.swiper-left{
border-radius: .3rem 0 0 .3rem;
}
.swiper-right{
border-radius: 0 .3rem .3rem 0;
}
.on{
color: #fff;
background: #f85f48;
}
广告 － banner
<!--广告模块TODO: image属性的自适应-->
<view id="banner">
<image class="banner" mode="aspectFit" src="/images/test-ad.jpg" />
</view>
#banner{
background: #f5f5f5;
text-align: center;
}
.banner{
width:100%;
height:7.25rem;
}
