Web程序員開發App系列
- Web程序員開發App系列 - 認識HBuilder
- Web程序員開發App系列 - 申請蘋果開發者賬號
- Web程序員開發App系列 - 調試Android和iOS手機代碼
- Web程序員開發App系列 - 開發我的第一個App
- 待續
目錄
前言
看了前面幾篇文章后我們終於要開始敲代碼了，由於所有前端代碼都是Html靜態問題，所以你用什么開發工具都可以，后台我采用MVC開發，因為Html靜態文件需要打包，里面不能和其他項目文件混在一起，不然打出來的App會很龐大，浪費手機空間和下載消耗，所以我講把mui和后台分兩個項目，這里我偷個懶，直接用我個人網站的代碼作為后台，我后台代碼暫時不開源，我現在寫的App前端代碼講開源給大家下載
源碼和App下載
第一次使用Github，折騰半天才把代碼上傳到服務器上，呵呵，提供源碼給大家下載，功能我會在以后繼續增加
源碼下載： https://github.com/linfei721/MyApp/
App下載： http://www.5imvc.com/Home/App
准備工作
由於我需要TFS上傳代碼，我這里用Visual Studio來管理App的代碼，首先建立一個空網站(PS：一定要是完全空空的一個文件夾，什么項目文件都不要有)
打開HBuilder，選擇文件，打開目錄...選擇我們剛才創建的網站，填寫項目名稱：MyApp
在剛才打開的項目上右鍵，選擇 轉換成移動App
轉換成功后會有句提示，這個是我上面說的不要和其他文件混在一起是一個意思
然后打開目錄，你會發現里面多了一個 manifest.json 的文件，這個就是App的配置文件
打開我們之前創建的MUI的實例，如果沒有可以創建一個（文件-新建-移動App，選擇Hello MUI），找到里面的 js 文件夾，將里面 mui.開頭的文件復制我們自己項目中
目錄名稱自己隨便定義
同樣，樣式也要拷貝一份
其他javascript文件我還使用了jquery 和 angularJs，由於mui載的js篩選器和jquery很類似又有點不一樣，但是沒找到相應的文檔，所以在使用的時候不方便，所以我js篩選器以jquery為主，剛學angularJs，頁面的MVVM就使用這個了，文件名盡量都是使用小寫
查看留言頁面
這里我將使用MUI作為整體樣式，具體樣式和用法請查看 http://dev.dcloud.net.cn/mui/ ，如果想查看代碼，可以直接查看我們創建的hello mui的例子里，直接運行起來就可以找里面找到我們想要的樣式了
首先創建一個Index.html文件在跟目錄(注意：這里的I大寫開通，manifest.json文件配置的頁面入口是小寫的，所以要調整為大寫開頭)，這就是我們的首頁了，由於我對angularJs了解不是太多，所以需要借助jquery輔助，O(∩_∩)O~
mui.power.js 文件為我們所有頁面通用方法，由於全部是html靜態頁面，所以沒有類似模板的東西，所以頁面很多地方都要重復寫代碼，如果有誰知道可以復用的方法可以推薦下
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>我的首頁</title> <script src="scripts/mui/mui.js"></script> <link href="content/mui.min.css" rel="stylesheet" /> <script src="scripts/jquery.min.js"></script> <script src="scripts/angular/angular.min.js"></script> <script src="scripts/angular/angular-sanitize.min.js"></script> <script src="scripts/mui.power.js"></script> </head> <body ng-controller="MyController"> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">5imvc首頁</h1> </header> <div class="mui-content"> </div> </body> </html>
在HBuilder創建一個自己的創建模板，下次就按照上面的代碼創建頁面了，點擊 文件-新建-html文件，點擊自定義模板
把index.html文件復制進去，改名為：我的模板頁面，重新打開創建頁面，我們就可以看到模板頁面的選項了
點擊 運行-手機運行，可以看到我們剛剛寫的代碼在手機上的效果了，如果想知道如何連接手機，請查看 Web程序員開發App系列 - 調試Android和iOS手機代碼
接下來我們就開始寫數據列表，由於mui內部的下拉刷新控件使用不方便，我這里使用了一個 下拉刷新的插件，叫 dropload，用法大家可以去網上找
增加留言頁面
實現了查詢功能，我們就需要來增加留言了，在跟目錄增加文件夾，/html/note,在里面增加一個Add.html頁面，選用我們之前的模板
在列表頁面增加打開頁面方法，mui.openWindow 的更多參數請查看 http://dev.dcloud.net.cn/mui/window/#openwindow
$(window).off('index_reload').on('index_reload') 的意義在於在當前頁面注冊一個方法，后面頁面調用，例如提交完留言后，返回頁面並刷新數據
Index.html代碼
$scope.addNote = function () {
mui.openWindow({
id:'addNote',
url:'html/note/Add.html',
extras:{}
})
$(window).off('index_reload').on('index_reload', function () {
initPage();
});
}
Add.html代碼，在提交完成后，使用mui.fire 方法調用主頁面里的方法
plus.nativeUI.showWaiting()
$.post(mui.powerData.rootUrl + "Home/NoteAdd", { NContent: $scope.note, Type: 'App' }, function (data) {
plus.nativeUI.closeWaiting();
if (data === "成功") {
mui.fire(view.opener(), 'index_reload', {});
mui.back();
}
else {
mui.alert(data, 'O(∩_∩)O~');
}
})
好了，我們第一個App留言板就完成啦，功能不多，只有一個留言功能