混合手机app开发之Ionic篇

2022-08-15 14:08:49 浏览数 (1)

混合手机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打包

代码语言:javascript复制
ionic cordova platform add android
代码语言:javascript复制
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

0 人点赞