7天寫“分答”微信小程序第一天:組織與首頁

首發(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;
}

歡迎加入微信小程序開發(fā)論壇http://weappdev.com/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市旭旭,隨后出現(xiàn)的幾起案子谎脯,更是在濱河造成了極大的恐慌,老刑警劉巖持寄,帶你破解...
    沈念sama閱讀 222,865評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件源梭,死亡現(xiàn)場離奇詭異,居然都是意外死亡稍味,警方通過查閱死者的電腦和手機废麻,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來模庐,“玉大人烛愧,你說我怎么就攤上這事〉嗉睿” “怎么了怜姿?”我有些...
    開封第一講書人閱讀 169,631評論 0 364
  • 文/不壞的土叔 我叫張陵,是天一觀的道長疼燥。 經(jīng)常有香客問我社牲,道長,這世上最難降的妖魔是什么悴了? 我笑而不...
    開封第一講書人閱讀 60,199評論 1 300
  • 正文 為了忘掉前任搏恤,我火速辦了婚禮违寿,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘熟空。我一直安慰自己藤巢,他們只是感情好,可當我...
    茶點故事閱讀 69,196評論 6 398
  • 文/花漫 我一把揭開白布息罗。 她就那樣靜靜地躺著掂咒,像睡著了一般。 火紅的嫁衣襯著肌膚如雪迈喉。 梳的紋絲不亂的頭發(fā)上绍刮,一...
    開封第一講書人閱讀 52,793評論 1 314
  • 那天,我揣著相機與錄音挨摸,去河邊找鬼孩革。 笑死,一個胖子當著我的面吹牛得运,可吹牛的內(nèi)容都是我干的膝蜈。 我是一名探鬼主播,決...
    沈念sama閱讀 41,221評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼熔掺,長吁一口氣:“原來是場噩夢啊……” “哼饱搏!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起置逻,我...
    開封第一講書人閱讀 40,174評論 0 277
  • 序言:老撾萬榮一對情侶失蹤推沸,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后券坞,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體坤学,經(jīng)...
    沈念sama閱讀 46,699評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,770評論 3 343
  • 正文 我和宋清朗相戀三年报慕,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片压怠。...
    茶點故事閱讀 40,918評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡眠冈,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出菌瘫,到底是詐尸還是另有隱情蜗顽,我是刑警寧澤,帶...
    沈念sama閱讀 36,573評論 5 351
  • 正文 年R本政府宣布雨让,位于F島的核電站雇盖,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏栖忠。R本人自食惡果不足惜崔挖,卻給世界環(huán)境...
    茶點故事閱讀 42,255評論 3 336
  • 文/蒙蒙 一贸街、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧狸相,春花似錦薛匪、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至瘸右,卻和暖如春娇跟,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背太颤。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評論 1 274
  • 我被黑心中介騙來泰國打工苞俘, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人栋齿。 一個月前我還...
    沈念sama閱讀 49,364評論 3 379
  • 正文 我出身青樓苗胀,卻偏偏與公主長得像,于是被迫代替她去往敵國和親瓦堵。 傳聞我的和親對象是個殘疾皇子基协,可洞房花燭夜當晚...
    茶點故事閱讀 45,926評論 2 361

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,336評論 25 707
  • 章節(jié)目錄戳這里 上一章節(jié) 掐架 九、群架的打法 “小舟菇用,你看好了澜驮,今天我要教你,這群架的打法惋鸥≡忧睿”白銀嘴角勾起一個自...
    憐舟芷卉閱讀 209評論 0 0
  • 天涼了,秋來了卦绣。 山城沒有季節(jié)耐量。昨日是炎炎的夏日,曬的人臉發(fā)紅滤港,皮起皺廊蜒,連下了一周的雨,秋就過去了溅漾,就有了進入冬日...
    素心雪_9276閱讀 612評論 1 0
  • 今天中關(guān)村店創(chuàng)始會員招募盛典活動山叮,一號店的4個小伙伴們作為談單手去幫忙,這是預(yù)售以來第二次談單添履。上次是我們一號店創(chuàng)...
    Smile_Zhangjie閱讀 165評論 0 1
  • 今日8張女星/名人穿搭暮胧。 1锐借、“gone girl”Rosamund Pike最近在上海出席上海國際電影節(jié)问麸,這裙子...
    程蘇米閱讀 951評論 0 1