Hbuilder开发HTML5 APP之创建子页面

【Hbuilder开发HTML5 APP之创建子页面】的更多相关文章

Hbuilder开发HTML5 APP之创建子页面

折腾了好久,终于看明白怎么创建了: 1.创建个html5的mui页面,在其初始化方法中: mui.init({ subpages:[{ id:"list", url:"listx.html", styles:{ top:'45px', bottom:0 } }] }); 这里注意:subpages是个Array对象,意味着它可以创建多个子页, 2.子页最好 <meta name="viewport" content…

Hbuilder开发HTML5 APP之打开新页面

mui.openWindow({ url: 'examples/info.html', id:'info' }); 要在页面间传递参数,需要使用一个extras:{}对象另外打开的页面显示的内容必须装在<div class="mui-content">中…

Hbuilder开发HTML5 APP之侧滑菜单

1.思路: 其时有2个WebView,一个main是用来装主页面,一个menu是用来装菜单(为提高性能,菜单项是采用了预加载方式的,预加载时为了避免和主页面争夺资源,采用延时加载,例如: //plusReady事件后,自动创建menu窗口: mui.plusReady(function() { main = plus.webview.currentWebview(); //setTimeout的目的是等待窗体动画结束后,再执行create webview操作,避免资源竞争,导致窗口动画不流畅:…

Hbuilder开发HTML5 APP之WebView

WebView就是原生的WebView,HBuilder在其上封装了一层,便于Javascript的调用,结构如图: 也可以实现这样的结构: 注意:WebView的使用属性HTML5+规范,所以必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()方法,涉及到HTML5+的api,建议都写在mui.plusReady方法中…

Hbuilder开发HTML5 APP之向导页制作

研究了下,向导页的制作还是比较简单的,主要使用的是mui控件中的”图片轮播“组件,组件的标签写法手册中有,中间发现个有趣的东西,如果要作全屏,可以加个样式mui-fullscreen 滑动图片时会自动激发slide事件,要想知道翻到哪页了,可使用事件参数event,event.detail.slideNumber得到比如翻到最后一页了,让某个按钮的透明度缓慢变成1,这样就可以看到得到按钮了,点击后跳转到主页!…

Hbuilder开发HTML5 APP之图标和启动页制作

1.点击项目下的"manifest.json"文件,会出现自动化的配置工具: 2.点“图标配置“,上传制作好的图标文件,自动生成不同大小的ico,这个要赞下! 3.启动图片(splash)配置,唯一麻烦的是要制作各种尺寸的图,并依次本配置,图片的命名最好采用:entry_bg_1080x1920.png这种形式…

Ionic2开发笔记（2）创建子页面及其应用

1. 当你第一次产生ionic2应用程序,这是生成的项目结构 ├── ├── config.xml 这包含配置应用程序的名称,和包名,将被用于我们的应用程序安装到一个实际的设备. ├── hooks ├── ionic.config.json ionic版本信息 "name": "Ion2","app_id": "","v2": true,"typescript": true…

MUI框架-08-窗口管理-创建子页面

MUI框架-08-窗口管理-创建子页面之前写过这一篇,不知道为什么被删了,我就大概写了,抱歉创建子页面是为了,页面切换时,外面的页面不动,让 MUI 写出来的页面更接近原生 app 官方文档:http://dev.dcloud.net.cn/mui/window/#subpage 创建子页面 1.在HBuilder 新建移动app项目,选择 mui 3.新建html目录用来存放html文件,新建含 mui 的HTML文件在 Hbuilder 中,新建HTML文件,选择"含 mui的HTML…

使用HBuilder开发移动APP

前言 HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.HBuilder的编写用到了Java.C.Web和Ruby.HBuilder本身主体是由Java编写,它基于Eclipse,所以顺其自然地兼容了Eclipse的插件.快,是HBuilder的最大优势,通过完整的语法提示和代码输入法.代码块等,大幅提升HTML.js.css的开发效率. 内置MUI框架,真正彻底的跨平台开发,不是简单的跨iOS和Android.基于mui,一套HTML5工程,通过前端构建工具…

HBuilder开发移动App——manifest.json文件解析

以前做过Android App开发,对于各项配置都是在AndroidManifest.xml文件中完成的,包括权限的设定.图标.标签.App的名字.Activity注册等等使用HBuilder开发移动App,HBuilder是基于Eclipse进行二次开发的,所以新建项目等各项操作与Eclipse类似. 首先新建一个移动App项目这里选择mui项目,点击完成后可以看到项目文件列表,如下: 这里我们主要看一下manifest.json文件应用信息选择应用信息一项,然后 1.填写应用名称也…

使用backbone.js、zepto.js和trigger.io开发HTML5 App

为了力求运行速度快.响应迅即,我们推荐使用backbone.js和zepto.js. 为了让这个过程更有意思,我们开发了一个小小的示例项目,使用CSS重置样式.Backbone.js和带转场效果的几个页面.我们的项目会显示Trigger推特更新内容和单个的推特消息.与往常一样,我们将使用同一个HTML5代码库创建安卓和iOS应用程序.在这个过程中,我们将介绍如何: 把你的JavaScript文件添加到应用程序中使用Backbone.js来显示响应迅即的界面使用CSS重置样式,减少跨平台出现的…

Hbuilder开发移动App（1）

奇妙的前端,奇妙的js 众所周知,自从js有nodejs后,前端人员可以华丽的转身,去开发高并发非阻塞的服务端程序, 随着html5的出现,伴随一些amazing的特性,h5开发app的技术越发的成熟, 自从2008年国外推出phonegap后,前端人员又踏上开发app的路程, 今年来国内也对应推出了一些可以让前端人员开发app的ide, 不过大部分是收费的,强定制的,这里就不一一列举了. 这里推荐DCloud推出的HBuilder,一句话谁用谁知道. 一次开发两种app 通过HBuilder的…

使用HBuilder开发移动APP：开发环境准备(转)

一直想开发个APP玩玩的,但是作为一个PHP码农,需要新学习JAVA或者Object C,这也是一直没能实现这个目标的原因.但是现在HTML5+.APPCAN.apicloud很多工具利用前端技术就能轻松开发app,这也使我的这个愿望终于能成真了.哪款工具适合自己只有试验了才知道,所以计划一边学习一边记录下来过程和体会.最先试用的是HTML5+,因为HBuilder这款前端开发工具比较合眼缘吧... 首先从DCloud下载了HBuilder,地址是:http://www.dcloud.io/…

使用HBuilder开发移动APP：ajax调用接口数据

既然要做APP,与接口交互式少不了的,除非只是想做一个纯静态的APP.所以html5+的环境准备好后,我最先开始研究的就是如何与接口交互. 使用HBuilder新建示例教程后,里面会有一个ajax(网络请求)的列子,文件目录是examples/ajax.html.看了下这个文件的代码,它的功能就是点击“提交”按钮后提交参数给接口,然后根据选择的返回数据格式,将一段字符串打印出来.我准备改造下这段代码,改由页面加载时调用列表接口,并在APP里显示这段列表,毕竟这种情况应该经常会用到. 1.在l…

阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_17-CMS前端工程创建-单页面应用介绍

查看运行起来的页面的源代码这个webpck打包生成的文件. 单页面应用的优缺点: 优点: 1.用户操作体验好,用户不用刷新页面,整个交互过程都是通过Ajax来操作. 2.适合前后端分离开发,服务端提供http接口,前端请求http接口获取数据,使用JS进行客户端渲染. 缺点: 1.首页加载慢单页面应用会将js. css打包成一个文件,在加载页面显示的时候加载打包文件,如果打包文件较大或者网速慢则用户体验不好. 2.SEO不友好 SEO(Search Engine Optimization)…

HBuilder开发ios App离线打包启动画面无效的解决方法

其中容易忽略的一点是manifest.json文件.plus下加入如下配置: "splashscreen": { "autoclose": false,/*如果为true,程序启动的图片可以自动关闭,如果为false,开发者需要手动关闭*/ "waiting": true/*是否在程序启动界面显示等待雪花,true表示显示,false表示不显示.*/ }, 然后,替换splash下的启动png图片.…

Hbuilder + MUI 修改App 启动的首页面

…

MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

概述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblogs.com/jerehedu/p/7832808.html 今天这篇博客,我们继续深入学习MUI框架,主要学习这几个方面:加载子页面.页面跳转并传值,底部选项卡的多种实现方式. 一.MUI加载子页面 1加载子页面详解在mobile app开发过程中,经常遇到卡头卡尾的页面,也就是说头部和尾部保持…

HBuilder mui 手机app开发 Android手机app开发 ios手机app开发打开新页面预加载页面关闭页面

创建子页面在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实现,完全使用原生滚动.具体做法则是:将目标页面分解为主页面和内容页面,主页面显示卡头卡尾区域,比如顶部导航.底部选项卡等:内容页面显示具体需要滚动的内容,然后在主页面中调用mui.init方法初始化内容页面. mui.init({ subpages:[{ url:your-subpage-url,/…

跨平台移动APP开发进阶(二)HTML5+、mui开发移动app教程

前端开发APP,从HBuilder开始~ 序通过 HTML5 开发移动App 时,会发现HTML5 很多能力不具备.为弥补HTML5 能力的不足,在W3C 中国的指导下成立了www.HTML5Plus.org组织,推出HTML5+规范. HTML5+扩展了JavaScript 对象plus,使得js 可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头.陀螺仪.文件系统等,业务能力如上传下载.二维码.地图.支付.语音输入.消息推送等. HBuilder 的手机原生能力调用分2 个层…

HBuilder开发App教程06-首页

实战前面几节基本是一些概念的普及, 正如前面提到的,本教程会以滴石作为范例进行解说, 有兴趣的能够先行下载体验一下.或者下载源代码研究下. 新建项目打开HBuilder,在项目管理器中右键--新建--移动app,或者直接ctrl+n,a, 见到例如以下界面.填入项目名称,选择mui项目. 新建完毕后.默认生成的文件夹例如以下.基本和前端开发的文件夹结构类似. 连接手机本教程临时以android为例,最后会另外解说ios手机的开发,大同小异. 用数据线连接android手机,将手机中的设置-…

HBuilder开发App教程05-滴石和websql

滴石介绍滴石是用HBuilder开发的一款计划类app. 用到HBuilder,mui.nativejs以及h5一些特性. 预期眼下仅仅开发到todolist级别, 以后计划做成日计划,月计划,年计划等计划类app. 网址官网:http://uikoo9.com/dishi 开源:http://git.oschina.net/uikoo9/uikoo9-dishi 教程以后HBuilder开发app以滴石为例,做一个简单的app. 功能介绍列表页列出要完毕的事项,详细功能: 1.左…

学习html5 app项目开发

这周因为部门接了个小的html5 app case,所以从事android开发的我就接下了这个项目.与其说是项目需要,其实更大部分是我自己想要做html5 app,因为我对这个全新的平台已经好奇很久了.蠢蠢欲动很久了,只不过之前没有碰到项目练手而已. 好了,让我们开始这篇博文的主要内容吧.说到html5相信大家都不陌生了,的确这个概念已经在国内火了一段时间,但是大家对于html5具体能够干什么,到底在什么地方我应该使用html5呢?然后html5相较之前的版本又多了什么呢?且听我慢慢到来吧,首先…