Web程序员开发App系列 - 开发我的第一个App,源码下载

Web程序员开发App系列

  1. Web程序员开发App系列 - 认识HBuilder
  2. Web程序员开发App系列 - 申请苹果开发者账号
  3. Web程序员开发App系列 - 调试Android和iOS手机代码
  4. Web程序员开发App系列 - 开发我的第一个App
  5. 待续

目录

  1. 前言
  2. 源码和App下载
  3. 准备工作
  4. 查看留言页面
  5. 增加留言页面

前言

  看了前面几篇文章后我们终于要开始敲代码了,由于所有前端代码都是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留言板就完成啦,功能不多,只有一个留言功能

时间: 12-06

Web程序员开发App系列 - 开发我的第一个App,源码下载的相关文章

支付宝和微信支付程序-附源码下载

1.同时支持支付宝.微信支付的两种支付模式:刷卡支付 扫码支付:只要把相关支付参数配置到程序里面,就可以正常使用支付:2.可以对接到不同的行业系统里面去,比如餐饮酒店系统,医院系统等需要支付的系统3.开发环境为Visual Studio 2010,无数据库 源码下载点这里 原文地址:https://www.cnblogs.com/starksoft/p/11029393.html

如何让程序员更容易的开发Web界面?重构SmartAdmin展示TinyUI

如何让程序员更容易的开发Web界面,是一个持久的话题,所有的从事相关开发的公司都会碰到这个问题,并且被这个问题所深深困扰. Tiny框架也不得不直视这个问题,确实来说,想解决这个问题,也是非常有难度与深度的,业界也有各种各样的尝试,这也是有各种各样不同框架出现的原因. Tiny框架构建者认为,完全采用一种框架解决所有问题,是不现实的.而且即使目前找得到一种非常好的框架,暂时可以满足应用需要,但是随着技术的发展,业务的进化,就会慢慢变得不再满足业务需要.因此,Tiny框架构建从不再把做一套UI组件

Java程序员如何转Android开发

最近几日偷偷的发现部分Java程序员想转安卓开发,故此加紧补充知识,为大家搜集资料,积极整理前人的经验,希望可以给正处于困惑中的你,带来些许的帮助. 啰哩啰嗦的说说Java和Android程序的区别: Android是主流智能手机的操作系统,Java是一种开发语言,两者没有好坏优劣之分,只是两种职业岗位的选择.学安卓从事移动互联方向开发,学Java从事软件.网站开发.而安卓上的应用大多是Java编写的,所以建议在安卓前期的Java学习阶段中,要用心学好. 言简意赅的说说"转"前的准备:

80. 投奔怒海——一个Domino老程序员眼里的Java开发

这是一个以键盘鼠标为谋生工具已十多年的人初次进行专门的Java开发的体验和感受,对于Java程序员,这些也许早就习以为常,那就把这当成从一个来自不同世界的新人眼里看看他们自己的工作:对于我的Domino同行,这些体验或许将来有更多共鸣的可能. 在加入到这个Java产品开发团队之前,我的Java开发经验如下:十几年前跟着一本Java入门书做练习写的几个Applet,Domino项目开发中写的几个读写数据库和外部邮件的代理,XPages开发中的少量Java Beans和一个流程库.除此之外就只剩下对

ava编码员和程序员的十大开发好助手

所谓工欲善其事必先利其器,对于JAVA编程员和程序员也是一样,本文所列举的诸如JavaIDEdroid.Terminal IDE.DroidEdit.Sand IDE等工具都可以帮助Java编码员和程序员更轻松的面对其工作,提高工作效率. Android可以说是一个极其强大的平台(开源),中国专业的IT在线教育扣丁学堂为Java编码员和程序员整理了一些有用的应用和IDE,使事情变得容易些. 1. JavaIDEdroid JavaIDEdroid是一个IDE(集成开发环境),可以运行于Andro

.Net程序员玩转Android开发---(1)环境搭建

对于没有接触过Android开发的人员来说,可能感觉Android开发比较困难,接下来的一段时间,我们将了解Android开发的具体细节,主要是面对.NET程序员,来看看.NET程序员怎样进行Android开发.  下面我们切入本节正题. 工欲善其事,必先利其器,下面我们准备Android开发的环境搭建,下面是开发的一些工具 1. JDK安装   jdk下载 http://www.oracle.com/technetwork/java/javase/downloads/index.html JD

从一个程序员笑话看软件开发管理(转载)

从一个程序员笑话看软件开发管理 原文出处:猛禽的编程艺术 原文链接:http://blog.csdn.net/raptor/article/details/727299 有一个笑话是这样的: 1. 程序员写出自认为没有Bug的代码. 2. 软件测试,发现了20个Bug. 3. 程序员修改了10个Bug,并告诉测试组另外10个不是Bug. 4. 测试组发现其中5个改动根本无法工作,同时又发现了15个新Bug. 5. 重复3次步骤3和步骤4. 6. 鉴于市场方面的压力,为了配合当初制定的过分乐观的发

程序员之网络安全系列

转自:程序员之网络安全系列(一):为什么要关注网络安全? 假如,明明和丽丽相互不认识,明明想给丽丽写一封情书,让隔壁老王送去 如何保证隔壁老王不能看到情书内容?(保密性) 如何保证隔壁老王不修改情书的内容?(完整性) 如何保证隔壁老王不冒充明明?(身份认证) 如何保证明明不能否认情书是自己写的?(来源的不可否认) 前言 大家都知道最近几年闹的沸沸扬扬的网络安全事件,之前的CSDN密码泄露,不久前的网易邮箱密码泄露,那么如果你的密码泄露,除了本身的网站外,还有很多人其它很多地方甚至银行密码都使用相

.NET WEB程序员需要掌握的技能

本来这个是我给我们公司入职的新人做一个参考,由于 @张善友 老师在他的微信号转了我的这篇文章<<.Net WEB 程序员需要掌握的技能>>,很多人觉得比较有用,说是看了后知道一步步怎么学,这个让我受宠若惊,另外我看到有些同学文章引用了这部分,但是格式很乱看不清楚,所以我就重新整理一下在博客园发一下,希望对更多人有用,也希望大家补充. 基础部分 C# 基础语法 OOP的概念,面向对象的理解 继承 封装 多态 ASP.NET MVC ( Web Form 用的越来越少,如果你不熟悉We