【ionic4】开发随笔(停止更新,推荐使用UniApp开发)

本文详细介绍了Ionic框架的安装、配置及开发流程,包括项目创建、页面导航、组件使用、样式配置等核心内容,适合Ionic初学者及开发者快速上手。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ionic开发notice:
ionic 开发android 环境搭建:https://blog.youkuaiyun.com/simple__dream/article/details/82119920  
视频讲解地址:https://www.itying.com/goods-1067.html

官方API: https://ionicframework.com/docs


ionic命令:

ionic start  新建项目
ionic serve  浏览器运行
ionic cordova platform add android       添加到android平台
ionic cordova build android                   编译
ionic cordova run android            真机运行
cd.. 回退上一级目录
ionic cordova platform rm android  移除android项目

ionic cordova build android
ionic cordova run android


ionic g --help  //添加新东西
--------------------
ionic g page newpage 新建一个页面
ionic g module module/slide 创建一个模块
ionic g component module/slide  创建一个组件

点击按钮跳转页面:敲击方法:i4-butt 选择提示    其中 ng-rout 选择提示有Link的  剪切出来  
    <ion-button color="primary" [routerLink]="[ '/newpage']"> 
            跳转到组件页面
    </ion-button> 
返回按钮:敲击方法:i-back  提示
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
循环列表加载: ngfor
  <ion-list>
    <ion-item  *ngFor="let item of list">
      <ion-label>{{item}}</ion-label>
    </ion-item>
  </ion-list>
ts中:
public list: any = []; 定义变量
ngOninit中:初始化数据
    for (var i = 0; i < 10; i++) {
      this.list.push(`这是第${i}条数据`)  //这里面不是单引号和双引号 是英文下的 1旁边的那个
    }

ionic 图标库:www.ionic.wang

-----
ionic4使用公共模块方法步骤:
1.创建公共模块以及组件
ionic g module module/slide
ionic g component module/slide
2.修改src\app\slide\slide.component.spec.ts里报错的文件
3.src\app\slide\slide.module.ts文件中
引入import { SlideComponent } from './slide.component'; 
并爆漏 exports:[SlideComponent],没有自动生成  declarations: [SlideComponent],[]中要填入
4.src\app\tab2\tab2.module.ts谁要使用那就在此文件中引入 
import { SlideModule } from '../slide/slide.module'; 并 在ionicMoudle 中申明
5.src\app\tab2\tab2.page.html在该文件中使用模块组件 <app-slide><app-slide/> 
在src\app\slide\slide.component.ts文件中可以看到selector: 'app-slide',引号里就是使用标签

-----------------
配置android和iOS用同一种样式
1.进入到 app.module.ts.文件中 ,
2.修改imports 中的  forRoot 参数  
imports: [BrowserModule, IonicModule.forRoot({
    mode:'ios',// 配置 Android 和iOS 用统一的样式
    backButtonText:'返回',//配置  默认返回的文字
  }), AppRoutingModule],
-------------------
设置页面返回上一级
1.逻辑模块ts中引入 import { NavController } from '@ionic/angular';
2.构造函数中申明    constructor(public nav:NavController) { }
3.js设置方法  
  //页面返回js
goBack(){
    this.nav.navigateBack('/tabs/tab2');
    console.log("---页面返回上一级--");
  }
------------------------
  ionic4 在android平台上监听物理返回键

此方法可以是监听返回键

this.platform.backButton.subscribe(() => {

//this.appMinimize.minimize();

//测试吐司

this.presentToast();

});

------------------------------------

Ionic4.x 中的轮播图用法
1.在视图中 
  <ion-slides pager="true" [options]="slideOpts">
    <ion-slide *ngFor="let item of slideImages">
      <ion-img [src]="item"></ion-img> --这里用 Img 标签效果更好
    </ion-slide>
  </ion-slides>
  2.在逻辑业务ts中 增加变量

  //设置轮播图属性 基于swiper
  private  slideOpts = {
    effect: 'flip',
    speed: 500,
    loop: true,
    autoplay:{
      delay:3000
    }
  };
  --------------------
  文字跑马灯组件(html)
  <marquee width='380' direction='left'>这是滚动文字这是滚动文字</marquee>
  ------------
  按钮设置背景色为透明 :即设置 ion-button 里的  fill 属性
      <ion-button (click)="onClick()" slot="end"fill="clear">
        <ion-icon name="contacts" slot="icon-only"></ion-icon>
    </ion-button>

       ion-icon 修改图标  没有找到更快捷的方法    
    <ion-icon name="contacts"></ion-icon>
----------------------------
元素居中问题  https://www.cnblogs.com/xiuqian/p/6424127.html
----------------------  
加载地图:https://www.jianshu.com/p/4de365c55668
 ionic4 生命周期函数:https://blog.youkuaiyun.com/wei11556/article/details/56484718  
 

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 安装 安卓手机安装使用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值