zoukankan      html  css  js  c++  java
  • 项目实战

    为何要使用混合式开发?

    要说为什么使用Hybrid App 【混合式开发】,就要先了解什么是Native App【原生程序】, Web App【网站程序】。

    Native App
    是专门针对某一类移动设备而生的,它们都是被直接安装到设备里,而用户一般也是通过应用商店来获取应用 。 如安装在 iOS 和 Android 设备上的客户端。

    Native App
    体验效果很好,但是有一个缺点,如果新增或更改某个功能的话,需要频繁的升级,导致版本维护很难。

    Web App
    一般说来,移动Web App都是都是需要用到网络的,它们利用设备上的浏览器(比如iPhone的Safari)来运行,而且它们不需要在设备上下载后安装。

    Web App
    如果升级一个功能,只需要后台更新即可,不需要用户端做什么事情,但是它的缺点是权限很低,不能操作用户端设备的信息。

    Hybrid App
    是指介于web-app、native-app这两者之间的app,它虽然看上去是一个Native App,但只有一个WebView,里面访问的是一个Web App,如掌上百度和淘宝客户端Android版,走的也是Hybrid App的路线,不过掌上百度里面封装的不是WebView,而是自己的浏览内核,所以体验上更像客户端,更高效。

    结论
    “Hybrid App同时使用网页语言与程序语言开发,通过应用商店区分移动操作系统分发,用户需要安装使用的移动应用”。总体特性更接近Native App但是和Web App区别较大。只是因为同时使用了网页语言编码,所以开发成本和难度比Native App要小很多。因此说,Hybrid App兼具了Native App的所有优势,也兼具了Web App使用HTML5跨平台开发低成本的优势。

    项目开发

    开发中用到的关键技术

    AngularJS:js框架,用于开发网站应用,详细的请看之前写过的文章。

    PhoneGap:用于js和客户端交互,详细原理请看 phonegap 框架详解

    调试流程及工具(安卓系统)

    1. 初步调试,适用于功能开发阶段,调试工具:Chrome浏览器
    2. 查看AngularJS数据,工具:Chrome插件 -> AngularJS Batarang
    3. 集成到客户端中调试,使用Chrome自带功能,chrome://inspect ,此功能需要FQ,且安卓系统版本大于4.4
    4. 低版本兼容性问题,使用weiner库

    问题解答

    问题: 在chrome://inspect中不显示我连接的手机
    原因: 检查一下,手机是否连接成功,是否已经安装了adb调试工具,是否开启开发者模式,启用usb调试功能 。具体调试操作可以看 移动端Web开发调试之Chrome远程调试(Remote Debugging)

    问题: 怎么开启usb调试功能
    原因: 原版手机系统请查看 如何打开USB调试模式,如果是华为或小米 需要先点击版本号,开启“开发者模式”,每个品牌的手机,开发者模式选项的位置都不相同,如果找不到,请自行百度【百度关键字:小米 开启usb调试模式】

    问题: 使用chrome://inspect点击inspect按钮,页面出现空白
    原因: 第一次使用此功能时,谷歌浏览器会向服务器发送请求,获取相应数据,由于请求被墙了,导致数据加载不了,导致空白页面,怎么解决,你懂得。

    问题: 使用chrome://inspect有时调试不了
    原因: 只有debug版本才能调试,看你打的包是不是release版本的apk。

    问题: js添加了PhoneGap之后,和客户端交互的功能没有响应
    原因: 一、确认代码确实走到调用客户端的代码那里并且执行了相关代码,二、看一下是否是js写的有问题,如本地客户端的函数名和js调用的函数名不同,三、是否是客户端的权限没有配置

    问题: 集成了PhoneGap后,如果程序立即执行,客户端交互程序有时会直接报错
    原因: 这是因为你在PhoneGap还没初始化好的时候就调用PhoneGap插件了,解决此问题需要,把 <html ng-app="mainApp"> 改为 <html id="mainApp" > 并且需要在js修改为手动初始化AngularJS

    ///// deviceready之后在开始执行angular
    document.addEventListener("deviceready", onDeviceReady, false);
    
    function onDeviceReady() {
        var domElement = document.getElementById('mainApp');
        angular.bootstrap(domElement, ["mainApp"]);
    }
    

    问题: 修改成 deviceready 之后,在页面中就调试不了了,怎么办
    原因: 在网页中调试时,你把ng-app="mainApp"加上就可以了

    问题: 程序员哥哥,再问最后一个问题,你为什么那么帅,那么有气质呢
    原因: 很多人也都说我漂亮的不像实力派,我只想说:当才华与美貌并存的时候,我希望你看重的是才华!

    如果你的视野只局限于技术,你也许是一个好的开发者,但也仅仅是一个好的开发者

  • 相关阅读:
    react 实现路由按需加载
    vue-router 与 react-router 设计理念上的区别
    create-react-app 知识点
    ElementUI(vue UI库)、iView(vue UI库)、ant design(react UI库)中组件的区别
    create-react-app 搭建的项目中,让 antd 通过侧边栏导航 Menu 的 Menu.Item 控制 Content 部分的变化
    react-router v4.0 知识点
    prop-types:该第三方库对组件的props中的变量进行类型检测
    002_mtr_a network diagnostic tool
    006_netstat中state详解
    003_监测域名证书过期时间
  • 原文地址:https://www.cnblogs.com/tgwang/p/4846344.html
Copyright © 2011-2022 走看看