看了前面几篇文章后咱们终于要开始敲代码了,因为全部前端代码都是Html静态问题,因此你用什么开发工具均可以,后台我采用MVC开发,由于Html静态文件须要打包,里面不能和其余项目文件混在一块儿,否则打出来的App会很庞大,浪费手机空间和下载消耗,因此我讲把mui和后台分两个项目,这里我偷个懒,直接用我我的网站的代码做为后台,我后台代码暂时不开源,我如今写的App前端代码讲开源给你们下载javascript
第一次使用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留言板就完成啦,功能很少,只有一个留言功能