H5+开发APP实战详解.pptVIP

更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * APP优化 APP优化主要参考： 二、个人经验： 1、页面布局：使用语义话标签，css,js命名规范并且与html分离，css单元，js模 块化，组件可组合，组件的JS可依赖其他JS模块，CSS可依赖其他CSS单元，使用rem 长度单位实现适配不同分辨率机型； 2、封装js代码，减少代码冗余，实现可复用，按需加载； 3、能使用字体图标就使用字体图标； 尽量简化代码，使用原生JS，不要引入过多插件 封装提取公用方法，减少重复代码 能用css3、h5实现的效果不要使用JS去写 延迟错开多个操作 个人开发经验 先写再查再问，多看看案例，系统性的过遍文档，逛逛问答少踩坑，少抱怨，尝试各种解决方案 小机密透露：Dcloud开发的APP因为是web的，所以可以下载其apk重命名为rar查看全部前端代码，或者你也可以新建个项目，将其前端代码copy进去运行调试。（压缩混淆APP除外，结构在打开的第一个文件夹的第一个文件夹的） 培训目标 Dcloud开发APP只需要了解其原理，调用封装的原生API就能轻松做出想要的APP，重点在于逻辑处理，代码的优化，性能优化。 每个前端都能轻松使用Dcloud开发APP。 谢谢参与 特别鸣谢：技术总监(胡洪祥)，总监助理(宋学彬)，前端工程师(陈明睿，王宇飞，杨勇) 安卓工程师(肖强，李华龙，代李，唐志强，周广发)，后端工程师(杨波，舒东，许斌，周玉磊) 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * 更多免费教程和模板请访问： * APP开发 实战详解 刘钦财 Dcloud 概要 WEB APP 案例分析 个人经验分享 APP优化 培训目标 WEB APP 框架、市场及应用场景 html5最主要的优势： 1、一套HTML5 APP 即可同时适用安卓及IOS平台，甚至WP平台，适配性和统一体验较好。 2、版本服务器端更新，用户永远看到的都是最新的APP端信息。 3、手机客户端及存储数据较少，节约用户手机空间 4、技术难度较低，开发工作量小，开发成本低。 **局限性：** 用户体验大幅落后于原生APP，操作的流畅度，程序的执行效率，与原生APP都有较大差距；HTML5 APP 受网速的影响较大，在网络情况较差的情况下，HTML5 APP 往往连打开都困难，而原生程序，基本都能顺利打开运行（只是速度较慢）。 框架： PhoneGap ?官网：/? Ionic?官网：/? Hbuilder 官网：http://dcloud.io/? appcan 官网：/? Wex5 官网：/? ApiCloud 官网：/ React Native 官网：/ ? Hbuilder IDE Dcloud开发APP配套编辑器，实时真机调试、在线打包，代码相关语法快速提示、APP相关参数配置等功能，你值得拥有。 Hbuilder APP Hbuilder APP涉及常用功能： 第三方登录及分享、微信支付宝支付、拍照相册、上拉加载下拉刷新、图片延迟加载、数据请求与提交、页面间数据传递及刷新、图片预览、图片压缩，地理位置，交互动画，消息推送，本地存储等。 主要操作： ajax请求数据，拼接成html展示到页面； 页面交互ajax提交数据到服务器； js处理用户交互展示对应数据； 创建应用 使用Hbuilder IDE创建新项目： 文件 新建 APP项目 包含mui UI 的项目 应用基本配置 打开项目根目录下manifest.json应用配置文件 此处appid仅为Dcloud A