Web程序員開發App系列 - 開發個人第一個App，源碼下載

時間 2019-12-11

原文原文鏈接

Web程序員開發App系列

前言

　　看了前面幾篇文章後咱們終於要開始敲代碼了，因爲全部前端代碼都是Html靜態問題，因此你用什麼開發工具均可以，後臺我採用MVC開發，由於Html靜態文件須要打包，裏面不能和其餘項目文件混在一塊兒，否則打出來的App會很龐大，浪費手機空間和下載消耗，因此我講把mui和後臺分兩個項目，這裏我偷個懶，直接用我我的網站的代碼做爲後臺，我後臺代碼暫時不開源，我如今寫的App前端代碼講開源給你們下載javascript

源碼和App下載

　　第一次使用Github，折騰半天才把代碼上傳到服務器上，呵呵，提供源碼給你們下載，功能我會在之後繼續增長css

源碼下載： https://github.com/linfei721/MyApp/html

App下載： http://www.5imvc.com/Home/App前端

準備工做

　　因爲我須要TFS上傳代碼，我這裏用Visual Studio來管理App的代碼，首先創建一個空網站(PS：必定要是徹底空空的一個文件夾，什麼項目文件都不要有)java

打開HBuilder，選擇文件，打開目錄...選擇咱們剛纔建立的網站，填寫項目名稱：MyAppjquery

在剛纔打開的項目上右鍵，選擇轉換成移動Appgit

轉換成功後會有句提示，這個是我上面說的不要和其餘文件混在一塊兒是一個意思程序員

而後打開目錄，你會發現裏面多了一個 manifest.json 的文件，這個就是App的配置文件github

打開咱們以前建立的MUI的實例，若是沒有能夠建立一個（文件-新建-移動App，選擇Hello MUI），找到裏面的 js 文件夾，將裏面 mui.開頭的文件複製咱們本身項目中json

目錄名稱本身隨便定義

一樣，樣式也要拷貝一份

其餘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留言板就完成啦，功能很少，只有一個留言功能