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

时间:2022-04-25 05:03:00

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:一定要是完全空空的一个文件夹,什么项目文件都不要有)

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

打开HBuilder,选择文件,打开目录...选择我们刚才创建的网站,填写项目名称:MyApp

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

在刚才打开的项目上右键,选择 转换成移动App

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

转换成功后会有句提示,这个是我上面说的不要和其他文件混在一起是一个意思

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

然后打开目录,你会发现里面多了一个 manifest.json 的文件,这个就是App的配置文件

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

打开我们之前创建的MUI的实例,如果没有可以创建一个(文件-新建-移动App,选择Hello MUI),找到里面的 js 文件夹,将里面 mui.开头的文件复制我们自己项目中

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

目录名称自己随便定义

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

同样,样式也要拷贝一份

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

其他javascript文件我还使用了jquery 和 angularJs,由于mui载的js筛选器和jquery很类似又有点不一样,但是没找到相应的文档,所以在使用的时候不方便,所以我js筛选器以jquery为主,刚学angularJs,页面的MVVM就使用这个了,文件名尽量都是使用小写

查看留言页面

  这里我将使用MUI作为整体样式,具体样式和用法请查看 http://dev.dcloud.net.cn/mui/ ,如果想查看代码,可以直接查看我们创建的hello mui的例子里,直接运行起来就可以找里面找到我们想要的样式了

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

首先创建一个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文件,点击自定义模板

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

把index.html文件复制进去,改名为:我的模板页面,重新打开创建页面,我们就可以看到模板页面的选项了

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

点击 运行-手机运行,可以看到我们刚刚写的代码在手机上的效果了,如果想知道如何连接手机,请查看 Web程序员开发App系列 - 调试Android和iOS手机代码

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

接下来我们就开始写数据列表,由于mui内部的下拉刷新控件使用不方便,我这里使用了一个 下拉刷新的插件,叫 dropload,用法大家可以去网上找

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

增加留言页面

  实现了查询功能,我们就需要来增加留言了,在跟目录增加文件夹,/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留言板就完成啦,功能不多,只有一个留言功能