首页 > 代码库 > (一)半小时开发一个APP
(一)半小时开发一个APP
【前言】
HPP是什么?
HybirdApp的简称,详细介绍参见:HPP——让所有中小企业拥有自己的APP
说白了就是用html+css+js开发app,包括ios和android版本。
HBuilder
具体实现方式比较多,自行百度吧,就不一一叙述了,
之前比较推荐的HBuilder+mui+nativejs那套,相关资料:
如何快速开发出一个高质量的APP——创业谈
HBuilder开发App入门-滴石
Hbuilder开发App实战1-识岁
http://uikoo9.com/dishi
http://uikoo9.com/shisui
Framework7
HBuilder优点有很多,参见上面的几篇文章,
缺点也有些,比较大的就是ui,和Framework7一比,完全是天壤之别,
从几年前的初识,到前段时间Framework7推出android版本的惊艳,
感觉总有人在耳语,这么好的东西不做app,可惜了,
参考:赞,framework7~
结
说了半天,其实就是想说Framework7效果很好,但这个东西配合HBuilder玩不转,配合phonegap效果很好。
【前期准备】
1.安装phonegap
npm i -g phonegap@latest
安装过程参见官网:http://docs.phonegap.com/getting-started/1-install-phonegap/cli/不要害怕,只是几行代码,前提是有nodejs和npm,这个就自己百度吧。
2.下载phonegap developer app
iphone直接在app store搜索就行,android的话需要去google play,如果不能FQ的同学可以下载这个
3.git clone
git地址:https://github.com/uikoo9/phonegap-framework7.git
4.目录介绍
demo1为android版本,demo2为ios版本
【android版】
1.cd到demo1/www下
2.phonegap serve
Framework7文件比较多,输入命令后耐心等会。
3.打开phonegap developer app
找一个安装了phonegap developer app的android手机,而且要保证可以访问到手机网络
打开app,然后输入上面serve地址,点击connect
4.效果
【ios版】
和android版本相似,不同的是进入demo2,并且使用iphone手机查看效果,如下:
【phonegap-serve】
phonegap serve 命令会在本机启动一个小型的web serve服务,
做前端的应该比较熟悉,和browser-sync类似,
当手机访问本机serve的时候,会将本机www目录下的文件传输到手机上,
进而基于phonegap developer app打包成一个app,方便调试,
这种真机调试方式也是比较好的,
1.不需要数据线,只需要手机上安装app
2.启动的serve可以监听文件修改,当有文件修改的时候立即更新
【Framework7单页面应用】
文件结构
从github上下载framework7之后,可以看到文件结构如下:
简单的介绍下:
1.dist:放构建后的资源文件,一些js,css之类的
2.kitchen-sink-ios:ios风格
3.kitchen-sink-material:android风格
进入kitchen-sink-ios文件夹下可以看到结构如下:
打开各个html,发现只有index是有完整结构的,也就是有html,head,body等,
而其他的html文件都只是一些html片段,例如popover.html文件:
SPA应用
前端发展迅猛,经常会听到一些名次,spa,mvvm,mvc之类的,
如果你的前端还是停留在切图做页面的层次,那么已经out的不行了,
所谓spa,就是单页面应用,
所谓单页面应用就是,进入的时候只加载一个主页面,然后其他你看到的跳转页面,都是以div的形式展现,
拿framework7来说,就是通过ajax加载不同的html文件中的html片段然后展现,
单页面的最大好处是:加载快,页面之间跳转可以做出各种效果,普通的href跳转是无能为力的。
前端mvc
可能有经验的人员已经想到了,你加载的url都是index.html,然后这个url不变化,只是加载各种div页面,
那么问题来了?当用户要直接访问about.html的时候怎么做,因为你只有一个index.html的url,
spa一般是通过#分隔外加路由实现的,例如访问about.html的时候url为index.html#about之类的,
所以说一个完善spa框架,路由部分是必不可少的,
或者说前几年的spa大火,激发了一波前端mvc框架,例如backbone,angularjs等,
mvvm
如果仔细想想,那是不是又会有一个问题,spa的主html+其他div的模式带来一个问题,
普通的href跳转的方式,服务器返回的是已经渲染号的html+data的一个整体,例如jsp,
但是spa的模式,通过ajax请求获取的是一段html代码片段,然后再次ajax请求data,
那么你到手的是html和data,并不是html+data的整体,
这个时候将data渲染到html最普通的方式就是js或者jq一个一个设置,想想都头大,
解决这个问题的就是js template,也就是js模版,例如juicer这个模版效果:
大大加快了data整合html的过程。
js template是一个data到html的单向数据绑定,而mvvm就是双向数据绑定。
结
1.spa
现在前端的迅猛发展,spa功不可没,虽然现在spa相对不那么火了。
2.phonegap过时?
有人和我说phonegap他12年就听说了,不是早过时了么,
phonegap火的时候,对应的ui最佳搭档是jquery ui,体积大效果差,外加硬件跟不上,
这些才是phonegap被诟病的缘由,而并不是phonegap本身不好,
phonegap,hbuilder这类工具只是一个打包工具,将你的html+css+js打包正app,只是做了这个事情,
只要hybirdapp还存在一天,phonegap做为打包工具就不会过时,
而且目前手机硬件上来了,phonegap+spa的方式应该也是一种不错的体验。
转载:http://uikoo9.com/book/chapterDetail/105
(一)半小时开发一个APP