Please don’t use dev-tools debugging，can you tell me how many errors in this codes?
single file index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *">
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Color theme for statusbar -->
<meta name="theme-color" content="#2196f3">
<!-- Your app title -->
<title>My App</title>
<!-- Path to Framework7 Library CSS -->
<link href="framework7.min.css" rel="stylesheet" type="text/css"/>
<!-- Path to your custom app styles-->
</head>
<body>
<div id="app">
<!-- Statusbar overlay -->
<div class="statusbar"></div>
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<!-- Initial Page, "data-name" contains page name -->
<div data-name="home" class="page">
<!-- Top Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="title">Awesome App</div>
</div>
</div>
<!-- Toolbar -->
<div class="toolbar">
<div class="toolbar-inner">
<!-- Toolbar links -->
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
</div>
</div>
<!-- Scrollable page content -->
<div class="page-content">
<p>real first!
</p>
<!-- Link to another page -->
</div> -->
</div>
</div>
</div>
<script src="cordova.js"></script>
<script src="framework7-3.6.3.js"></script>
<script>
// Initialize app
var app = new Framework7({
root: '#app',
name: 'bad',
id: 'test.com',
theme: 'auto',
routes: [{
path: '/index/',
component: {
template: `
<div class="page" data-name="first">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="title">bad</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="showpic">
<img id="showimg" class="showimg" src="img/logo.png" />
</div>
<div class="choosediv">
<button class="takepicture" onclick="takePhoto()">Take photo1</button>
<a class="takepicture" @click="takePhoto">Take photo2</button>
</div>
</div>
</div>
</div>
`,
style: `
.choosediv{
width:100%;
height:100px;
position: fixed;
text-align: center;
bottom: 10%;
}
.showimg{
margin-top: 20%;
max-width: 300px;
max-width: 300px;
width:200px;
height:200px;
}
.takepicture{
width:100px;
height:100px;
text-align: center;
color: #ffffff;
font-family: "微软雅黑";
font-size: 16px;
background-color: #FF9999;
margin-left: 20px;
outline：none;
outline-color: rgba(255,255,255,0);
border-radius: 50% 50%;
border:0px;
}
.showpic{
width:80%;
height:50%;
background-color: rgba(255,255,255,0.6);
position:fixed;
top:10%;
left:10%;
text-align: center;
}
`,
methods: {
takePhoto: function () {
var cameraOptions= {
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType : Camera.EncodingType.JPEG,
targetWdith : 100,
targetHeight : 100,
popoverOptions : CameraPopoverOptions,
saveToPhotoAlbum : false
};
console.log("cam on");
navigator.camera.getPicture(onCameraSuccess,onCameraError,cameraOptions);
}
},
on: {
pageInit:function () {
console.log('init first');
}
}
}
}]
});
var mv = app.view.create('.view-main',{
url: '/index/',
})
// If we need to use custom DOM library, let's save it to $$ variable:
var $$ = Dom7;
// Handle Cordova Device Ready Event
$$(document).on('deviceready', function() {
console.log("Device is ready!");
});
// Option 1. Using one 'page:init' handler for all pages
$$(document).on('page:init', function (e) {
function takePhoto(){
var cameraOptions= {
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType : Camera.EncodingType.JPEG,
targetWdith : 100,
targetHeight : 100,
popoverOptions : CameraPopoverOptions,
saveToPhotoAlbum : false
};
console.log("cam on");
navigator.camera.getPicture(onCameraSuccess,onCameraError,cameraOptions);
}
function onCameraSuccess(imageURL){
console.log("onCameraSuccess:"+imageURL);
var image = document.getElementById('showimg');
image.src = "data:image/jpeg;base64," + imageURL;
}
function onCameraError(e){
console.log("onCameraError:"+e);
}
})
</script>
</body>
</html>
Advice:
A good framework is very helpful to program developers!
1, it should have a clear introduction to the main process running, so that we can quickly understand how framework developers are loading, rather than reading framework source code to understand these.
Recommendation: add lifecycle diagrams for the underlying components. Objects named app are taken for granted as entries.
2. It can cultivate users’ good coding habits.
Recommendation: do not include a global dirty function declaration in the sample code.
3. It has a very console-friendly way of debugging errors by providing clear error location through the console, rather than endlessly writing “console-log” code to track them.
4, it has very clear API description, convenient query help way, have a good display.
Suggestion: if possible, add an exception throw location.