本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、毕业设计辅导
 当前位置:课程中心 >> 课程介绍
立即购买 移动端webApp开发视频教程
版权:夜鹰教程网 发布日期:2018/4/18 11:49: 品质:高清 格式:swf 价格:¥198.00
如今很多企业的应用都app化,从而诞生了很多移动前端的框架,MUI就是这些框架中做得比较好的之一。本套教程主要讲解了用HBuilder 在MUI框架下开发移动APP的过程,希望通过这样一个简单的APP开发,让大家学会MUI框架的使用,从而进一步认识webapp,感受移动端开发的乐趣和价值 。 教程用到的技术主要包括:前端的MUI框架,九宫格导航,下拉刷新,上拉加载,打开新的webView,页面之间

        

webapp开发视频教程


webapp开发视频教程


webapp开发视频教程


webapp开发视频教程

如今很多企业的应用都app化,从而诞生了很多移动前端的框架,MUI就是这些框架中做得比较好的之一。本套教程主要讲解了用HBuilder 在MUI框架下开发移动APP的过程,希望通过这样一个简单的APP开发,让大家学会MUI框架的使用,从而进一步认识webapp,感受移动端开发的乐趣和价值 。 教程用到的技术主要包括:前端的MUI框架,九宫格导航,下拉刷新,上拉加载,打开新的webView,页面之间参数传递,后端的webApi、IIS配置、让局域网的其他设备可以访问IIS EXPRESS下的站点,移动端和服务端数据交换,dataTable对象转json格式,HTML格式过滤。webAPI参数接收,HttpRequester插件调试,真机调试、云端打包等技术。


webapp开发视频教程


webapp开发视频教程


webapp开发视频教程


1、HBuilder工具介绍
2、连接设备
3、真机运行第一个页面
4、MUI框架引用
5、APP功能构思
6、构建项目文件
7、MUI组件
8、真机测试1
9、导航点击打开新页面
10、addEventListener
11、openWindow
12、下拉刷新
13、加载子页面
14、上拉加载更多
15、下拉刷新结束
16、真机测试2
17、配置上拉加载参数
18、加载模拟数据
19、webApi
20、新建控制器
21、连接数据库
22、dataTable转Json
23、发布webapi
24、IIS配置
25、HttpRequester
26、MUI的ajax请求
27、处理返回结果
28、真机测试3
29、下拉清空内容再加载
30、真机测试4
31、上拉加载请求数据
32、plusReady
33、结束上拉加载
34、真机测试5
35、下拉重置参数
36、批量绑定事件
37、打开新页面
38、页面之间传递参数
39、接收参数
40、监听自定义事件
41、根据id获取详细
42、重新发布
43、请求数据
44、真机测试6
45、加载内容
46、过滤html
47、真机测试7
48、局域网设备直接访问webapi
49、退出应用程序
50、真机测试8
51、云端打包
52、测试打包后的App
53、项目总结



特别备注:安卓和苹果的开发过程是一样的,也是同一套程序,但是发布后的程序苹果上面还不能安装。如果想要在苹果手机上面安装,需要每年给苹果公司支付99美元的费用,而且还需要申请苹果appstore的证书,本套教程重点在讲解程序开发,所以发布后苹果ipa文件不能再没有越狱的苹果手机上面安装。如果需要在非越狱苹果手机上面安装,可以自己申请苹果证书,发布的时候用正式的证书即可。



扩展阅读:


HTML5自出现以来,几经风雨,虽看似很有前途,但实际使用问题太多,DCloud为此踩了无数坑。但我们从未放弃,我们加入了W3C,发起了 HTML5中国产业联盟,推出了HBuilder、HTML5plus runtime、mui框架等产品,直到我们终于可以使用HTML5开发出原生体验的App,并且把这些技术公开给开发者。

HTML5过去被称为有“性工能”障碍,即性能不如原生,工具不如原生、功能不如原生。

   


我们先说工具,然后说能力,再说性能。

工具 - HBuilder

起因

HTML最开始其实不是一个编程语言,确实用不着什么ide。
但是发展到现在,7w多个语法,js越来越庞大,真开发一个达到原生水准的App,不是用以前的文本编辑器能搞定的。
目前竟然没有一个开发工具能把7w多HTML5语法提示齐全,这不科学,在原生开发里这是不可想象的,xcode之于iOS,eclipse之于Android,vs之于winphone,在语法提示、转到定义、重构、调试等方面都非常高效。
作为同时熟悉原生和HTML5开发的我们,我们在开发HTML5时明显感受到效率低下。

强大的语法提示

我们花费了很大心血建成了最全的HTML5及浏览器扩展前缀语法库,我们也开发了强大的语法解析引擎,然后推出了开发工具HBuilder,使得开发者可以准确、高效的编写HTML5代码。
过去人们怀疑,中国人能做开发工具吗?AST语法树是很难掌握的,尤其是js这种动态语言。现在不用怀疑了,HBuilder的语法提示比很多国外IDE还要好,而且还全免费。

最快的开发工具

由于我们的极客特质,HBuilder同时被我们打造成了最快的前端开发工具,代码输入法的创新、代码块的优化、emmet的集成、快捷键语法设计、无鼠标操作。。。这些可能低端程序员不感兴趣,但我们乐于其中。HBuilder有句口号:为极客、为懒人、为你。

环保健康的主题设计

由于我们天天面对屏幕眼睛很受伤,所以设计了绿柔主题以保护开发者的视力健康。

App开发及部署

当 然移动App开发也是HBuilder的优势,Run in device真机调试、打包发行这些功能并非普通的HTML4开发工具会涉及的。我们认为,如果只是做个网站,HTML4就够了,搞HTML5而不做 App,太糟蹋这个技术了。以及云打包还能使得没有mac电脑的程序员可以开发iOS应用。

能力 - HTML5plus Runtime

说完性工能里的工具,再说说能力。
HTML5plus Runtime,简称5+ Runtime,是运行于手机端的强化web引擎,除了支持标准HTML5外,还支持更多扩展的js api,使得js的能力不输于原生。5+ Runtime内置于HBuilder,在真机运行、打包时自动挂载。
业内之前有phonegap/Cordova方案,但是他们自带js api太少了,扩展api需要用原生语言开发,更致命的是这类方案的性能不足。

5+ Runtime分3个层次解决了HTML5与原生的能力差距。

常用的API – HTML5plus

封装成跨平台的HTML5plus规范,并将规范公开于www.HTML5plus.org,不做厂商私有API。
包括二维码、摇一摇、语音输入、地图、支付、分享、文件系统、通讯录等常用API,可以方便简单的编写,并且可跨平台。

其他原生API – Native.js

原生API在iOS和Android上各自有40多万,有些API并不常用,而且不具有跨平台特性,比如ios的game center api。太多的API封装到HTML5plus里,会过多增加runtime的体积,但若有需求要使用这些api又很麻烦。
我们有一项突破性的技术来解决上述烦恼—Native.js,一种把40w原生API映射为JS API的技术。
如果说node.js把js的战火烧到了服务器端,那么Native.js把js战火烧到了原生应用战场。但我们可以使用js直接调原生API,语法是js语法,API命名是原生命名。
比如var obj = plus.android.import( "android.os.Bundle" ); 然后obj.xxx,这个xxx属性就完全是原生对象的属性命名。
对于JSer,他一下就有40w API可以用,瞬间感觉无所不能:)
Native.js的教程详见:http://ask.dcloud.net.cn/article/88

更多原生SDK插件引入 – 5+ Runtime插件

假使有一些原生的三方SDK想引入到5+ Runtime,比如身份证扫描SDK,可以通过5+ Runtime的插件机制进行扩展。或者5+ Runtime预置的地图是百度地图,开发者想换成高德地图,也是类似的做法。
以及我们也支持5+ SDK,把5+ runtime作为一个SDK放入到其他原生App中,用5+ SDK替代webview可以得到更强大的功能和性能。
iOS插件开发教程详见:http://ask.dcloud.net.cn/article/67
Android插件开发教程详见:http://ask.dcloud.net.cn/article/66
通过HTML5plus规范、Native.js技术以及原生插件,这3种机制使得5+ Runtime拥有完全不输于原生App的能力。

性能 - HTML5plus runtime和mui框架

性工能里最后的重头戏是性能。在低端Android手机上,过去的HTML5无法商用,切页白屏、转场卡顿、下拉刷新不流畅、侧滑菜单不流畅。。。众多问题逼迫开发者只能使用原生技术来做应用。
HTML5 App的性能低下,有webview自身的性能问题,也有前端框架的性能问题。

Webview性能问题:

Webview性能低主要体现在动画效果不流畅,之前举例的转场动画、下拉回弹动画、侧滑动画均是此类。别忘了我们有强大的HTML5plus,既然js和css的动画不行,我们就调用原生API换成原生动画。我们设计了很多原生动画,来解决之前的各种动画不流畅问题。
5+ Runtime还支持预载技术,以加快页面的加载速度,减少白屏和用户等待。事实上原生语言都可以自己开发预载,但HTML5标准API不足以完成此任务,我们提供单独的preload API。同时我们支持对内存占用的管理,协助开发者在低端手机上优化性能。

前端框架问题:

由 于HTML5的默认控件无法直视,我们只能用css把按钮、输入框修饰成原生样式,以及HTML5的控件比原生控件少很多,比如list、tab、 menu、waiting等常见控件,以往都要写很多div和css拼装。这引发了一个前端框架存在的市场。但目前的前端框架性能都非常低,在低端手机上 很难达到商用要求,更不用提pk原生效果。
Jquery mobile比较知名,但有3个硬伤:1. 体积高达500k;2. data-的写法虽然写起来简单,但在运行时需要js去解析HTML5标签并替换为新的dom结构,这是非常消耗手机资源和影响加载速度的;3. 样式风格自成一派,不是用户所熟悉的原生样式。
基于这种情况,DCloud推出了开源的mui框架(http://dcloudio.github.io/mui/), 它是目前最高性能和最接近原生体验的手机端框架。它的3个特点与Jquery mobile正好对应:1. 体积小,不到100k; 2. 直接使用class编写,性能远高于data-方式,又通过代码块的编写方式降低了开发者编码的复杂度,在HBuilder里敲m,会拉出一排控件 mList、mButton等,选一个回车,就会自动产生div和class; 3. mui的风格样式是最接近原生样式的,如下图。

   

总结

通过HBuilder、5+ Runtime、mui,我们很好的解决了HTML5的性工能障碍,做到了接近原生App的功能和体验,给开发者提供了更多便利。在iweb 2014大会上,DCloud CEO王安做了主题演讲,系统性的发布了克服HTML5性工能障碍的解决方案,大家可以访问视频(http://v.youku.com/v_show/id_XNzYyNzI3NDQw.html)。
在HTML5的问题得到解决后,这项技术的优势就可以大放异彩,给世界带来巨大的变化。有兴趣的朋友可以阅读这篇文章《HTML5定稿了,为什么原生App世界将被颠覆》
咳咳,此文与2015年补充一条。
《HTML5定稿一周年,你必须要重新认识HTML5了》

但光解决HTML5不如原生的地方,还不够好玩,我们要发挥HTML5的独有特色,让HTML5有超越原生的可能。
DCloud利用HTML5的动态性优势,推出了边用边下的流应用;利用HTML5的开放性优势,推出了分享直通车、扫码直通车、广告直通车、搜索直通车。具体参考DCloud流应用介绍
如今的流应用,不但解决了HTML5的性工能缺陷,还在发行推广上做到了超越原生的优势。
使用HTML5开发跨平台App不再是小公司为了省钱的过渡方案,而成为一线互联网公司的选择,360、大众点评等公司的流应用均已上线。


版权:夜鹰教程网 发布日期:2018/4/18 11:49: 品质:高清 格式:swf 价格:¥198.00
如今很多企业的应用都app化,从而诞生了很多移动前端的框架,MUI就是这些框架中做得比较好的之一。本套教程主要讲解了用HBuilder 在MUI框架下开发移动APP的过程,希望通过这样一个简单的APP开发,让大家学会MUI框架的使用,从而进一步认识webapp,感受移动端开发的乐趣和价值 。 教程用到的技术主要包括:前端的MUI框架,九宫格导航,下拉刷新,上拉加载,打开新的webView,页面之间

这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



复制链接 网友评论 收藏本文 关闭此页
上一条: 物联网视频教程:火焰预警系统视频…  下一条: c#实现数据采集实例视频教程
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
购买夜鹰教程网视频教程
  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  
  热点推荐
ajax 清除缓存的两种方法
js日历控件点击日期显示在文本框中…
HTML、JS与FLASH 之间的静态传值方…
主题:ajax请求JSP,为什么GET就是…
javascript 改变iframe(框架)的方…
javascript取鼠标当前坐标
推荐一款网页软键盘 很漂亮的哦
ajax session过期问题的几个解决方…
js文字间隔停顿向上滚动效果
ajax 服务器文本框自动填值
js技术技巧收藏(200例)---1
ajax 数据库中随机读取5条数据动态…
主题:这是否是个捷径?Ajax利用S…
揭开AJAX神秘的面纱(AJAX个人学习…
常用的JS后台导航菜单
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs夜鹰教程祝福大家新年快乐
  最近更新
C#修改注册表demo
一个获取内容中的图片地址的方法
ASP.NET 4.0尚未在 Web 服务器上注…
四大作用域:application,session…
ConfigurationManager不存在的解决…
vs2012_vs2013_vs2015没有Web Dep…
vs2015禁用解决方案中单击打开文件…
微软为Visual Studio 2015新增安卓…
C#如何实现搜索引擎网络爬虫程序
C#中正则表达式的用法
用C#抓取需要登录的页面数据
VS2015新功能
VS2015安装图解教程
vs2015新功能介绍
vs2015安装图解
  工具下载  需要远程协助? 

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
微信小程序 vue.js高级实例视频教程

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



关于我们 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接 |

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3