從零開始一個微信小程序版知乎

之前工做沒直接進行太小程序的開發，最近閒了下來就趕忙學習一下。由於從零開始，因此沒有使用任何框架及UI庫，記錄一下本次開發中踩過的坑吧~

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

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

1、開始前的準備

• 申請帳號：根據小程序註冊文檔，填寫信息和提交相應的資料，就能夠擁有本身的小程序賬號。
• 開發工具：微信開發者工具
• 數據來源：
  • Easy Mock: 一個數據模擬神器，能夠根據本身須要的格式本身編寫返回數據，並且全部的數據都是隨機生成的。
  • Mock.js: Easy Mock引入了Mock.js，可是文檔中僅提供了部分語法，要想本身的mock數據寫的更精簡，能夠在Mock.js中查看更多具體語法。
• icon: 阿里巴巴矢量圖標庫

2、初始化一個小程序

• 新建一個空文件夾
• 打開微信開發者工具，按照「你的第一個小程序」文檔中的步驟便可建立一個本身的小程序。
• 目錄結構

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。

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

一、小程序渲染HTML片斷

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

通過反覆嘗試，發現原生寫法不支持渲染一段HTML代碼片斷，所以放棄了返回HTML的代碼片斷的作法，因此個人回答列表中也沒有圖片(ಥ_ಥ)。

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

二、首頁的頂部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>
複製代碼

三、上拉加載和下拉刷新

實現思路

上拉加載：emmmmmm......我指的上拉加載是觸底後的加載更多，怕跟你們理解的不同o(╯□╰)o。

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

下拉刷新：

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

要注意的是，每次對數組進行操做後，都要使用setData對原數組從新賦值，不然數據不會更新的啊( ⊙ o ⊙ )！

四、搜索歷史的存儲

實現思路

wx.setStorage、wx.getStorage和wx.removeStorage

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

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

• 刪除搜索歷史：
• 單一刪除：每一個搜索歷史都綁定刪除事件，獲取到改關鍵詞的index，從渠道的搜索歷史列表中刪除對應index的關鍵詞，並經過wx.setStorage從新存儲。
• 所有刪除：使用wx.removeStorage，直接移除搜索歷史對應的關鍵字。

五、swiper輪播組件

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

六、滾動吸頂

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

實現效果

實現方案

• 整個頁面使用<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>
複製代碼

七、展開和收起全文

展現效果

文字部分默認添加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>
複製代碼

八、更改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;
} 
複製代碼

4、總結

經過此次小程序的開發，學到了不少東西，雖然遇到了不少問題，但解決問題的過程讓我收穫的更多，動手實踐纔是學習的最好方式。

另外，這次項目中仍有許多功能不夠完善，一些細節還能夠繼續優化，長路漫漫啊(๑•̀ㅂ•́)و✧。

若是文章中有錯誤和不足歡迎批評指正。

項目地址：GitHub

(づ｡◕‿‿◕｡)づ★ 想要個star