微信小程序版知乎的示例分析

這篇文章主要介紹了微信小程序版知乎的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

展示效果(界面樣式設計與交互來自iOS 4.8.0版本知乎App)：

動態效果請移步到GitHub查看。

一、開始前的準備

申請賬號：根據小程序注冊文檔，填寫信息和提交相應的資料，就可以擁有自己的小程序帳號。

開發工具：微信開發者工具

數據來源：

Easy Mock: 一個數據模擬神器，可以根據自己需要的格式自己編寫返回數據，而且所有的數據都是隨機生成的。

Mock.js: Easy Mock引入了Mock.js，但是文檔中僅提供了部分語法，要想自己的mock數據寫的更精簡，可以在Mock.js中查看更多具體語法。

二、初始化一個小程序

新建一個空文件夾

打開微信開發者工具，按照“你的第一個小程序”文檔中的步驟即可創建一個自己的小程序。

目錄結構

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
小程序配置文件app.json內容
{
// 頁面路由
   "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": "更多"
       }]
   }
}

配置接口域名: 因使用的是Easy Mock模擬接口數據，因此可以在小程序管理后臺-開發設置-服務器域名中將request合法域名配置為https://www.easy-mock.com。

三、開發中的遇到的問題及解決方案

1、小程序渲染HTML片段

看了網頁版知乎，接口返回的回答數據是一段HTML的代碼片段，所以答案中可以在任意位置都插入圖片。
對，沒錯，就是下面醬紫的(╯°□°）╯︵┻━┻

經過反復嘗試，發現原生寫法不支持渲染一段HTML代碼片段，因此放棄了返回HTML的代碼片段的做法，所以我的回答列表中也沒有圖片(?_?)。

但在調研中發現了一個自定義組件：wxParse-微信小程序富文本解析組件，還沒嘗試使用，準備在下次優化項目時嘗試一下。

2、首頁的頂部tab切換

實現思路

每個可點擊的tab分別綁定data-index，在最外層bindtap綁定的方法中獲取所點擊的tab的index值，再根據index的值分別顯示對應的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、上拉加載和下拉刷新

實現思路

上拉加載：emmmmmm......我指的上拉加載是觸底后的加載更多，怕跟大家理解的不一樣o(╯□╰)o。

原生方法：onReachBottom，獲取到新數據后concat到原有的數據列表后。

下拉刷新：

原生方法：onPullDownRefresh，將原有的數據列表concat到獲取到的新數據后。

要注意的是，每次對數組進行操作后，都要使用setData對原數組重新賦值，否則數據不會更新的啊( ⊙ o ⊙ )！

4、搜索歷史的存儲

實現思路

wx.setStorage、wx.getStorage和wx.removeStorage

存儲搜索歷史：

使用wx.setStorage，觸發搜索時，檢查搜索歷史列表中是否含有該字段，如果有則忽略，如果沒有則將該字段壓入數組中。

顯示搜索歷史：

使用wx.getStorage，在顯示搜索蒙層時，獲取到搜索歷史列表，循環顯示，當搜索歷史列表長度大于1時，顯示清空搜索歷史的按鈕。

刪除搜索歷史：

單一刪除：每個搜索歷史都綁定刪除事件，獲取到改關鍵詞的index，從渠道的搜索歷史列表中刪除對應index的關鍵詞，并通過wx.setStorage重新存儲。

全部刪除：使用wx.removeStorage，直接移除搜索歷史對應的關鍵字。

5、swiper輪播組件

在想法頁的輪播組件中，原知乎App中的xxxx人正在討論是嵌在輪播模塊內的垂直方向的文字輪播，但是小程序中的swiper輪播組件不支持互相嵌套，因此沒能實現該部分，只好換一種樣式去寫/(ㄒoㄒ)/~~。

6、滾動吸頂

頁面中的標題欄在滾動到頂部時，吸頂展示。

實現效果

實現方案

整個頁面使用<scroll-view></scroll-view>包裹，并且綁定bindscroll事件，監聽滾動距離。

設置<scroll-view>為垂直方向時，需設置<scroll-view>的高度。

復制一個相同的標題欄，添加吸頂樣式的類fixed。

使用wx:if判斷當前頁面滾動距離是否達到要求，如果達到所需距離，則渲染這個吸頂的標題欄。

<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、展開和收起全文

展示效果

文字部分默認添加class，超出兩行文字顯示省略號。

.text-overflow{
  height: 85rpx;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
}

點擊展開全文和收起全文時對showIndex[index]的值取反，對應添加或移除該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樣式

switch類名如下，一定要加上父類，不然全局的都會被改掉_(:з」∠)_。

父類 .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;
}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信小程序版知乎的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!