zoukankan      html  css  js  c++  java
  • 移动端混合开发----ionic

        目前移动端分为三大主流:纯原生、混合开发、web App,随着手机硬件的升级,公司们似乎偏好于web页面开发,而混合开发相对纯web App似乎更受大公司青睐,所谓混合开发俾人理解为,原生代码(iOS:OC,Android:java)+ web。OK搞清楚了公司需求的大方向,下面就要确定到底用什么框架来开发web页面,开发web页面,目前最火的也就是ionic 和 react native 了吧,这两者要怎么抉择呢?
    下面有他们的优劣的对比:

    IONIC是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。 提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程序。
    
    React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native,并将继续为 React Native 投资。
    
    native就是使用使用原生java objective-c 开发, 各玩各的,无法跨平台。
    
    优劣对比      
        ionic :      
        优势:         
            ios 和 android 基本上可以共用代码,纯web思维,开发速度快,简单方便,一次编码,到处运行,如果熟悉web开发,则开发难度较低。         
            文档很全,系统级支持封装较好,所有UI组件都是有html模拟,可以统一使用。          
            可实现在线更新 允许加载动态加载web js          
            文档多,开发者多,视频教程多 容易学习    遇到问题容易解决  技术成熟        
        劣势:         
            占用内存高一些(不过手机内存都大了不影响),不适合做游戏类型app,   web技术无法解决一切问题,对于比较耗性能的地方无法利用native的思维实现优势互补,如高体验的交互,动画等。      
        react-native :      
        优势:    
            1、虽然不能做到一处编码到处运行,但是基本上即使是两套代码,也是相同的jsx语法,使用js进行开发。用户体验,高于html,开发效率较高 2、flexbox 布局 据说比native的自适应布局更加简单高效         
            可实现在线更新 2015.7.28 AppStore审核政策调整:允许运行于JavascriptCore的动态加载代码         
            更贴近原生开发     
        劣势:    
            1、(引)对开发人员要求较高,不是懂点web技术就行的,当官方封装的控件、api无法满足需求时 就必然需要懂一些native的东西去扩展,扩展性仍然远远不如web,也远远不如直接写Native code。    
           2、(引)官方说得很隐晦:learn once, write anywhere。人家可没说run anywhere。事实上,从官方的api来看SliderIOS,SwitchIOS..等等这些控件,之后势必会出现SliderAndroid,SwitchAndroid...,也就是很可能针对不同的平台会需要写多套代码。            3、发展还不成熟,目前很多ui组件只有ios的实现,android的需要自己实现。         (引)从Native到Web,要做很多概念转换,势必造成双方都要妥协。比如web要用一套CSS的阉割版,Native通过css-layout拿到最终样式再转换成native原生的表达方式(比如iOS的ConstraintoriginCenter等属性),再比如动画。 另外,若Android和iOS都要做相同的封装,概念转换就更复杂 5、文档还不够完整 学习曲线偏高    4.文档少  学习起来困难          native :          优势:                最好的体验以及功能实现。                完善成熟的开发文档以及demo。          劣势:                android开发学习曲线较高。                各个平台分开开发 很难有iOS,android双平台高手。                开发成本高  开发周期长

    经过你多方考究:如果最终选择React Native 那么请君留步,专看其他技术文章。。。。

    如果是决定ionic开发,那么咱们就一起愉快的来往下玩耍,

    废话不多说,开始搞起。。。。再说一句废话:我使用的是Mac
    1、配置开发环境

    1> Ionic开发是依赖于Nodejs环境的,所以下载安装:http://nodejs.org/
    2> 安装成功后打开终端(PowerShell),输入命令node -v和npm -v有对应的版本号就代表成功了
    3> npm install -g cordova ionic   过程可能有点慢。。。
    4> ionic start MyIonic blank  通过终端创建一个空ionic项目,MyIonic为项目名称    
        ionic start MyIonic tabs 创建一个带tabs的项目
    如果项目里面部分模块需要用到ionic,最好先创建blank项目
    5> 因为创建的时候默认添加了iOS平台,如果要对Android平台支持,输入一下命令:  
    ionic platform add android  添加Android平台
    ionic platform add ios          添加iOS平台
    ionic platform list                 查看是否添加成功
    Installed platforms:   
        android 6.0.0   
        ios 4.1.1
    Available platforms:    
        amazon-fireos ~3.6.3 (deprecated)   
        blackberry10 ~3.8.0   
        browser ~4.1.0   
        firefoxos ~3.6.3   
        osx ~4.0.1   
        webos ~3.7.0
    注:输入命令过程中如果碰到:
    Error: EACCES: permission denied, open '/Users/XXXX/.config/configstore/bower-github.json'You don't have access to this file. 
    解决:命令行前加 sudo

    2、创建项目完成

    创建完成

    查看自己所创建项目文件:

    项目目录


    补充:config.xml 是ionic项目的一些配置文件,后期自定义插件时需要跟他打交道,这里就不多说了。。。

    插件文件夹:

    插件

    下面主要说下我们主要用到的www文件夹:

    www文件


    文件说明:
    css:存放html中控件的style样式:例如:width、 height、color、font-size
    img: 顾名思义存放ionic项目中用到的图片
    index.html ionic项目的主通道
    js: 存放js代码块
    lib: 存放ionic本身的库文件,当然你也可以添加一些其他库,比如一些cordova库
    templates: 自己手动创建的文件夹,存放一些html文件
    其他两个.json .js文件是一些配置文件,不用管,也不要动

    下面说下怎样将做 混合开发 以iOS为例,在原有原生的基础上,怎样将你的ionic代码放到你的项目中,将圈住的文件放到iOS项目中:

    iOS项目中必备文件

    我项目中的效果:

    实际项目中效果

    既然是混合,肯定避免不了web 与 原生的交互,相互之间的传值可以通过自定义插件,也可以通过桥接,个人对比下,写桥接比较好方便,自己摸打滚爬了两个月,感觉这里面的坑还是很多的。。。

    今天先到这里吧,有时间了会把我碰到坑的解决方法,给大家共享出来,避免你们再走同样的弯路,ionic网上的资料不太多,特别是针对混合开发的,有问题大家可以留言讨论,OK 下班了。。。

  • 相关阅读:
    Linux命令应用大词典-第11章 Shell编程
    Kubernetes 学习12 kubernetes 存储卷
    linux dd命令
    Kubernetes 学习11 kubernetes ingress及ingress controller
    Kubernetes 学习10 Service资源
    Kubernetes 学习9 Pod控制器
    Kubernetes 学习8 Pod控制器
    Kubernetes 学习7 Pod控制器应用进阶2
    Kubernetes 学习6 Pod控制器应用进阶
    Kubernetes 学习5 kubernetes资源清单定义入门
  • 原文地址:https://www.cnblogs.com/isItOk/p/6583026.html
Copyright © 2011-2022 走看看