DOCSEARCHbyAlgolia
Submit Docs

JD JSSDK v4 Documentation

website·Indexed 19 days ago

https://opendoc.jd.com/shop/newisv/

A function library for H5 developers providing access to JD App native capabilities, common utility functions, and performance/exception reporting. It includes APIs for redirection (buildSchema, callApp), in-app sharing, calendar reminders, and webview protocol management, with support for iOS, Android, and Harmony NEXT.

Tokens
67.7K
Snippets
392
Records
508
Agent score
99%

What's inside JD JSSDK v4

  1. Overview of JD-JSSDK

    v4
    JD-JSSDK is a function library for H5 developers that provides access to JD App native capabilities, performance anomaly reporting, and common utility functions. It supports Promise-style calls, Tree Shaking, and TypeScript.

  2. Understand JD Open API Multi-platform Support

    The JD Open API integrates Taro's built-in APIs with encapsulated capabilities specific to the JD App. Unless otherwise specified, these APIs are cross-platform and support the JD App, WeChat JD Mini Program, and H5. If an API is not yet supported on a specific platform, the system automatically filters and hides the modules using that incompatible API during the C-end deployment to ensure a stable user experience.

  3. Extend capabilities of the decoration tool platform

    The decoration tool platform allows developers to extend its functionality beyond standard modules. Key extensibility points include:

    1. Custom Data Source Components: When developing module configuration items, the properties field in the JSON defines the data source component. In addition to standard inputs, radio buttons, and time controls, developers can create custom business data sources that handle complex business data and dependencies on other components.
    2. Custom Tools: Developers can extend the platform by creating custom tools.
    3. Custom Skins: The decoration end-user interface skins can be customized.

    These extensions allow development teams to collaborate and build a more powerful decoration editor.

  4. Prevent top-tab switching with CustomScrollView

    When implementing horizontal scrolling scenarios within the JD App, use the CustomScrollView component. Standard horizontal scrolling can trigger top-tab switching (e.g., switching from 'Featured' to 'Products'), which is typically unintended. CustomScrollView prevents this conflict.

  5. Retrieve device information via getDeviceInfo

    v4
    The jmfe.getDeviceInfo() method retrieves technical information about the current device. It is supported on iOS, Android, and Harmony NEXT.
    jmfe.getDeviceInfo().then(({ status, data, msg }) => {
   if (status === '0') {
     // data contains the device information
   }
});

  6. Understand the ISV local development project structure

    A typical ISV local development project is divided into two main sections: cone-service (the backend service layer) and cone-module (the frontend template development layer).

    Key Project Components:

    • .cone: Hidden file marking the Pinecone editor workspace root (do not modify).
    • build/runner.js: The main script used to execute startup commands.
    • cone-service/: Contains the local server logic, including controllers for floors, modules, and pages, as well as Koajs middleware and mock data.
    • cone-module/: The core area for ISV template development, containing the app entry, common interfaces, and the specific module templates.
    • cone-module/src/modules/: The directory where all ISV templates are stored. Each module folder typically contains its own logic (index.tsx), styles (index.module.scss), and configuration files.
    .├── .cone                       // Workspace root marker
├── build
│   └── runner.js               // Startup script
├── cone-service                  // Local service layer
│   ├── config
│   │   └── index.js            // Local service config
│   ├── controller               // API controllers (floor, module, page)
│   ├── datas                    // Auto-generated instance data (e.g., floors.json)
│   ├── routers                  // API route definitions
│   └── server.js                // Server entry
└── cone-module                  // Template development layer
    ├── bin                      // CLI scripts (add/delete templates)
    ├── src
    │   ├── app.ts               // Entry APP
    │   ├── common
    │   │   └── INTERFACE.ts    // API definitions
    │   └── modules              // ISV template directory
    │       └── [ModuleName]
    │           ├── index.tsx     // Rendering logic
    │           ├── index.module.scss // Styles
    │           └── moduleInfo.json   // Module definition

  7. Use the LazyLoadImage component for image lazy loading

    The LazyLoadImage component should be used for all image display scenarios. In addition to lazy loading, it automatically performs image quality degradation based on the user's device and network conditions to optimize performance.
    import { LazyLoadImage } from '@conecli/cone-render/components'
import styles from './index.module.scss'

const DemoModule = (props) => {
    const imgSrc = 'https://m.360buyimg.com/imagetools/jfs/t1/218454/12/6786/106224/61ad7aa1Eef2304e3/1f9aa30ff7cd4758.png'
    return (
        <LazyLoadImage
            className={styles['my-img']}
            src={imgSrc}
        />
    )
}

  8. Use the official custom video component for App compatibility

    Always use the official video component to ensure playback follows the JD App's global playback settings and prevents excessive user data consumption. Non-official components may ignore these settings and lead to module review rejection.

    Key features of the official component:

    1. Supports default autoplay.
    2. Default mute playback (mandatory for autoplay to pass review); users can toggle sound via the mute button.
    3. Customizable mute button (icons, dimensions, and positioning).
    4. Intelligent playback: Starts playing when entering the visible area and pauses when leaving. Resumes from the paused frame upon re-entry unless manually paused.
    5. Configurable visibility threshold: Playback starts when a specific percentage of the video is visible (default is 60%).
    6. Configurable width and height.

  9. Monitor element visibility with InOrOutViewObserver

    The InOrOutViewObserver component is used to trigger specific actions when an element enters or leaves the visible area of the viewport. It can be used to wrap an entire module or specific elements within a module.

    Constraint: Currently, this component only supports monitoring visibility based on vertical scrolling; horizontal scrolling is not supported.

  10. Identify Mac chip type for SwitchHosts installation

    To install the correct version of SwitchHosts, determine your Mac's processor type:

    1. Click the Apple menu in the top-left corner and select 'About This Mac' (关于本机).
    2. Check the processor/chip section: it will either indicate an 'Intel' chip or an 'M1' (Apple Silicon) chip.
    3. Download the corresponding installation package from the SwitchHosts releases page based on your system and kernel type.
    # Download SwitchHosts from: https://github.com/oldj/SwitchHosts/releases

  11. Create and deploy custom modules for ISVs

    ISVs can create custom modules using the following workflow:

    1. Access the Designer Center: Log in to http://sjs-zx.jd.com, navigate to My Module Templates (我的模块模板), and select Create Module Template (新建模块模板).
    2. Initialize Template: Select Custom Template (定制模板) and enter a template name. Once inside, click Create Module (新建模块).
    3. Configure Module: Provide the following details:
      • Module name and description.
      • Module Type:
        • Custom Module: Based on JShop open data sources.
        • Membership Card Module (Required): Based on membership interfaces. Must include: card background, membership system name, membership level, membership rule entry, and membership points.
        • Join-in Gift Pack Module (Required): Based on membership interfaces.
        • Other Membership Modules: Other membership-based modules not subject to system validation.
      • Upload a cover image.
      • Enter JD Cloud Secret ID and password.
      • Upload the local code package and click Pack (打包).
    4. Submit for Review: After packing, click the Audit (审核) button. Upload a thumbnail, select the corresponding Custom Order Number (定制订单号), and submit.
    5. Monitor Status: Check the Waiting for Audit (等待审核) menu. Once approved, the module is available for the shop to use.

  12. Debug and preview ISV modules in WeChat Mini Program

    The ISV module supports local development, previewing, and debugging for WeChat Mini Programs. Note that these instructions are currently only applicable to macOS.
    # Start the ISV development and debug command from the project root
npm run dev:weapp