看了前面几篇文章后我们终于要开始敲代码了,由于所有前端代码都是 html 静态问题,所以你用什么开发工具都可以,后台我采用 MVC 开发,因为 Html 静态文件需要打包,里面不能和其他项目文件混在一起,不然打出来的 App 会很庞大,浪费手机空间和下载消耗,所以我讲把 mui 和后台分两个项目,这里我偷个懒,直接用我个人网站的代码作为后台,我后台代码暂时不开源,我现在写的 App 前端代码讲开源给大家下载
第一次使用 Github,折腾半天才把代码上传到服务器上,呵呵,提供源码给大家下载,功能我会在以后继续增加
源码下载:
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 作为整体样式,具体样式和用法请查看 ,如果想查看代码,可以直接查看我们创建的 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 文件复制进去,改名为:我的模板页面,重新打开创建页面,我们就可以看到模板页面的选项了
点击 运行 - 手机运行,可以看到我们刚刚写的代码在手机上的效果了,如果想知道如何连接手机,请查看
接下来我们就开始写数据列表,由于 mui 内部的下拉刷新控件使用不方便,我这里使用了一个 下拉刷新的插件,叫 dropload,用法大家可以去网上找
实现了查询功能,我们就需要来增加留言了,在跟目录增加文件夹,/html/note, 在里面增加一个 Add.html 页面,选用我们之前的模板
在列表页面增加打开页面方法,mui.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 留言板就完成啦,功能不多,只有一个留言功能
来源: http://www.cnblogs.com/linfei721/p/6127539.html