How to run

Let’s talk about how to put this project together. The first way: without authorization, you cannot use the bookshelf and the personal bookshelf page, as follows:

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

## install deps
npm install

## compile
npm run dev:weapp
Copy the code

Then import dist folder into wechat developer tool to preview.

Second way: if for authorization, a small program that involves WeChat login, need some more data, in/SRC/cloudFunctions/userLogin create a config. The js file, the content is as follows:

const config = {
  appid: 'your appid'.secret: 'your secret',}module.exports = config
Copy the code

Then upload and deploy the cloud functions, remembering to install the dependencies, and do the same as the first method.

preface

Taro is a multifaceted framework that follows the React syntax specification. Since its open source, it has been on the radar, starting with version 0.x and later version 1.0. Today, Taro has developed into a mature framework and community. One thing worth praising is that the maintenance staff of Taro can deal with problems quickly and developers can get responses quickly. In my opinion, the dedicated and serious attitude of open source is one of the reasons for the good development of Taro.

The data source

This project is a reading class small program, based on the development of Taro. The original intention is to try out Taro and get familiar with the development process of Taro. Forget Taro, since it is a small program of reading class, then how to obtain data source? At the beginning, I thought about this problem and had several ideas:

  • Try writing a reptile
  • Browse Github to see if there is a suitable API
  • There are no third party free apis

After my own search and time limitation, I finally chose the third plan. Github does have related projects available, but most of them are based on Python. I am not familiar with Python and have some learning costs, so I will not use it. And climb the whole station of book source for me to write a page, also a little impractical. Finally, I saw the API of Bookchasing artifact on the Internet. After searching and thinking about it, I thought it could be used as a data source. After all, I mainly want to try Taro, so it would be best if the data source could be solved simply. There are also a lot of descriptions about the book chasing artifact API on the Internet. After searching and sorting, I summarized the following parts:

  • The theme list
  • classification
  • Select books
  • Book list
  • The book details
  • Book review
  • search

There are about 20+ apis, large and small, and the functions implemented are basically related to them. Because the interface is HTTP, so through their own server to do a layer of HTTPS proxy, easy to use. The back-end project is: Reader-API

This project does not have any logic, just do a simple parameter processing, using curl to send a request to retrieve the data.

Interface design

Data source solved, the next step is how to design the page, how to write UI and other issues. For a poorly designed front-end ER, this is a bit of a drag. At the beginning, through the ink knife to draw the initial prototype diagram, in the process of drawing the prototype diagram, the mind is thinking about the layout of the page and the function to be realized, for UI, it is realized in the actual code development. The initial interface design is as follows:

In the actual development, the page UI and layout refer to wechat Reading, which may not be so fine in implementation, but it is acceptable.

Project development

With that in mind, you’re ready to start writing code. Before initializing a project, think about whether you need state management and what kind of project to initialize. Redux was not used in this project because data sharing between pages was not possible and some page jump parameters could be placed on routing parameters.

The directory structure

├─ Config ├─ dist ├─ SRC ├─ app.js ├─ app.scSS ├─ exercises# # cloud function├ ─ components## Common components├ ─ index. The HTML ├ ─ pages# # main page│ ├─ Book │ ├─ class │ ├─ index │ ├─ exercisesStatic resources│ ├─ ├─ Image ├─ bass Exercises# # package└ ─ utils. Js## Utility functions├─ Package.json ├─ Project.config.json ├─.EditorConfig ├─.Eslintrc ├─.Gitignore ├─ Readme.mdCopy the code

It can be seen from the directory structure that the main page has four, namely

  • Book city
  • classification
  • A bookcase
  • Personal center

Because the two pages of bookshelf and personal center involve user information storage, the small program cloud development is combined here. Data communication is carried out by calling cloud functions, which is convenient for development. According to the actual situation, other pages are loaded by subcontracting to reduce the loading time of the first screen of the small program.

Implemented functions

According to the existing API, the functions are as follows:

  • The theme list
  • list
  • Select books
  • The book details
  • Book review
  • Comment on the details
  • Books search
  • Read function
    • Reading mode switch
    • Save reading progress
  • Bookcase function

This may sound a little abstract, but look at this GIF:

Since individual developers can not upload reading class small program, and this small program is to practice, so more functions please download use.

The development summary

Overall, Taro’s development experience is very good. Since I was used to React before, I basically got used to it by reading the document. According to the documentation to develop, efficiency is good. For applet apis or syntax not supported by Taro, you can write native applet code directly. Does not affect code compilation and feature development. Taro saved the developer a lot of effort in code verification by redefining Eslint rules to provide detailed Chinese instructions for improper code specifications. Due to the active community and the quick speed of the maintainer to deal with the issue, there was no overall block and no trouble encountered, maybe I haven’t used so many features (~ ~ ▽ ~) ~. I will continue to practice and pay attention to ING when I have the chance.