HTML 5 H5 APP 开发 WeX5初级教程

【实例简介】
HTML 5 H5 APP 开发 WeX5初级教程
第章初识 随着智能手机的普及,用户对于的需求更加多样化,从看新闻、看视频到购物、缴 费都通过实现。目前有两和形式,一种是原生应用( ),只有体验好、开 发成本高、维护更新复杂、不能跨平台等特点。另一种是混合模式应用( ),具有 体验一般、开发成本低、维护更新简单、能跨平台等特点。 随着 (以下简称)发布,进入了新的时代。由于提高了可用性,并且 改进了用户体验,使得基于开发的混合模式应用已经可以媲美原生的效果,使得 有跨平台、易开发、可搜索、无需下载升级等优点。毫无疑问,将成为未来年内,移 动互联网领域的主宰者。移动端的大量需求使得生态发展更加迅猛,很多及时通讯和信息 传播都是承载的,不过呈现出米的是外壳而已。截至 有的将全部或 部分基于。这意味着大部分的内容都将是以网页的形式呈现。典型的例了包括淘宝、 微信 是跨端移动开发框架,将的标签封裝成组件,实现可视化、组件化快速廾发。 实现一次开发,多端(、安卓和微信)运行。 通过思维导图(见图)对有一个初步的认识。 开源 宋手机 烁色,免安装 安卓手机 开发H5App HTML5 叔信 界面计蛋:所见即所得 WeX5 jQuery 使用技术 养画设计:拖放组件 Bootstrap Requires 生成Ap:使用导 开发工具 Cordova 创津文+;和用模版 一键云醫 CloudE 快速入门]:代正提示 图 思维导图 11WeX5简介 是一款开源免费的快速 开发工只前端采用 标准,使用 规范的 等技术;基于 )采用混合应用( )开发模式,可以轻松调用手机设备和硬件能力,如相机、地图、定位、指南针、通 话录、文件、语音、电池等等:支持多种类型的后端,包括 和等,同时也支 持云;提供一键部署,用于将开发的部署到云服务器 上 的基于 ,提供了一个完全可视化、组件化、拖拽式开发环境,完全所 见即所得;向导化和模板化等工具,快速生成常见应用场景界面;代码提示、真机调试,为 开发者提供最大方便。 开发及运行原理示意图如图所示。 Thin Nave wrapped Phone Ga Bndge Daye Aress vi gna can e- 可视化 s,sys啦 组件化 Webview 向导化 模板化 代码提示 真机调试 服务 服务 服务 图 开发及运行原理 安装及启动 分为 版本和版本,用于安装在 系统上和 系统上 版本可以生成安卓 版本可以生成安卓和 、安装 是绿色免安装的,解压目可直接使用。注意:不能解压到含中文、空格和特殊字符 的目录下,例如 是不可以的,因为包含空格。 、启动 安装后根目录下有几个批处理:运行“启动 数据库”,启动 内置的 数据库。运行“启动开发工只”,打开开发工只。第一次运行开发工只,会弹出“ 登永”对话框,成为 云用户,可以进行一键云部署。可以先关闭这个对话框,以后 再注册。 开发工具介绍 开发工只提供」欢迎,提供学习、交流 的入口。 开发工具(见图)包括菜单栏、工具栏、导航栏、透视图、编辑区和控制台。右上角 的导航栏默认有 和“数据厍”,单击 切换到“模型资源”透视图,单击“数据库” 切换到“数据库视图”。在“模型资漁”中双击文件,可以在编辑区打开该文件。“控制台” 是 控制台, 启动时,运行出错时,注意看这里的输出信息。 STudio D: WeX5_5079\studio\droping studio app 2\ xdvert'wclcome welcOme Eclipse 菜单栏 )(浏N)搜东[A!项P)mmet运于[R))Wex5文情B本AppA帮 快速切问 王要Sud据岸 候型资凉20里双页N ⊥具栏 新手入门轻轻松松步入WeX5J发之旅 在这甲影移体了解到MX5声用快运开发柜架的能力、特点和开发原,并可随视教程体 编辑区 透视图 部FAQ 新手看 文档中心 常见问题 要提间 副日+ 控制台 木录 开发工具界面 和“数据库”是两个常用的透视图。切换到 透视图,左边显示“模型资源”, 用于进行开发:切换到“数据库”透视图,左边显示“数据库视图”用于操作数据库。表 列出了两个透视图分别提供的功能。表列出了在开发过程中一些常用的功能 表透视图介绍 透视图 说明 模型资源 有三个目录 和 是后端服务模型,是前 端页面模型 是生成的 数据库视图 通过数据源置,即可在数据库视图中看到连接的数据库,可以新 建表,编辑数据 表常用功能介绍 常用功能 说明 新建应用 选择“模型资源”里面的目录,右击,在弹出的快捷菜单中选 择“新建”→“应用”命令,打开“新建应用”对话框 创建木地 选择“模型资源”里面的 目录,右击,在弹出的快捷菜咩中 选择“新建 创建本地 命令,打开“创建本地 对 话框 启动 单击工具烂上的“启动 ”图标 数据源配置 选择“窗口”丶“首选项”菜单命令,打开“首选项”对话框,选 择 配置”,单击“数据源” 切换到数捷库视图 单击导航栏中的“数据库视图” 打开文档 选择“文档”→“文档”菜单命令,在编辑区会打开“ 文档” 12实战案例:欢乐捕鱼App 【学习目标】 通过学习欢乐捕鱼的制作,掌握用生成运行的方法。 【案例说明】 如果您有一个使用开发的网页应用或游戏,期望快速生成一个跨端的,使用 就能实现。接下来,我们将以“欢乐捕鱼 的制作过程为例,带您体验 的魅力。 案例运行效果如图 中国移动4G 谷常:33%1041 ⊙9 图欢乐捕鱼运行效果 【在线资源】 木案例提供版欢乐捕鱼游戏作为制作欢乐捕鱼的素材;提供廾发过程视频讲解 使用 将 生成为木地的过程。 捕鱼游戏素材 开发欢乐捕鱼 准备游戏 在线资源里面提供∫一个捕鱼游戏,在浏览器中运行游戏中的 就可以运行。 将游戏目录复制到 里,用浏览器先运行一下,看看效果。 复制游戏 将在线资源中的捕鱼游戏下的目录复制到目录下 启动 、运行游戏 选择 文件,石击,在弹出的快捷菜单中选择“用浏览器运行”命 令,即可在浏览器里面看到游戏画面。 生成 基于开发的“欢乐捕鱼”游戏准备好后,接下来我们将使用 开发工具,将网页 版的“欢乐捕鱼”制作成,步骤如下: 选择“模型资源”里面的 目汞,石击,在弹出的快捷菜单中选择“创建本地 命令,打开“创建本地”对话框。选择“模式”,输入“应用名”,单击“下一步” 按钮。在“设置服务地址和选择资源”对话框(见图)的“首页”中输入 在“选择需要发布的资源”里面选中目录,单击“下步”按钮。 创建本地App 设置服务地和选择U资源 e子地址 例:http:/ipport b径 例:M5,可为空,表示使用根图径。 GeRver模式推荐用M5NU≌ fsh/default html 择需要种瓷源: fish b四fsh 口 portal chiral 遭用名 上一 图设置服务地址和选择资源 在“配置应用信息”对话框(见图)的“版本号”中输入,在“应用包名”中输入 ,单击 步”按钮 创建本地Ap 配置应用信息 应用包名 orIL Jus.ep. I 应用述术 例:这是一个用于演示W5特告的应用 墙强型浏览器(基于 Crosswalk,And0平台有效)。使用更快速和更强的浏览器引孳,但生成的本地pp文件 会更大〔多16MB),议 Androl44以下版本的设备使 一打包的资源进行加密。加密后应用运行将略多点资源读时问,但可以增强应用的安全性,使反译无去直接 买取资源 立用名 取消 图配置应用信息 在“配置开发者信息和证书”对话框(见图)中选中 证书,输入证书密码 单击 步”按钮 创建本地App 配置开发者信忘和证书 直后市 例:北市 城市/区 公司 例:北起步科技有限公言或张 开发者主页 例:httpmww.justepcom 开发音Emai 例:x5@ ustep.ccm 了Anod证书:17456 新生成正书文件anro. Keystore 设置0S开发证码 选择 os.developer-p12选择 oS developer. mobileprovis on 1s布证书:请温胃3发布证+码 Flos dIstrbution- p12 12-I0s distribut: on. moDlleprovISIOl 立用名 上-下一些 图配置开发者信息和证书 在“设置屏幕选项”对话框(见图)中的“屏幕方向”选择横向,单击“下步”按 钮。在“选择打包的木地插件”和“配置更新信息”对话框中不需要任何操作,单击“ 步”按钮。 创建本地Ap 设置幕选项 应用图标(95X9E 击图片二传一个对应分辨率的图片到本地App目录 上传的图片公根卡ios和 android系统的才要求缩放为对应分辨率。 不运择,新建后在 oIattcrms对目录放。图标和考远里 纵向欢迎(720M1280) 横向欢迎度片(1280720) 选择纵向图片 选择橫向图片 横向 立用名 取消 图 设置屏幕选项 在“木地应用信息”对话框(见图)中检查前面输入的应用信息,选中“完成后启动 生成向导”,单击“完成”按钮,再单击“卜一步”按钮。 创建本地App 本地应用信息 号 应中包宮 com. Justep. fish 服务地址 /fis hi defer lt. html 包山源 fish Anod使用增强型浏览器□资源密源码横式 完成后启动Ap生成向导 提示:可参考日景下的明tt了解日录结构和查看常见问题 立用名 图本地应用信息 在“选择本地应用平台”对话框(见图)中选中安卓图标,选中“本地应用包含 资源”,选中“重新编译使用到的资源”,单击“完成”按钮。 【实例截图】
【核心代码】