使用Ionic构建Hybrid App初体验

原生应用做多了,刚接触混合开发时多有不适,ionic是混合开发模式的集大成框架,基于phonegap、angularjs、cordova的H5前端框架。


1、环境搭建

参照众多网上的帖子都能顺利搭建,网上提到的出错,比方在安装sudo npm install -g corvoda ionic时出错,可以调整npm 的源到淘宝提供的源上,在终端执行命令:$ npm set registry https://registry.npm.taobao.org,我在ionic start myApp tabs 时一直downloading也是通过修改这个源解决的。


2、Android应用工程的生成和编译,ionic提供了下面的几个命令 完成:

ionic start myapp_tabs  tabs
cd myapp_tabs

ionic platform add android
ionic build android
ionic run android

然后在myapp_tabs\platforms\android\build\outputs\apk 目录下生成一个apk,下载运行即可。


根据网上给出的学习路径,考虑使用ionic进行跨平台APP的开发,javascript是基础,然后是angularjs框架,最基本的使用和路由等知识;最后是corvoda的接口使用原生的功能接口,那么后续主要的精力是在javascript和angularjs知识的学习上面。


开始有了点感觉,但有下面的疑惑,或许现在的理解是对的:如果使用纯web语言开发,是不是自动生成的Android工程就不需要做调整?但比方类似闪屏页、增加权限或者其他的界面,是不是需要调整这个Android工程?我想这块还是需要做开发的。

 

3、附带补充下js编辑器的选择,有经验同事推荐是HBuilder,体验了下,感觉还是挺方便的。


4、Javascript推荐一本《JavaScript语言精粹》的书,好多年前做web项目的时候看过,忘的差不多了,但还模糊记得这本书写的深入浅出,很不错。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
1 简介 1、Native APP(原生) 2、Hybrid APP(混合) 3、React Native Hybrid App按网页语言与程序语言的混合,通常分为三种类型:多View混合型,单View混合型,Web主体型。 2 技术 2.1 技术选型 Ionic 2.1.1 Ionic介绍 Ionic是一款基于Angular、Cordova的强大的HTML5移动应用开发框架,可以快速创建一个跨平台的移动医用。可以快速开发移动APP、移动WEB页面、微信公众平台应用,混合APP WEB页面。 2.1.2 Ionic和cordova、Angular关系 Ionic = cordova + Angular + ionic Css Ionic 是完全基于谷歌的 Angular 框架,在 Angular 基础上面做了一些封装,让我们可以更快速和容易的开发移动的项目。Ionic 调用原生的功能是基于 Cordova,Cordova 提供了使用JavaScript 调用 Native 功能,ionic 自己也封装了一套漂亮的 CSS UI 库。 2.1.3 开发工具 Visual Studio Code 2.1.4 管理工具 Git 2.2 环境搭建 2.2.1 概述 2.2.2 JDK 2.2.2.1 版本 jdk1.8 2.2.2.2 配置 JAVA_HOME PATH CLASSPATH 2.2.3 Apache ant 2.2.3.1 版本 1.9.12 2.2.3.2 解压 2.2.3.3 配置 ANT_HOME: D:\android\apache-ant-1.10.4 Path: %ANT_HOME%\bin 2.2.3.4 查看安装版本 ant –v 2.2.4 android SDK 2.2.4.1 版本 r24.4.1 2.2.4.2 配置 ANDROID_SDK_HOME: D:\Android\android-sdk-windows Path:%ANDROID_SDK_HOME%\platform-tools;%ANDROID_SDK_HOME%\tools 2.2.4.3 SDK 通过SDK Manager下载相关的版本 2.2.4.4 查看信息 android -h 2.2.5 node.js 2.2.5.1 版本 8.11.3 2.2.5.2 安装 2.2.5.3 查看版本 node –v npm -v 2.2.6 npm/cnpm 2.2.6.1 安装npm nodejs已经集成了npm 2.2.6.2 安装 cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 2.2.7 cordova 2.2.7.1 版本 8.0.0 2.2.7.2 安装 npm install -g cordova 可以使用cnpm代替npm cnpm install -g cordova ionic 2.2.7.3 查看版本 cordova -v 2.2.8 ionic 2.2.8.1 版本 3.20.0 2.2.8.2 安装 npm install –g ionic 可以使用cnpm代替npm cnpm install -g cordova ionic 2.2.8.3 查看版本 ionic –v 2.2.8.4 查看信息 ionic info 3 项目 3.1 创建 3.1.1 新建 3.1.2 启动 3.1.3 打包 3.1.3.1 添加 3.1.3.2 生产release版apk(签名后安装) 3.1.3.3 生成debug版apk 3.1.4 签名 3.1.4.1 生成签名文件 keytool -genkey -v -keystore testapp.keystore -alias testapp.keystore -keyalg RSA -validity 20000 3.1.4.2 apk签名 jarsigner -verbose -keystore testapp.keystore -signedjar app-release-signed.apk app-release-unsigned.apk testapp.keystore 3.1.5 安装 安卓手机安装使用
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值