基於Taro的小說閱讀小程序

如何運行

先講一下如何將本項目起來。 第一種方式：若是不進行受權，則沒法使用書架和我的書架頁，使用方式以下：

## clone
git clone https://github.com/k-water/taro-reader

## install deps
npm install

## compile
npm run dev:weapp
複製代碼

而後將dist文件夾導入微信開發者工具便可預覽。

第二種方式：若是進行受權，涉及到微信小程序登陸，須要多一些數據，在/src/cloudFunctions/userLogin中建立一個config.js文件，內容以下：

const config = {
  appid: 'your appid',
  secret: 'your secret',
}

module.exports = config
複製代碼

而後將雲函數上傳並部署，記得安裝依賴，接下來的操做同第一種方式。

前言

Taro是一個遵循React語法規範的多端開發的框架。自從其開源以來，就一直關注，從一開始0.x版本，到後來的1.0版本。時至今日，Taro已經發展成爲一個成熟的框架，社區也逐漸完善。有一點值得點讚的是，Taro的維護人員處理問題很快，開發者很快能獲得響應，專一認真的開源態度，我以爲是Taro發展好的緣由之一。

數據源

此項目是一個閱讀類的小程序，基於Taro開發。大概的初衷就是想試用一下Taro，熟悉Taro的開發流程等。拋開Taro，既然是閱讀類的小程序，那麼數據源要從何獲取？一開始思考的就是這個問題，有過幾個想法：

• 寫一個爬蟲試試
• 瀏覽github看有沒有合適的API
• 有沒有第三方免費的API

通過本身的搜索，加上我的時間上的限制，最終選擇了第三個方案。github上確實有相關的項目可供使用，可是大部分都是基於Python，對Python不太熟悉，有必定的學習成本，故舍之。而爬取整站的書源對於我一個寫頁面的來講，也有點不太實際。最後在網上看到了追書神器的API，進行一番搜索和思考後，以爲這個東西能夠做爲數據源，畢竟我主要是想嘗試Taro，因此數據源方面能簡單解決最好了。網上關於追書神器API的說明也有不少，本身經過搜索整理後，總結成了如下幾個部分：

• 主題書單
• 分類
• 精選書籍
• 書籍排行榜
• 書籍詳情
• 書籍點評
• 搜索

大大小小API大概有20+個，實現的功能基本與之相關。因爲接口是HTTP的，因此經過本身的服務器作了一層HTTPS的代理，方便使用。後端項目爲：reader-api

此項目並無什麼邏輯，只是對參數作了下簡單的處理，經過curl發送請求拿到數據。

界面設計

數據源解決了，下一步就是頁面如何設計，UI怎麼寫等問題。對於一個不擅於設計的前端er來講，這方面仍是稍微有一些阻滯的。一開始，經過墨刀畫出了初始的原型圖，在畫原型圖的過程當中，腦中思考的是頁面的佈局和要實現的功能，對於UI方面，則到了實際代碼開發中才實現。初始界面設計如圖所示：

在實際開發中，頁面UI和佈局參考了微信讀書，實現上可能沒有那麼精細，但也能夠接受。

項目開發

有了以上準備，就能夠進入寫代碼的階段了。在初始化項目前思考，需不須要狀態管理，要初始化什麼樣的項目。因爲本項目頁面與頁面之間的數據共用的可能性不大，一些頁面跳轉的參數能夠放在路由參數上，因此沒有使用redux。

目錄結構

├─ config
├─ dist
└─ src
      ├─ app.js
      ├─ app.scss
      ├─ cloudFunctions   ## 雲函數
      ├─ components       ## 公用組件
      ├─ index.html
      ├─ pages            ## 主頁面
      │    ├─ book
      │    ├─ class
      │    ├─ index
      │    └─ person
      ├─ static           ## 靜態資源
      │    ├─ icon
      │    └─ image
      ├─ subpages         ## 子包
      └─ utils.js         ## 工具函數
├─ package.json
├─ project.config.json
├─ .editorconfig
├─ .eslintrc
├─ .gitignore
├─ LICENSE
├─ README.md

複製代碼

從目錄結構看出，主頁面有四個，即

• 書城
• 分類
• 書架
• 我的中心

由於書架和我的中心這兩個頁面涉及到用戶的信息存儲，因此這裏結合了小程序雲開發，經過調用雲函數的方法進行數據通訊，方便開發。 根據實際狀況，其餘的頁面即經過分包的方式進行加載，減小小程序首屏的加載時間。

實現的功能

根據已有的API，實現的功能有：

• 主題書單
• 排行榜
• 精選書籍
• 書籍詳情
• 書籍點評
• 點評詳情
• 書籍搜索
• 閱讀功能
  • 閱讀模式切換
  • 保存閱讀進度
• 書架功能

這樣說可能有點抽象，看一張GIF展現圖：

因爲我的開發者不能上傳閱讀類的小程序，再者這個小程序本就是來練手的，因此更多功能請下載使用。

開發總結

整體來講，Taro的開發體驗是很不錯的。因爲我的以前寫習慣了React，因此基本看一下文檔就上手了。根據文檔來開發，效率仍是不錯的。對於Taro不支持的小程序API或者語法，能夠經過直接書寫原生小程序代碼實現。並不影響代碼編譯和功能開發。在代碼校驗方面，Taro從新定義Eslint規則，遇到不合理的代碼規範，會有詳細的中文提示，這位開發者節省了很多功夫。 因爲社區的活躍和維護者處理issue神速，總體沒什麼阻滯，沒遇到什麼坑，也許多是我尚未用到那麼多特性吧(～￣▽￣)～ 。接下來有機會還會繼續實踐，持續關注ing。