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