ZanWeexModuleSDK: A General Solution for Native-Weex Interaction at Youzan

Since 2018, Youzan's mobile team has used Weex as a cross-platform dynamic technology solution. After introducing Weex, demand delivery speed improved significantly, leading to its adoption across various Apps and modules. However, after two years of development, the team discovered that different Apps had implemented various WeexModules for similar functions such as routing, configuration center, and account information.

The team sought a general solution to simplify Native-Weex interaction and enable Weex pages to render normally across different modules or Apps. This led to the creation of ZanWeexModuleSDK .

Current State Analysis

A complete WeexAPP contains multiple WeexModules for Native interaction, including routing, network requests, configuration center, tracking, logging, basic UI calls, and sharing. Business modules like IM and product modules also have Weex pages. The problem is that different Apps or business modules have independently implemented WeexModules, making migration between Apps extremely labor-intensive.

Overall Design

After analyzing various Apps' WeexModule usage scenarios, the team found most functionality overlaps with only minor App-specific logic. The solution consolidates common WeexModule logic, allowing simple business adoption to focus only on Weex code implementation without worrying about the underlying WeexModule details.

Screening Common WeexModules

Screening principles include: high reusability of WeexModules, convenient access and usage, and maintaining consistency between old and new interfaces. The first version includes:

Network Module: Replaces each Weex's custom network request wrapper while maintaining usage patterns

Routing Module: Simple routing implemented, independent businesses provide custom implementations

Configuration Module: Gets mobile dynamic configuration data, returns Map directly

Logging Module: Debug prints locally, Release uploads to server

Notification Module: Cross-page status notification

Tracking Module: Maintains Weex usage patterns for easy integration

Account Module: Login status and information retrieval

WeexModule Design Approach

For WeexModules that may have custom logic, the design implements common parts while providing interfaces for users to set their own logic. The WeexModuleManager provides a serviceMap to store WXMBaseService instances for lookup.

public interface WXMNavigatorService extends WXMBaseService {
boolean navigator(Context context, String uri, String url, JSONObject params);
}

Callback Parameter Design Rules

Callbacks to Weex pages require unified rules to reduce integration difficulty. The standard callback format follows backend return value patterns:

// Callback return format: {
"code"
:
200
,
"data"
:{},
"message"
:
""
,
"success"
:true}

Practice

Business Integration

In Native, initialize WeexModuleManager and register custom implementation classes:

public void initWeex() {
WeexModuleManager.init(app());
WeexModuleManager.get().setService(AppConfig.WEEX_URI, ZanWXMNavigatorService.class, new ZanWXMNavigatorService());
}

In Weex, use the module with a unique identifier:

const carmen = weex.requireModule('zwm-carmen')
carmen.post({
url: "wsc.appconfigs/1.0.2/get",
params: {"key": "value"}
}, response => {
if(response.success) {
let data = response.data
}
})

Future Plans

Plans include gradually extracting public functionality into ZanWeexModuleSDK (such as Weex page navigation, H5 page navigation) while keeping only App-specific differences. The solution will also improve user experience for modules like logging.

This design can also be applied to Flutter-Native interaction and general JS-Native interaction scenarios.