一个微信小程序版知乎实例分享(微信小程序开发资源汇总)
本文主要和大家分享從零開(kāi)始一個(gè)微信小程序版知乎，希望能幫助大家開(kāi)發(fā)一個(gè)微信版知乎，從中也有更多思路。
展示效果(界面樣式設(shè)計(jì)與交互來(lái)自iOS 4.8.0版本知乎App)：
動(dòng)態(tài)效果請(qǐng)移步到GitHub查看。
一、開(kāi)始前的準(zhǔn)備
申請(qǐng)賬號(hào)：根據(jù)小程序注冊(cè)文檔，填寫(xiě)信息和提交相應(yīng)的資料，就可以擁有自己的小程序帳號(hào)。
開(kāi)發(fā)工具：微信開(kāi)發(fā)者工具
數(shù)據(jù)來(lái)源：
Easy Mock: 一個(gè)數(shù)據(jù)模擬神器，可以根據(jù)自己需要的格式自己編寫(xiě)返回?cái)?shù)據(jù)，而且所有的數(shù)據(jù)都是隨機(jī)生成的。
Mock.js: Easy Mock引入了Mock.js，但是文檔中僅提供了部分語(yǔ)法，要想自己的mock數(shù)據(jù)寫(xiě)的更精簡(jiǎn)，可以在Mock.js中查看更多具體語(yǔ)法。
二、初始化一個(gè)小程序
新建一個(gè)空文件夾
打開(kāi)微信開(kāi)發(fā)者工具，按照“你的第一個(gè)小程序”文檔中的步驟即可創(chuàng)建一個(gè)自己的小程序。
目錄結(jié)構(gòu)
weChatApp
|___client
| |___assets // 存儲(chǔ)圖片
| |___pages // 頁(yè)面
| | |___index // 首頁(yè)
| | |___index.wxml // 頁(yè)面結(jié)構(gòu)文件
| | |___index.wxss // 樣式表文件
| | |___index.js // js文件
| |___utils // 全局公共函數(shù)
| |___app.js // 系統(tǒng)的方法處理文件
| |___app.json // 系統(tǒng)全局配置文件
| |___app.wxss // 全局的樣式表
| |___config.json // 域名等配置文件
|___project.config.json
|___README
小程序配置文件app.json內(nèi)容
{
// 頁(yè)面路由
"pages": [
"pages/index/index", // 首頁(yè)
"pages/findMore/findMore", // 想法頁(yè)（開(kāi)始起名為發(fā)現(xiàn)頁(yè)面，后來(lái)沒(méi)改/(ㄒoㄒ)/~~）
"pages/userCenter/userCenter", // 更多（同上，原來(lái)起名為個(gè)人中心o(╯□╰)o）
"pages/market/market", // 市場(chǎng)
"pages/searchResult/searchResult",// 搜索結(jié)果頁(yè)
"pages/message/message", // 消息列表頁(yè)
"pages/titleDetail/titleDetail", // 點(diǎn)擊標(biāo)題進(jìn)入的問(wèn)題詳情頁(yè)
"pages/contentDetail/contentDetail"// 點(diǎn)擊內(nèi)容進(jìn)入的回答詳情頁(yè)
],
// 窗口
"window": {
"backgroundColor": "#FFF", // 窗口的背景色
"backgroundTextStyle": "dark", // 下拉背景字體、loading 圖的樣式，僅支持 dark/light
"navigationBarBackgroundColor": "#FFF",// 頂部tab背景顏色
"navigationBarTitleText": "知小乎", //頂部顯示標(biāo)題
"navigationBarTextStyle": "black", // 導(dǎo)航欄標(biāo)題顏色，僅支持 black/white
"enablePullDownRefresh": true // 是否開(kāi)啟下拉刷新
},
// tab導(dǎo)航條
"tabBar": {
"backgroundColor": "#fff", // 背景顏色
"color": "#999", // 默認(rèn)文字顏色
"selectedColor": "#1E8AE8", // 選中時(shí)文字顏色
"borderStyle": "white", // tabbar上邊框的顏色， 僅支持 black/white
/**
* tab列表，最少2個(gè)，最多5個(gè)
* selectedIconPath: 選中時(shí)圖片
* iconPath: 默認(rèn)圖片
* pagePath: 對(duì)應(yīng)頁(yè)面路由
* text: 對(duì)應(yīng)文案
**/
"list": [{
"selectedIconPath": "assets/home-light.png",
"iconPath": "assets/home.png",
"pagePath": "pages/index/index",
"text": "首頁(yè)"
}, {
"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": "市場(chǎng)"
},
{
"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": "更多"
}]
}
}
登錄后復(fù)制
配置接口域名: 因使用的是Easy Mock模擬接口數(shù)據(jù)，因此可以在小程序管理后臺(tái)-開(kāi)發(fā)設(shè)置-服務(wù)器域名中將request合法域名配置為https://www.easy-mock.com。
三、開(kāi)發(fā)中的遇到的問(wèn)題及解決方案
1、小程序渲染HTML片段
看了網(wǎng)頁(yè)版知乎，接口返回的回答數(shù)據(jù)是一段HTML的代碼片段，所以答案中可以在任意位置都插入圖片。
對(duì)，沒(méi)錯(cuò)，就是下面醬紫的(╯°□°）╯︵┻━┻
經(jīng)過(guò)反復(fù)嘗試，發(fā)現(xiàn)原生寫(xiě)法不支持渲染一段HTML代碼片段，因此放棄了返回HTML的代碼片段的做法，所以我的回答列表中也沒(méi)有圖片(?_?)。
但在調(diào)研中發(fā)現(xiàn)了一個(gè)自定義組件：wxParse-微信小程序富文本解析組件，還沒(méi)嘗試使用，準(zhǔn)備在下次優(yōu)化項(xiàng)目時(shí)嘗試一下。
2、首頁(yè)的頂部tab切換
實(shí)現(xiàn)思路
每個(gè)可點(diǎn)擊的tab分別綁定data-index，在最外層bindtap綁定的方法中獲取所點(diǎn)擊的tab的index值，再根據(jù)index的值分別顯示對(duì)應(yīng)的tab-content
<view class="tab-wrapper" bindtap="setActive">
<view class="tab-item {{isActive == 0 ? 'tab-item-active' : ''}}" data-index="0">關(guān)注</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>
登錄后復(fù)制
3、上拉加載和下拉刷新
實(shí)現(xiàn)思路
上拉加載：emmmmmm......我指的上拉加載是觸底后的加載更多，怕跟大家理解的不一樣o(╯□╰)o。
原生方法：onReachBottom，獲取到新數(shù)據(jù)后concat到原有的數(shù)據(jù)列表后。
下拉刷新：
原生方法：onPullDownRefresh，將原有的數(shù)據(jù)列表concat到獲取到的新數(shù)據(jù)后。
要注意的是，每次對(duì)數(shù)組進(jìn)行操作后，都要使用setData對(duì)原數(shù)組重新賦值，否則數(shù)據(jù)不會(huì)更新的啊( ⊙ o ⊙ )！
4、搜索歷史的存儲(chǔ)
實(shí)現(xiàn)思路
wx.setStorage、wx.getStorage和wx.removeStorage
存儲(chǔ)搜索歷史：
使用wx.setStorage，觸發(fā)搜索時(shí)，檢查搜索歷史列表中是否含有該字段，如果有則忽略，如果沒(méi)有則將該字段壓入數(shù)組中。
顯示搜索歷史：
使用wx.getStorage，在顯示搜索蒙層時(shí)，獲取到搜索歷史列表，循環(huán)顯示，當(dāng)搜索歷史列表長(zhǎng)度大于1時(shí)，顯示清空搜索歷史的按鈕。
刪除搜索歷史：
單一刪除：每個(gè)搜索歷史都綁定刪除事件，獲取到改關(guān)鍵詞的index，從渠道的搜索歷史列表中刪除對(duì)應(yīng)index的關(guān)鍵詞，并通過(guò)wx.setStorage重新存儲(chǔ)。
全部刪除：使用wx.removeStorage，直接移除搜索歷史對(duì)應(yīng)的關(guān)鍵字。
5、swiper輪播組件
在想法頁(yè)的輪播組件中，原知乎App中的xxxx人正在討論是嵌在輪播模塊內(nèi)的垂直方向的文字輪播，但是小程序中的swiper輪播組件不支持互相嵌套，因此沒(méi)能實(shí)現(xiàn)該部分，只好換一種樣式去寫(xiě)/(ㄒoㄒ)/~~。
6、滾動(dòng)吸頂
頁(yè)面中的標(biāo)題欄在滾動(dòng)到頂部時(shí)，吸頂展示。
實(shí)現(xiàn)效果
實(shí)現(xiàn)方案
整個(gè)頁(yè)面使用<scroll-view></scroll-view>包裹，并且綁定bindscroll事件，監(jiān)聽(tīng)滾動(dòng)距離。
設(shè)置<scroll-view>為垂直方向時(shí)，需設(shè)置<scroll-view>的高度。
復(fù)制一個(gè)相同的標(biāo)題欄，添加吸頂樣式的類fixed。
使用wx:if判斷當(dāng)前頁(yè)面滾動(dòng)距離是否達(dá)到要求，如果達(dá)到所需距離，則渲染這個(gè)吸頂?shù)臉?biāo)題欄。
<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>
登錄后復(fù)制
7、展開(kāi)和收起全文
展示效果
文字部分默認(rèn)添加class，超出兩行文字顯示省略號(hào)。
.text-overflow{
height: 85rpx;
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
}
登錄后復(fù)制
點(diǎn)擊展開(kāi)全文和收起全文時(shí)對(duì)showIndex[index]的值取反，對(duì)應(yīng)添加或移除該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">展開(kāi)全文</view>
<view wx:if="{{showIndex[index]}}" class="find-show-all" data-index="{{index}}" bindtap="toggleShow">收起全文</view>
登錄后復(fù)制
8、更改switch樣式
switch類名如下，一定要加上父類，不然全局的都會(huì)被改掉_(:з」∠)_。
父類 .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;
}
登錄后復(fù)制
四、總結(jié)
通過(guò)這次小程序的開(kāi)發(fā)，學(xué)到了很多東西，雖然遇到了很多問(wèn)題，但解決問(wèn)題的過(guò)程讓我收獲的更多，動(dòng)手實(shí)踐才是學(xué)習(xí)的最好方式。
相關(guān)推薦：
微信小程序組件化的解決思路和方法
微信小程序版2048小游戲
微信小程序之購(gòu)物車的實(shí)現(xiàn)代碼
以上就是一個(gè)微信小程序版知乎實(shí)例分享的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注風(fēng)君子博客其它相關(guān)文章！
總結(jié)
以上是生活随笔為你收集整理的一个微信小程序版知乎实例分享(微信小程序开发资源汇总)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 期货是啥 什么是期货
- 下一篇： 魔兽世界8.0凯蒂的印哨怎么获得 凯蒂的