Dynamic Real‑Time Data Updates and Multi‑Scenario Personalization for Mini‑Program Frontends

As front‑end engineers, we aim to provide practical, maintainable solutions beyond merely learning new frameworks.

This article uses two mini‑program scenarios to illustrate our approach to handling operational data.

Scenario 1: Dynamic Real‑Time Page Data

The JD Gift Card mini‑program homepage needs to update its card list dynamically for holidays such as Chinese New Year and Lantern Festival. We refer to this constantly changing content as operational data .

The straightforward solution—maintain data in the backend, expose an API, and let the front‑end render it—was unavailable because the backend lacked an operational‑data system. After exploring a web‑view approach and encountering domain restrictions, we discovered that the activity platform already provided a configuration API, essentially a lightweight configuration system.

We extended the existing activity page with a new list data structure, fetched the configuration, and rendered the data. The data area is divided as shown in the diagram, and the JSON structure is:

{
  "info": [
    {
      "groupId": "909",
      "groupName": "2-1",
      "list": [
        {
          "desc": "我是描述呀",
          "link": "//test.com/index?th=6fc56b4c50da",
          "picurl": "//m.test.com/483808457/35289/e9f1ae9f/5a83d4ceN4f5a9dec.jpg",
          "name": "我的名字",
          "comment": [
            "sd88a87"
          ]
        }
      ]
    }
  ]
}

From requirement to implementation, the solution took less than a day. Subsequent iterations added a featured image and a Spring Festival lottery activity by simply adding a field and a loop, demonstrating rapid iteration with almost no backend involvement.

Scenario 2: Multi‑Scenario Personalization

The JD Books mini‑program serves different public accounts, each with distinct audience characteristics. To provide precise book recommendations, we created customized homepages for each account.

Leveraging the activity platform, we configured different H5 URLs based on the mini‑program’s appId. At runtime, the page matches the current appId to the appropriate URL and updates the web‑view source.

We encountered a limitation: a mini‑program can only obtain the appId in specific contexts, as illustrated in the following table.

The accompanying flowchart shows how we resolved the appId limitation.

Conclusion

Operational data should rely on a real‑time configuration system; if you need to maintain many operational pages, consider building such a system rather than using ad‑hoc solutions.

Stay aware of the surrounding ecosystem to quickly leverage existing systems and reduce future workload.

Generalize mini‑program specific quirks into reusable processes; the multi‑scenario personalization pattern has already been applied to several mini‑programs and will be encapsulated in upcoming “mini‑program plugins”.

JD Technology – Follow the tech public account

Long press to scan the QR code and follow