Sencha Touch+PhoneGap打造超級奶爸之餵養記(一) 源碼免費提供

時間 2019-11-11

標籤 sencha touch+phonegap touch phonegap 打造超級餵養源碼免費提供简体版

原文原文鏈接

起源javascript

　　很是高興個人寶寶健康平安的出生了。對於初次作奶爸的我，喜悅事後，面臨着各中擔憂，擔憂寶寶各項指標是否正常。最初幾天都是在醫院待着，從出生那一天開始，護士妹妹隔一段時間就會來問寶寶的餵奶，大小便，體溫等狀況。我想醫生們應該也是經過這些數據來分析寶寶是否健康。寶寶剛纔出生的幾天，吃喝，大小便很頻繁，但又不方便記錄，很容易遺漏，因此想作一個APP來記錄寶寶的一些數據。最近正在學習Sencha Touch+PhoneGap,通過幾天的開發，基本成型，目前個人寶寶一些數據都是用這個軟件來記錄的。同時也分享給你們，但願能對更多的人有用。初次開發，還有不少不周全的地方，望各們指正。css

　　寶寶剛出生這一段時間主要須要記錄的數據有：媽媽餵奶次數，喝牛奶多少許，大小便多少次，體溫多少，睡了多長時間。APP也是圍繞這幾個功能進行開發。html

最終效果html5

首頁java

母乳git

奶瓶sql

尿布數據庫

體溫windows

新增睡覺記錄瀏覽器

技術點

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             '肯定,取消' // buttonLabels
100     );
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 element
119                 // 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