7天写“分答”微信小程序第一天:组织与首页

首发地址：http://weappdev.com/t/topic/135

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;
}

欢迎加入微信小程序开发论坛http://weappdev.com/