Implementation of a New Share Component for Xianyu's Huaiwan Community

A new share component was built for Xianyu’s Huaiwan community, replacing the product‑centric share function with a hybrid Weex‑based page, a JSBridge API, and a universal‑link return flow, enabling poster‑style image collages, modular UI assembly, and improved engagement and development efficiency.

Xianyu Technology
Xianyu Technology
Xianyu Technology
Implementation of a New Share Component for Xianyu's Huaiwan Community

Background: In September, Xianyu upgraded its community product “YuTang” to “Huaiwan”. The existing share function was product‑centric and unsuitable for sharing user‑generated “posters”. A new share component was developed.

Component architecture: The component consists of three parts – a share page (implemented with Weex for cross‑platform consistency), a low‑level API exposed via JSBridge, and a return‑flow page.

Poster generation: Images are combined into a fixed‑width long image. The algorithm classifies images as horizontal or vertical, handles cases of 1, 2, or more images, and groups them into patterns of 3, 2, and 1 to produce aesthetically balanced collages.

Share capability abstraction: The front‑end calls the underlying API to perform sharing. Basic UI components are defined and assembled according to data structures for different scenarios.

Return flow improvement: The legacy URL‑Scheme based callback is replaced by Universal Link, allowing better error handling and reduced drop‑off. The app registers domains such as pages.goofish.com and pages.2.taobao.com for this purpose.

Integration: By providing modular UI components and a hybrid (web‑native) share page, developers can quickly compose share experiences for various contexts, improving development efficiency and user retention.

Conclusion: The new component adds poster‑style sharing, uses a hybrid implementation for consistent experience, and streamlines the return flow, resulting in higher engagement.

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

Weeximage collageshare componentuniversal link
Xianyu Technology
Written by

Xianyu Technology

Official account of the Xianyu technology team

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.