【发布时间】:2017-04-10 10:57:21
【问题描述】:
我刚刚设置了我的第一个 ionic 2 应用程序(我已经相当广泛地使用了 ionic 1)。我正在尝试使用ionic-native camera 预览插件。
设置非常简单:
npm install -g ionic cordova
ionic start timesnap --v2
ionic platform add android
ionic platform add ios
ionic plugin add cordova-plugin-camera-preview --save
然后我将示例代码复制并粘贴到 about 页面中:
import { CameraPreview, CameraPreviewRect } from 'ionic-native';
// camera options (Size and location)
let cameraRect: CameraPreviewRect = {
x: 100,
y: 100,
width: 200,
height: 200
};
// start camera
CameraPreview.startCamera(
cameraRect, // position and size of preview
'front', // default camera
true, // tap to take picture
false, // disable drag
true, // send the preview to the back of the screen so we can addoverlaying elements
1 //alpha
);
我使用以下命令启动了该应用:
ionic emulate android -lcs
ionic emulate ios -lcs --target='iPhone-6'
起初相机没有出现,然后我运行 chrome://inspect 并看到有关 Cordova 缺少“尝试在模拟器中运行”的警告,但这是在 Android 模拟器中运行时。我也尝试了 iOS 并看到了相同的结果。
任何想法为什么cordova没有加载?
这是来自chrome://inspect 在安卓模拟器中运行时的完整错误日志:
更新... index.html
(只是ionic生成的标准)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app class="trans"></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
【问题讨论】:
-
您能否也分享您的 index.html 文件,尤其是在您包含所有必要脚本的地方?
-
@KerriShotts 我添加了它。我发现如果我不使用实时重新加载标志 (
-l),它似乎可以正常工作。不确定这是否是预期的,但我在他们的 github 上提出了一个问题。如果这是预期的,它可能应该在某个地方的文档中。 -
你能检查一下这是否有效。我想在更改时构建应用程序,因为我正在使用本机功能。每次运行
run命令非常令人沮丧..livereload 现在工作了吗?
标签: cordova ionic-framework camera ionic2