Cordova+Dva+antd-mobile实现react移动端开发

新建App

官方文档http://cordova.axuer.com/docs/zh-cn/latest/guide/cli/index.html

安装Cordova CLI

$ npm install -g cordova

创建应用

$ cordova create cordovaApp com.my.demo demo

cordovaApp，com.my.demo，demo依次代表文件夹名，默认反向域值 ，app应用名

添加平台

$ cd cordovaApp
$ cordova platform add android

使用dva

创建react项目

$ dva new src

安装antd-moblie

$ yarn add antd-mobile

配项目输出路径

src/package.json文件build后面添加&& ((robocopy .\dist ..\www /MIR) & exit 0)

"build": "roadhog build && ((robocopy .\\dist ..\\www /MIR) & exit 0)"

真机调试

/src项目根目录下

$ npm run build

cordova根目录下

$ cordova run android

PS：真机调试时，手机需在设置中打开开发者模式，如果找不到开发者模式，可以在关于手机中连续点击版本号

使用cordova插件

以相机插件为例，官方文档地址 点击查看

1. 修改index.js，添加deviceready事件监听

// src/src/index.js
import dva from 'dva';
import './index.css';

document.addEventListener('deviceready', function () {
  // 1. Initialize
  const app = dva();

  // 2. Plugins
  // app.use({});

  // 3. Model
  // app.model(require('./models/example').default);

  // 4. Router
  app.router(require('./router').default);

  // 5. Start
  app.start('#root');

}, false);

2. 在dva的组件目录下新建Camera组件

// src/src/components/Camera.js
function Camera() {
  // 打开图片库
  navigator.camera.getPicture(onSuccess, onFail, {});

  function onSuccess(imageData) {
    var image = document.getElementById('myImage');
    image.src = imageData;
 }

  function onFail(message) {
    alert('Failed because: ' + message);
  }
}

export default Camera;

3. 在IndexPage.js中调用

import React from 'react';
import { connect } from 'dva';
import styles from './IndexPage.css';
import Camera from '../components/Camera'

function IndexPage() {
  return (
    

      
Yay! Welcome to dva!
      

        点击拍照
      
      

        
      
    
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);

4. 打包dva

$ cnpm run build

5. 修改www/index.html，添加cordova.js

// www/index.html



  
  
  
  



  

  
  

6. 真机测试

$ cordova run android