安装: npm install --save eventemitter3 创建event.service import { Injectable } from '@angular/core'; // var EventEmitter = require('eventemitter3'); import { EventEmitter } from 'eventemitter3'; @Injectable({ providedIn: 'root' }) export class EventServi…

ionic 从2016年初识,经历了 ionic2 ionic3.至今 ionic4,终于在2018年7月份发布了测试版. ionic Framework 可以说得上是最接近原生app的ui组件,漂亮的ui组件,强大的cli,兼容性强,可以说得上是webapp众多ui组件中最好的.而且创建项运行项目非常简单.当年作为一个半路出家的前端,都能够创建并跑起来一个项目,即使我不懂什么angular2 不懂什么webpack脚手架,小菜鸡一个,你也能从中一点点做起来. ionic1在初创的时候他的初衷就…

作为一个后台开发人员,几年前参与过Ionic1开发过一微信公众号的经历,所以这次开发企业微信应用,就使用了ionic,正好ionic4 rc版本发布,虽然不是正式版,作为本项目的项目经理,还是决定使用ionic4开发,因为项目组员也是我.简单记录一下本次开发的过程,很多命令不经常输入,就忘记了. 0.环境要求 nodejs(好像是10以上对于ionic4) 很多资料说最好装cnpm,我使用感觉好像cnpm问题比npm多一点,而且现在网络情况不像以前那么恶劣了 具有管理员权限的命令行(类linux…

首先要更新或者安装 ionic cli npm install -g ionic 创建项目 ionic start ionic-angular tabs --type=angular –type=angular 是需要多加的参数,现在官方只集成好了angualr 或许以后就会有 --type=vue  or --type=react 呢 新建好项目后你会发现,与ionic2 ionic3项目 它的目录结构变了.在ionic4 ,已更改为遵循每个受支持框架的建议设置.例如,如果某个应用程序正在使用…

前颜(yan)最近公司有一个项目需求是利用h5进行跨平台开发,这里所说的跨平台开发指的是:将h5代码利用某种方式或工具环境进行打包,最后生成android的apk以及ios的ipa. 本文只讲解android开发环境,等以后有空了再介绍一篇关于ios的. 一.知识讲解本文基于ionic4+cordova构建android应用,首先做一下以下的知识梳理. 1 ionic是一套用于开发混合手机应用的开源h5框架,包含一套适合于mobile application的ui组件库以及相关访问原生设备的na…

现在的Ionic4已经开始支持VUE和REACT了.个人之前开发用IONIC.现在用VUE开发还是想用IONIC.刚好 也是支持VUE了. 在vue的项目里安装ionic依赖 npm install @ionic/vue @ionic/core --save 安装好之后在main.js里面引进就可以用了啦 npm install @ionic/vue @ionic/core --save…

1.使用命令行 #添加android, 如果是ios ,设置ioscordova platform add android #编译成apkionic build #开启cordova run android   2.按照上面的命令发现无法在Genymotion模拟器运行   这时需要修改Genymotion的设置,在Genymotion主界面找到Settings这一项: 手工指定Android SDK的目录后,重启模拟器,就可以正常运行ionic4的程序了.  3.用手机运行ionic4程序 需…

在ionic3的时候打包上架过ios的版本,等到今天,差不多一年左右过去.做了个ionic4的app要测试打包的时候,才发现以前的东西忘的差不多了.不得不从头再来一遍,所幸的是这次看见了很多好的文章,于是把它们汇总起来,自己做一些补充,整理成章,以便下次回顾 版本目录 VMware:VMware Workstation Pro v15.0.0 Mac:Mac os10.14 NodeJs:10.15.3 Ionic: 4.12.0 Cordova:8.0.0 Xcode:10 创建Mac环境 如…

ionic4打包 ng run app:build --base-href=/edu/course/mobile压缩打包 ng run app:build:production --base-href=/edu/course/mobile其中--base-href=后面为在域名后面显示的路径,例如:域名 + /edu/course/mobile 以下为ngix配置,mobile为打包出来的文件夹,可自行修改名称#课程中心手机端location /edu/course/mobile{ rewrit…

1.普通路由跳转 <ion-button [routerLink]="['/pinfo']"> 跳转到详情 </ion-button> <ion-header> <ion-toolbar> <ion-buttons slot="start"> <ion-back-button defaultHref="/tabs/tab1" text="返回"></…

1.ActionSheet 官方文档:https://ionicframework.com/docs/api/action-sheet <ion-header> <ion-toolbar> <ion-buttons slot="start"> <ion-back-button defaultHref="/tabs/tab1"></ion-back-button> </ion-buttons> &…

1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.com/docs/theming/advanced 2.Ionic4.x 增加内置主题颜色 找到 src/theme/variables.scss 文件,如下代码新增 favorite 颜色 .ion-color-favorite { --ion-color-base: #69bb7b; --ion-…

1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end menuId 侧边栏的唯一标识   type 配置侧边栏的弹出方式 overlay, reveal, push swipe-gesture 滑动弹出侧边栏 true false <ion-menu side="start" menuId="first"> <…

Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://idangero.us/swiper/api/ <ion-header> <ion-toolbar> <ion-buttons slot="start"> <ion-back-button defaultHref="/tabs/tab1&quo…

1.创建公共模块以及组件 ionic g module module/slide ionic g component module/slide 2.公共模块 slide.module.ts 中暴露对应的组件 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SlideComponent } from './slide.component'; @NgM…

创建页面: 1.cd 到项目目录 2.通过ionic g page 页面名称 3.创建完成组件以后会在 src 目录下面多一个 button 的目录,它既是一个页面也是一个 模块. 4.如果我们想在 tab1 里面写一个按钮点击跳转到 button 页面的话我们可以通过使用 Angular 的路由跳转.在 ionic4.x 中路由是完全基于 angular,用法几乎和 angular 一样. 5.ionic4.x 中跳转到其他页面不会默认加返回按钮,如果我们想给 button 页面加返回的话 需…

新建项目 e2e:端对端测试文件 node_modules :项目所需要的依赖包 resources :android/ios 资源(更换图标和启动动画) src:开发工作目录,页面.样式.脚本和图片都放在这个目录下 www:静态文件,ionic build --prod 生成的单页面静态资源文件 platforms:生成 android 或者 ios 安装包需要的资源---(cordova platform add android 后 会生成) plugins:插件文件夹,里面放置各种 cor…

1.搭建环境 1.电脑安装node.js,安装后电脑会自动安装npm     2.通过cmd命令,安装cnpm npm install -g cnpm -registry=https://registry.npm.taobao.org 3.通过cmd,安装ionic 4.安装VScode代码编辑器,用于代码开发 2.基础命令 创建项目:(helloWorld 项目名称:--type=ionic-angular 添加生成版本3,不添加生成版本4)  注:blank --空项目: tabs --底部…

io3 中 refresh组件位置可不定: io4 中 须置顶,否则报错,此外complete方法的调用位置改为target属性 参考:https://github.com/ionic-team/ionic/issues/15256…

在angular.json中的style中引入css文件: 然后在variables.scss中添加内容:…

前言 ionic是一个垮平台开发框架,可通过web技术开发出多平台的应用.但只建议开发简单应用.复杂的应用需要用到许多cordova插件,而cordova插件的更新或者移动平台的更新很可能导致插件的不可用,维护升级成本较高. 安装 安装node.js.https://nodejs.org/en/ 通过node.j安装ionic npm install -g ionic 查看安装情况 sh-3.2# node --version v10.14.2 sh-3.2# ionic --version 5…

安装插件 安装插件Image Picker $ ionic cordova plugin add cordova-plugin-telerik-imagepicker $ npm install @ionic-native/image-picker 安装插件File Transfer $ ionic cordova plugin add cordova-plugin-file-transfer $ npm install @ionic-native/file-transfer 添加到app.mo…

查看文档: https://www.cnblogs.com/WhiteCusp/p/4342502.html https://www.jianshu.com/p/bb291f9678e1 https://github.com/adamlacombe/Shadow-DOM-inject-styles import {Component, ElementRef, OnInit} from '@angular/core'; import {injectStyles} from 'shadow-dom-…

以下为自定义过滤器 import { Pipe, PipeTransform, Injectable } from '@angular/core'; import { DomSanitizer} from '@angular/platform-browser'; @Pipe({ name: 'weekPipe' }) //数字转中文 export class WeekPipe implements PipeTransform { transform(value: any, args?: any)…

我们再开发过程中很多模块做成组件,那么调用的时候则需把module.ts中的引入去掉,如下红色框框:…

组件内部示例 <ion-header> <ion-toolbar> <ion-title>条件筛选</ion-title> <ion-buttons slot="end"> <ion-button (click)="cancel()"> <ion-icon name="close"></ion-icon> </ion-button> <…

ion-picker实际开发中肯定多处使用,所以封装成服务的形式调用 新建picker.service服务模块   ionic g service picker import { Injectable, Component, OnInit } from '@angular/core'; import { PickerController } from '@ionic/angular'; @Injectable({ providedIn: 'root' }) export class Picker…

<ion-content class="details_"> <img class="courimg_" src="assets/images/courimg.png"> <ol class="swicth-tab"> <li [ngClass]="{'tab-btn':true,'active':item.id == slideOpts.initialSlide}"…

npm install -g cordova ionic 安装依赖 ionic start myApp tabs 新建项目 ionic g page name name为页面名称 新建组件 创建公共模块以下命令 ionic g module module/slide ionic g component module/slide参考:http://www.ionic.wang/article-index-id-148.html   安装依赖包 报错1No matching version foun…

页面跳转 : <ion-row *ngFor="let item of aboutData.stockData" [routerLink]="[ '/stock-details']"     /*  跳转页面*/ [queryParams]="item"                   /*  传的参数*/>     新页面取值:    import { Component, OnInit } from '@angular/cor…