新建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插件
以相机插件为例，官方文档地址 点击查看
- 修改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);
- 在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;
- 在IndexPage.js中调用
import React from 'react';
import { connect } from 'dva';
import styles from './IndexPage.css';
import Camera from '../components/Camera'
function IndexPage() {
return (
<div className={styles.normal}>
<h1 className={styles.title}>Yay! Welcome to dva!</h1>
<div className={styles.block}>
<button onClick={Camera}>点击拍照</button>
</div>
<div className={styles.block}>
<img id="myImage" className={styles.welcome} alt="img" />
</div>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
- 打包dva
$ cnpm run build
- 修改www/index.html，添加cordova.js
// www/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dva Demo</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
- 真机测试
$ cordova run android
