Developing a Simplified Juejin Mini Program with Taro 3: Design, Features, and Technical Challenges

Origin

Since joining Juejin in 2017 and starting to write blogs only last year, the author felt Juejin is an excellent technical community and wanted to contribute beyond articles.

The main entry points of Juejin are App, PC, plugins, and H5.

App offers comprehensive features but requires download and installation.

PC is inconvenient on mobile devices.

H5 is feature‑rich but hard to return to after exiting.

These observations motivated the team to create a simplified mini‑program.

Product Design

The team, composed of programmers without formal product experience, relied on personal intuition to design the mini‑program.

After two rounds of brainstorming and reviewing existing mini‑programs, they chose internet news as the main entry, allowing users to browse hot news during short breaks.

The first prototype is shown below:

Home page design was inspired by 差评 Daily; thanks to their product team.

The team decided to focus on modules relevant to front‑end developers, keeping the home page concise.

First‑phase modules include daily news crawling, random news display, news list/detail (pagination pending), Juejin hot topics (pagination pending), and hot blog share‑image generation.

Mini Program Development

The developers chose Taro 3 for the mini‑program after experience with Taro 1.0 and Remax, noting its rendering syntax advantages.

Multi‑platform frameworks generally fall into runtime rendering and pre‑compilation categories; runtime frameworks tend to have larger bundle sizes.

Markdown Rendering

Since Juejin content is in Markdown, the team needed a way to render it in the mini‑program.

They combined Taro 3 React with the native mini‑program plugin towxml to handle Markdown, following the plugin’s documentation.

Large Data Rendering

The initial version suffered from performance issues because rendering too much data caused the page to stutter, especially when setData exceeded the 1 MB limit.

Some articles contain Markdown over 4 MB, far exceeding the limit, leading to slow rendering and noticeable lag.

To mitigate this, the team adopted a pseudo‑virtual list: Markdown content is escaped and split into groups of ten items; the view renders the current page plus the previous and next pages (three pages total). Scrolling to the top or bottom triggers loading of adjacent pages.

Some Markdown sections still fail to parse completely, and rapid scroll loading can cause occasional lag; these issues will be addressed.

Share Image Generation

There are three ways to generate share images in a mini‑program:

Draw directly on a canvas.

Use a WebView with html2canvas to convert an HTML page to canvas.

Generate on the backend and deliver to the front‑end.

The team chose the most challenging method—hand‑coding the canvas—and created two share‑image styles, one with a preview and one without.

Preview image:

No‑preview image:

Due to time constraints, the share‑image templates are currently borrowed from two community members.

If fetched images or avatars are unavailable, the program falls back to the no‑preview mode; missing avatars trigger a placeholder “dog‑head” image, with plans for a more professional avatar in the next version.

Future versions may offer multiple share‑image templates for users to choose.

The current QR code links directly to the mini‑program; a detailed QR code for the article page will be added later.

Special Thanks

Team members include:

@Kerwin_ and @和耳朵 for backend data work.

@少与年 for UI design and assets.

@Captain船长 and @优弧 as special testers providing feedback.

Conclusion

While users often complain about Juejin’s minor issues, participating in development reveals the many challenges in product design and implementation.

Since there is no dedicated tester, the author welcomes any feedback, suggestions, or bug reports from users.

2021, forging ahead.