從零開始一個微信小程序版知乎
|
以(yi)(yi)前工(gong)作沒直接進行(xing)過小程序的開發(fa)(fa)，最(zui)近(jin)閑了下(xia)來就趕緊(jin)學習一(yi)下(xia)。因為(wei)從零開始，所(suo)以(yi)(yi)沒有使用任何框架及UI庫，記(ji)錄(lu)一(yi)下(xia)本次開發(fa)(fa)中(zhong)踩過的坑(keng)吧~ 展示效果(界面樣(yang)式設計與交互來自iOS 4.8.0版本知(zhi)乎App)：
動態效果請移步到GitHub查看。 一、開始前的準備
二、初始化一個小程序
weChatApp |___client | |___assets // 存儲圖片 | |___pages // 頁面 | | |___index // 首頁 | | |___index.wxml // 頁面結構文件 | | |___index.wxss // 樣式表文件 | | |___index.js // js文件 | |___utils // 全局公共函數 | |___app.js // 系統的方法處理文件 | |___app.json // 系統全局配置文件 | |___app.wxss // 全局的樣式表 | |___config.json // 域名等配置文件 |___project.config.json |___README
{
// 頁面路由
"pages": [
"pages/index/index", // 首頁
"pages/findMore/findMore", // 想法頁（開始起名為發現頁面，后來沒改/(ㄒoㄒ)/~~）
"pages/userCenter/userCenter", // 更多（同上，原來起名為個人中心o(╯□╰)o）
"pages/market/market", // 市場
"pages/searchResult/searchResult",// 搜索結果頁
"pages/message/message", // 消息列表頁
"pages/titleDetail/titleDetail", // 點擊標題進入的問題詳情頁
"pages/contentDetail/contentDetail"// 點擊內容進入的回答詳情頁
],
// 窗口
"window": {
"backgroundColor": "#FFF", // 窗口的背景色
"backgroundTextStyle": "dark", // 下拉背景字體、loading 圖的樣式，僅支持 dark/light
"navigationBarBackgroundColor": "#FFF",// 頂部tab背景顏色
"navigationBarTitleText": "知小乎", //頂部顯示標題
"navigationBarTextStyle": "black", // 導航欄標題顏色，僅支持 black/white
"enablePullDownRefresh": true // 是否開啟下拉刷新
},
// tab導航條
"tabBar": {
"backgroundColor": "#fff", // 背景顏色
"color": "#999", // 默認文字顏色
"selectedColor": "#1E8AE8", // 選中時文字顏色
"borderStyle": "white", // tabbar上邊框的顏色， 僅支持 black/white
/**
* tab列表，最少2個，最多5個
* selectedIconPath: 選中時圖片
* iconPath: 默認圖片
* pagePath: 對應頁面路由
* text: 對應文案
**/
"list": [{
"selectedIconPath": "assets/home-light.png",
"iconPath": "assets/home.png",
"pagePath": "pages/index/index",
"text": "首頁"
}, {
"selectedIconPath": "assets/find-light.png",
"iconPath": "assets/find.png",
"pagePath": "pages/findMore/findMore",
"text": "想法"
},
{
"selectedIconPath": "assets/market-light.png",
"iconPath": "assets/market.png",
"pagePath": "pages/market/market",
"text": "市場"
},
{
"selectedIconPath": "assets/msg-light.png",
"iconPath": "assets/msg.png",
"pagePath": "pages/message/message",
"text": "消息"
}, {
"selectedIconPath": "assets/more-light.png",
"iconPath": "assets/more.png",
"pagePath": "pages/userCenter/userCenter",
"text": "更多"
}]
}
}
三、開發中的遇到的問題及解決方案1、小程序渲(xuan)染HTML片段
看了網頁版知乎，接口返回的回答數據是一段HTML的代碼片段，所以答案中可以在任意位置都插入圖片。
經過反復嘗(chang)試，發現(xian)原生(sheng)寫法不支(zhi)持(chi)渲(xuan)染一段HTML代碼(ma)片段，因(yin)此(ci)放棄(qi)了返回HTML的(de)代碼(ma)片段的(de)做法，所以(yi)我的(de)回答(da)列表中也沒有圖片(?_?)。 但(dan)在調研中(zhong)發現了一個自(zi)定(ding)義組件：wxParse-微(wei)信小(xiao)程(cheng)序富文本解析(xi)組件，還沒(mei)嘗(chang)(chang)試(shi)使(shi)用，準備在下次優化(hua)項目(mu)時嘗(chang)(chang)試(shi)一下。
2、首頁的頂部tab切換 實現思路 每個可(ke)點擊(ji)的tab分(fen)別(bie)綁(bang)定data-index，在最外層bindtap綁(bang)定的方法中獲取所點擊(ji)的tab的index值，再根據index的值分(fen)別(bie)顯示(shi)對應(ying)的tab-content
<view class="tab-wrapper" bindtap="setActive">
<view class="tab-item {{isActive == 0 ? 'tab-item-active' : ''}}" data-index="0">關注</view>
<view class="tab-item {{isActive == 1 ? 'tab-item-active' : ''}}" data-index="1">推薦</view>
<view class="tab-item {{isActive == 2 ? 'tab-item-active' : ''}}" data-index="2">熱榜</view>
<view class="tab-item-line" animation="{{animationData}}"></view>
</view>
<view class="tab-content {{isActive == 0 ? 'show' : 'hide'}}">
// ...
</view>
<view class="tab-content {{isActive == 1 ? 'show' : 'hide'}}">
// ...
</view>
<view class="tab-content {{isActive == 2 ? 'show' : 'hide'}}">
// ...
</view>
3、上拉加(jia)載(zai)和下拉刷(shua)新 實現思路 上(shang)拉加載：emmmmmm......我指的(de)(de)上(shang)拉加載是觸底后的(de)(de)加載更多，怕跟大(da)家(jia)理解的(de)(de)不一(yi)樣(yang)o(╯□╰)o。
下(xia)拉(la)刷新：
要(yao)注意(yi)的是，每(mei)次對(dui)數組(zu)進行(xing)操作后，都(dou)要(yao)使用setData對(dui)原數組(zu)重(zhong)新賦值，否則數據不會更新的啊( ⊙ o ⊙ )！
4、搜索歷史的存儲 實(shi)現(xian)思路 wx.setStorage、wx.getStorage和(he)wx.removeStorage 存儲搜索歷史：
顯示搜(sou)索歷史：
刪除(chu)搜索歷史：
5、swiper輪(lun)播組(zu)件 在(zai)想法頁的輪(lun)播(bo)組(zu)件(jian)中，原知(zhi)乎App中的xxxx人正(zheng)在(zai)討論是(shi)嵌在(zai)輪(lun)播(bo)模塊內(nei)的垂直方(fang)向(xiang)的文字輪(lun)播(bo)，但是(shi)小程序中的swiper輪(lun)播(bo)組(zu)件(jian)不(bu)支持互相(xiang)嵌套，因此沒(mei)能實現(xian)該部分，只(zhi)好(hao)換一(yi)種樣式(shi)去寫/(ㄒoㄒ)/~~。
6、滾動(dong)吸(xi)頂 頁(ye)面中的標題欄在滾(gun)動到頂(ding)部時，吸頂(ding)展示。 實現(xian)效果
實現方(fang)案
<view class="find-hot-header fixed" wx:if="{{scrollTop >= 430}}">
<view class="find-hot-title">最近熱門</view>
</view>
<view class="find-hot-header">
<view class="find-hot-title">最近熱門</view>
</view>
7、展開和收起全文(wen) 展示效(xiao)果
文(wen)字(zi)部(bu)分默認添加class，超出(chu)兩行文(wen)字(zi)顯示(shi)省略(lve)號。
.text-overflow{
height: 85rpx;
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
}
點(dian)擊(ji)展開全文(wen)和收(shou)起全文(wen)時對showIndex[index]的值取(qu)反(fan)，對應添加或移除該class。
<view class="find-hot-content {{!showIndex[index] ? 'text-overflow' : ''}}">
{{item.content}}
</view>
<view wx:if="{{!showIndex[index]}}" class="find-show-all" data-index="{{index}}" bindtap="toggleShow">展開全文</view>
<view wx:if="{{showIndex[index]}}" class="find-show-all" data-index="{{index}}" bindtap="toggleShow">收起全文</view>
8、更改switch樣式(shi) switch類(lei)名如下，一定(ding)要加上父類(lei)，不然全(quan)局(ju)的都會(hui)被改掉_(:з」∠)_。
父類 .wx-switch-input{
display: inline-block;
position: absolute;
top: 20rpx;
right: 20rpx;
width: 84rpx;
height: 44rpx;
}
父類 .wx-switch-input::before{
width: 80rpx;
height: 40rpx;
}
父類 .wx-switch-input::after{
width: 40rpx;
height: 40rpx;
}
四、總結通過(guo)這次小程(cheng)序的(de)開發，學到了很(hen)多東(dong)西(xi)，雖然遇到了很(hen)多問題，但解決問題的(de)過(guo)程(cheng)讓我收獲的(de)更多，動手實踐才是學習的(de)最好方式。 另(ling)外，此次項(xiang)目中仍(reng)有許多功(gong)能(neng)不夠完善，一些細節(jie)還可以(yi)繼續優化，長路漫(man)漫(man)啊(?•??•?) ?。 如果文章(zhang)中(zhong)有錯誤和不足歡迎批評指正。 |
