首發(fā)地址：http://weappdev.com/t/topic/135
github倉庫地址:https://github.com/icindy/fenda
目的是什么
- 自我學(xué)習(xí)军援，可以通過做一款微信小程序?qū)W習(xí)微信小程序相關(guān)的開發(fā)
- 和別人交流秦陋，光說不練假把式，歡迎批評指正
- 記錄過程盾沫，方便其他人學(xué)習(xí)和建議
為什么是分答？
- 分答足夠的簡單－目前功能也多勿璃，不過主要功能沒有那么復(fù)雜堤撵，不反感
- 分答已經(jīng)有自己的webapp，獲取資源及設(shè)計方便牧抵，直接上手
- 分答的功能基本上能夠覆蓋微信小程序的功能文檔，練手和學(xué)習(xí)很合適
- 知道的人多,嘿嘿
第一天任務(wù)
- 采集必要信息
- 搭建整體框架
- 實現(xiàn)首頁UI
先拋開發(fā)中遇到的問題彼棍，求助
如果您有好的方法建議灭忠，請告訴我，謝謝
- tabbar如果沒有圖標的情況下如何自定義
我查看了文檔座硕，發(fā)現(xiàn)貌似圖標和文字都是必填的弛作，稍后再看
- 圖片如何做到自適應(yīng)
mode模式中嘗試了，但是自適應(yīng)長度后image的高度依然會占據(jù)布局华匾。
采集必要信息
主要是分答的功能分析和UI資源獲取
- 功能分析
瀏覽器打開 http://fd.zaih.com/ 或 微信打開分答
1.限免－問題榜和懸賞
2.收聽－關(guān)注等功能
3.找人－搜索
4.我的－個人信息
分答頁面
- UI整體分析
當然映琳，我很懶惰，直接拿官方的css來看和使用
Screen Shot 2016-10-17 at 11.49.17.png
- 搭建整體框架及文件目錄－請看圖片標注
微信小程序分答框架標注
- 實現(xiàn)首頁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"/>
調(diào)用
<!-- 問題列表-->
<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屬性的自適應(yīng)-->
<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;
}
