新建App
官方文檔http://cordova.axuer.com/docs/zh-cn/latest/guide/cli/index.html
安裝Cordova CLI
$ npm install -g cordova
創(chuàng)建應(yīng)用
$ cordova create cordovaApp com.my.demo demo
cordovaApp戚嗅，com.my.demo璧亮，demo依次代表文件夾名，默認(rèn)反向域值 ，app應(yīng)用名
添加平臺(tái)
$ cd cordovaApp
$ cordova platform add android
使用dva
創(chuàng)建react項(xiàng)目
$ dva new src
安裝antd-moblie
$ yarn add antd-mobile
配項(xiàng)目輸出路徑
src/package.json文件build后面添加&& ((robocopy .\dist ..\www /MIR) & exit 0)
"build": "roadhog build && ((robocopy .\\dist ..\\www /MIR) & exit 0)"
真機(jī)調(diào)試
/src項(xiàng)目根目錄下
$ npm run build
cordova根目錄下
$ cordova run android
PS：真機(jī)調(diào)試時(shí)，手機(jī)需在設(shè)置中打開開發(fā)者模式辽剧，如果找不到開發(fā)者模式冈钦，可以在關(guān)于手機(jī)中連續(xù)點(diǎn)擊版本號(hào)
使用cordova插件
以相機(jī)插件為例居凶，官方文檔地址 點(diǎn)擊查看
- 修改index.js滩愁，添加deviceready事件監(jiān)聽
// 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中調(diào)用
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}>點(diǎn)擊拍照</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>
- 真機(jī)測試
$ cordova run android
