Step‑by‑Step Guide to Converting JDreact Projects to H5 and Solving Common Compatibility Issues

Introduction

JDreact behaves like a quiet girl who can work on Android, iOS and even generate web code, but turning a JDreact project into H5 requires a series of adjustments.

1. Convert JDreact to H5 – Main Steps

Modify config.js in the generated web folder. Typical changes include:

module.exports = {
  build: {
    entry: 'jsbundles/xxx.web.js',
    publicPath: 'xxx/',
    assetsRoot: 'build-web',
    // other fields …
  }
}

After editing, run npm run web-start to build the H5 bundle.

2. Backend API Calls

Replace the original request method with JSONP and add the appid obtained from the JD Open Platform. Example snippet inserted into web.js :

<script type="text/javascript">
  (function(){
    window.GLOBAL_CONFIG = { pin: "$!pin", sid: "$!sid" };
  })();
</script>

3. Import External CSS

Because JDreact’s style system cannot be platform‑aware, import a CSS file in web.js and reference it from components:

import './JDReactYouka/outstyle.css';

Example CSS ( outstyle.css ) defines a simple white‑text style.

4. Ref and Focus Compatibility

On the web, this.refs.telInput.refs.input.focus() must be guarded by a platform check; otherwise the focus disappears due to the extra click event generated by JDTouchable . The fix adds event.preventDefault() and a conditional focus call.

5. Number Input Edge Cases

When an input reaches a length limit (e.g., 5 digits), the cursor may leave the field before setState finishes, causing the last digit to be lost. Two solutions are presented:

Execute the blur logic inside the setState callback.

Delay the blur with setTimeout(..., 10) to let the state update.

6. Radio‑Group Border Issue

The default style uses only borderRightWidth and borderBottomWidth . After conversion the selected style lost the other borders, making them appear thicker. The fix adds explicit borderTopWidth and borderLeftWidth (or sets them to 0) for both default and selected styles.

7. Data Transfer Between Pages

Simple data can be passed via router parameters, but for H5 the values must be JSON.stringify ‑ed and encodeURIComponent ‑ed. Complex data is also stringified, but the extra encodeURIComponent is unnecessary. Example:

this.context.router.push('indexList', {
  'tels': JSON.stringify(encodeURIComponent(this.state.inputNum))
});

8. Persisting State with AsyncStorage (localStorage on Web)

Sensitive data should be stored with AsyncStorage (mapped to localStorage on the web) instead of URL parameters. Example of saving and retrieving a flag:

AsyncStorage.setItem('showImg', true);
AsyncStorage.getItem('showImg', (err, result) => {
  if (result) {
    this.setState({ showBoxFlag: result === 'true' });
  }
});

Because AsyncStorage stores strings, the retrieved value must be converted back to a Boolean.

Conclusion

Converting JDreact to H5 involves careful handling of configuration, API calls, CSS, refs, input behavior, styling, data passing, and persistent storage. Each issue must be solved while keeping compatibility across iOS, Android and web browsers.