KM盒子APP制作软件

Cordova/Phonegap制作手机网站客户端示例

时间:2016-11-29 08:36 点击:

一、准备工具:
KM盒子5.2专业版,下载网址http://pan.baidu.com/s/1bnDcUOf
KM盒子默认集成Cordova最新版及常用插件,无需搭建杂复的开发环境,安装好KM盒子软件后,即可直接生成APP。

KM盒子集成Cordova插件列表:
org.apache.cordova.splashscreen.SplashScreen
org.apache.cordova.camera.CameraLauncher
org.apache.cordova.contacts.ContactManager
org.apache.cordova.device.Device
org.apache.cordova.dialogs.Notification
org.apache.cordova.file.FileUtils
org.apache.cordova.filetransfer.FileTransfer
org.apache.cordova.inappbrowser.InAppBrowser
org.apache.cordova.media.AudioHandler
org.apache.cordova.mediacapture.Capture
org.apache.cordova.networkinformation.NetworkManager
org.pgsqlite.SQLitePlugin

二、操作步骤
1、新建一个index.html文件,在body中添加如下代码:

<script type="text/javascript">
	    document.addEventListener("deviceready", onDeviceReady, false); 
    function onDeviceReady() {   
            document.addEventListener("offline", onOffline, false);
            document.addEventListener("online", onOnline, false);
    }
            function onOffline(e) {
				self.location="error.html";
            } 
            function onOnline() {
				 var ref = window.open('http://www.kmbox.cn/index.html', '_blank', 'location=no');
				 ref.addEventListener('exit', function(event){Exit();});
            }
	        function Exit(){
              navigator.notification.confirm(
                '你确定要退出程序吗?',  
                function(i){
				    if(i==1){onOnline();}
                    if(i==2){navigator.app.exitApp();}
                },              
                'KM盒子',            
                '取消,退出'          
              );}
        </script>

代码很简单,通过onOnline() 判断网络是否连接,如果网络已连接,则通过window.open('http://www.kmbox.cn/index.html', '_blank', 'location=no');打开InAppBrowser浏览网站,如果网络未连接,则打开错误页面error.html

三、新建error.html错误页面,大致效果如下:

<div class="Absolute-Center"><a href="javascript:void(0);" onclick="onOnline();"><img src="img/iconpng.png" width="125" height="96"></a>
    <p>网络连接出错了...</p>
  </div>

<script type="text/javascript">
		document.addEventListener("deviceready", onDeviceReady, false); 
    function onDeviceReady() {   
            document.addEventListener("online", onOnline, false);
            document.addEventListener("backbutton", onBackKeyDown, false);  
    }
	        function onOnline() {
				 var ref = window.open('http://www.kmbox.cn/index.html', '_blank', 'location=no');
				 ref.addEventListener('exit', function(event){ Exit(); });
            }
	        function Exit(){
              navigator.notification.confirm(
                '你确定要退出程序吗?',  
                function(i){
		    if(i==1){onOnline();}
                    if(i==2){navigator.app.exitApp();}
                },              
                'KM盒子',            
                '取消,退出'          
              );}
			//返回键
			function onBackKeyDown(){			
			document.removeEventListener("backbutton", onBackKeyDown, false); //注销返回键
			//3秒内点击两次返回键退出
			var intervalID = window.setInterval(
			function() {
			window.clearInterval(intervalID);
			document.addEventListener("backbutton", onBackKeyDown, false);
			},3000);}
        </script>  

最后,打开KM盒子软件,点击制作APK,项目路径选择刚才新建的文件夹,然后编译文件,按提示操作即可生成APK手机客户端。

源文件下载:链接: http://yun.baidu.com/s/1c0wFXxI


我要纠错