首页 > 代码库 > Sencha Touch+PhoneGap打造超级奶爸之喂养记(一) 源码免费提供

Sencha Touch+PhoneGap打造超级奶爸之喂养记(一) 源码免费提供

起源

  非常高兴我的宝宝健康平安的出生了。对于初次做奶爸的我,喜悦过后,面临着各中担心,担心宝宝各项指标是否正常。最初几天都是在医院待着,从出生那一天开始,护士妹妹隔一段时间就会来问宝宝的喂奶,大小便,体温等情况。我想医生们应该也是通过这些数据来分析宝宝是否健康。宝宝刚才出生的几天,吃喝,大小便很频繁,但又不方便记录,很容易遗漏,所以想做一个APP来记录宝宝的一些数据。最近正在学习Sencha Touch+PhoneGap,经过几天的开发,基本成型,目前我的宝宝一些数据都是用这个软件来记录的。同时也分享给大家,希望能对更多的人有用。初次开发,还有很多不周全的地方,望各们指正。

  宝宝刚出生这一段时间主要需要记录的数据有:妈妈喂奶次数,喝牛奶多少量,大小便多少次,体温多少,睡了多长时间。APP也是围绕这几个功能进行开发。

最终效果

首页

母乳

奶瓶

尿布

体温

新增睡觉记录

 

技术点

1.使用Sencha Touch+PhoneGap开发移动端应用,结构比较完整,且功能不复杂,适合初学者学习。

2.使用sqlite做为数据存储,实现真机和PC浏览器两种模式对数据库操作。可以在PC上用浏览器上运行,方便对程序进行调试。

3.扩展时间选择控件,可以同时对日期,时间进行选择。

4.对日期选择控件进行汉化处理。

 

程序结构

本着学习和分享的精神,记录我整个程序的架构和开发过程,以方便初学者可以更快速的入门。

Sencha Touch使用的是MVC模式,有些内容是固定的,网上有很多入门文章,都是需要先装一堆东西。我用的方法很简单,直接新建目录,把需要的资源包拷贝到指定的目录。

整个程序目录结构如下:

sencha touch 2.3.1,phonegap 2.0.0

因为此程序可以在PC端支持HTML5的浏览器下运行,所以我们先讲sencha touch的开发,以后再说使用phonegap打包成手机端应用。

 

相关代码

 index.html

 1 <!DOCTYPE html> 2 <html> 3 <head> 4     <title>喂养记录</title> 5     <meta http-equiv=Content-Type content="text/html;charset=utf-8"> 6      7     <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> 8      9     <link href="lib/st2.3.1/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />10     <link href="resources/css/app.css" rel="stylesheet" type="text/css" />11     <link href="resources/css/main.css" rel="stylesheet" type="text/css" />12     <script src="lib/st2.3.1/sencha-touch-debug.js" type="text/javascript"></script>    13     <script src="app.js" type="text/javascript"></script>14     15     <script type="text/javascript" charset="utf-8" src="plugin/pgsqliteplugin.js"></script>16     <script type="text/javascript" charset="utf-8" src="plugin/sqlitedb.js"></script>17     18     <script type="text/javascript" charset="utf-8" src="utils/dbhelper.js"></script>19     <script type="text/javascript" charset="utf-8" src="utils/utils.js"></script>20     21 </head>22 <body onload="onBodyLoad()">23 24 </body>25 </html>


app.js

  1 //数据库文件  2 var localFileName = "superdad.db",fgDB;  3 var weinaiStore, muruStore, niaobuStore, tiwenStore, shuijiaoStore;  4   5 function onBodyLoad() {  6     // 注册回退按钮事件监听器  7     document.addEventListener("backbutton", onBackKeyDown, false); // 返回键  8   9     if (Ext.os.is.Windows) { 10         //alert("windows"); 11         fgDB = new sqliteDB(localFileName, 1024*1024*2);  12         if(0) { 13             initFGdb(); 14         } 15     } else { 16         document.addEventListener("deviceready", initSystem, true); 17     } 18 } 19  20 function initFGdb() { 21     fgDB.transaction(function(tx) { 22         tx.executeSql(‘DROP TABLE IF EXISTS weiyang‘); 23         tx.executeSql(‘CREATE TABLE IF NOT EXISTS [weiyang] (‘ + 24                 ‘[id] INTEGER PRIMARY KEY AUTOINCREMENT, ‘ + 25                 ‘[itemhash] VARCHAR2(16), ‘ + 26                 ‘[stype] VARCHAR2(2), ‘ + 27                 ‘[date] VARCHAR2(20), ‘ + 28                 ‘[volume] VARCHAR2(4), ‘ + 29                 ‘[remark] VARCHAR2(200), ‘ + 30                 ‘[dateCreated] DATETIME)‘ 31             ); 32     }, function(){   33         //alert(‘初始化表成功‘);  34     }, function (er) { 35         console.log(‘error with executeSql‘, er); 36     });     37 } 38  39 function initSystem() { 40     //compass = new Compass(); 41     //compass.startWatch(); 42     //alert("罗盘成功!"); 43     window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) { 44                 fileSystem = fs; 45                 // isFirstLoad = false; 46                 if (fileSystem != null) { 47                     // alert(fileSystem.root.fullPath); 48                     var mapFile = fileSystem.root.getDirectory("superdad/", { 49                                 create : true, 50                                 exclusive : false 51                             }, function(parent) { 52                                 //打开数据库 53                                 openMBdb(parent.fullPath); 54                                 // alert(mapPath); 55                         }, function(msg) { 56                             // alert(msg); 57                         }); 58                 } else { 59                     alert("数据库打开失败!"); 60                 } 61             }, function() { 62                 alert("数据库打开失败!"); 63             }); 64 } 65 // enable Ext autoloader 66 Ext.Loader.setConfig({ 67             enabled : true 68         }); 69          70 function openMBdb(path) { 71             var options = {}; 72             options.storage = "external"; 73             options.path = path; 74             fgDB = new PGSQLitePlugin(localFileName, function(dbResult, dbObject){ 75                 console.log("Database status=" + dbResult.status); 76                 console.log("Database version=" + dbResult.version); 77                 //fgdb = dbObject; 78                 //alert("数据库打开成功"); 79                 if(dbResult.isNew) { 80                     initFGdb(); 81                 } 82             }, function(err){ 83                 console.log("Error create database::err=" + err); 84                 alert("数据库打开失败" + err); 85             },options); 86 } 87  88 function onConfirm(button) { 89     // alert(‘You selected button ‘ + button); 90     if (button == 1) 91         navigator.app.exitApp(); // 选择了确定才执行退出 92 } 93 // Show a custom confirmation dialog 94 // 95 function onBackKeyDown() { 96     navigator.notification.confirm(‘按确定退出程序!‘, // message 97             onConfirm, // callback to invoke with index of button pressed 98             ‘确定要退出程序吗?‘, // title 99             ‘确定,取消‘ // buttonLabels100     );101 }102 103 // <debug>104 Ext.Loader.setPath({105             ‘Ext.ux‘ : ‘ux‘,106             ‘Ext‘ : ‘lib/st2.3.1/src‘,107             ‘WeiYang‘ : ‘app‘108         });109 // </debug>110 Ext.application({111             name : ‘WeiYang‘,    //程序名称112             requires : [‘Ext.MessageBox‘], //引用的资源113             models : [‘WeiYangInfo‘],    //数据模型114             stores : [‘WeiYangStore‘],    //数据源115             views : [‘Main‘,‘Login‘],    //视图116             controllers : [‘MainController‘],    //控制器,117             launch : function() {118                 // Destroy the #appLoadingIndicator element119                 // Ext.fly(‘appLoadingIndicator‘).destroy();120                 //Ext.Viewport.add(Ext.create(‘WeiYang.view.Login‘));121                 Ext.Viewport.add(Ext.create(‘WeiYang.view.Main‘));122                 123                 weinaiStore = Ext.create(‘WeiYang.store.WeiYangStore‘);124                 muruStore = Ext.create(‘WeiYang.store.WeiYangStore‘);125                 niaobuStore = Ext.create(‘WeiYang.store.WeiYangStore‘);126                 tiwenStore = Ext.create(‘WeiYang.store.WeiYangStore‘);127                 shuijiaoStore = Ext.create(‘WeiYang.store.WeiYangStore‘);128                 129                 Ext.Date.monthNames = [  130                        ‘一月‘, ‘二月‘, ‘三月‘, ‘四月‘, ‘五月‘, ‘六月‘,   131                        ‘七月‘, ‘八月‘, ‘九月‘, ‘十月‘, ‘十一月‘, ‘十二月‘  132                       ]; 133                       134                 Ext.Date.dayNames=["星期一", "星期二",  "星期三",  "星期四",  "星期五",  "星期六",  "星期日"];135             },136             // html5缓存更新137             onUpdated : function() {138                 Ext.Msg.confirm("更新", "系统已经自动更新到最新版本,是否重新加载?", function(139                                 buttonId) {140                             if (buttonId === ‘yes‘) {141                                 window.location.reload();142                             }143                         });144             }145         });146         

 

 今天先写到这里,宝宝醒了,得去冲牛奶了,下回继续说。


源代码免费提供

需要源码的朋友可以留下邮箱,我统一发送。

也可以先下载APK试试

超级奶爸之喂养记APK点击下载