混合手机app开发之Ionic篇

混合手机app开发之Ionic篇第一章

第一节：环境搭建

本次使用的是Ionic3，之前本想用最新的ionic5 使用ionic build后发现，我使用的X5内核不能正常浏览，使用ionic3没有任何问题。本次我不使用cordova来打包，这次我将要完成的任务是：

1、集成腾讯X5内核。

2、集成百度语音合成和百度语音识别。

3、集成腾讯闲聊能够语音与计算聊天。

4、实现扫一扫，能够识别二维码和条形码。

5、nfc读读取卡标签（Android串口开发）。

ionic就不多啰嗦了百度一下你就知道，首先搭建开发环境，有不明白的请自行百度。

1、下载node.js

百度搜索node.js官网，下载最新的node.js,傻瓜式安装即可，安装完成之后，使用命令（windows+R）CMD执行node -v和npm -v命令，返回版本号表示已安装成功。

2、安装Ionic

上面步骤成功之后执行npm install -g cordova ionic命令安装cordova和ionic，安装完执行ionic -v，返回版本号表示已安装成功。

3、安装vscode

百度搜索vscode下载傻瓜式安装即可。

第二节：创建项目

1、创建项目

我想在E盘的ionic文件夹下创建一个项目使用命令执行：e:，然后：cdionic，进入执行：ionic start 项目名称 --type=ionic-angular 我们创建一个带菜单的项目，选择第二项如下图。

创建之后可以使用ionic serve命令查看效果，使用ionic build 会生成www目录，然后我们www的目录下文件放到服务器上的IIS就可以使用手机访问。

2、创建页面（组件）

我使用命令创建about页面，会帮我们生成一下文件。

1.创建命令：ionic g page 页面名称。

2. app.module.ts 引入声明组件。需要declarations和entryComponents中引入组件

3.如果跳转，在跳转的ts中引入组件。

本章总结：ionic build后将www放到集成X5内核的项目中的assets即可。

新建项目：ionic start 项目名称 --type=ionic-angular

运行项目：ionic serve

发布：ionic build

Android打包

ionic cordova platform add android

cordova build android

常用插件：

npm install ts-md5 --save

npm install @angular/http

1.npm安装jQuery.

npm install jquery --save

2.安装l types 内的 jQuery.

npm install @types/jquery --save