頻道欄目
首頁 > 資訊 > 微信小程序 > 正文

基于Taro的小說閱讀小程序-教程-小程序社區-微信小程序-微信小程序開發社區-小程序開發論壇-微信小程序聯盟

19-03-07        來源:[db:作者]  
收藏   我要投稿

先講一下如何將本項目起來。 第一種方式:如果不進行授權,則無法使用書架個人書架頁,使用方式如下:

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

## install deps
npm install

## compile
npm run dev
復制代碼

然后將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。

            赞赏
相關TAG標簽
上一篇:臺積電:絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
下一篇:最后一頁
相關文章
圖文推薦

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

美女MM131爽爽爽毛片