ionic 2基于navparams隐藏项 - 腾讯云开发者社区

文章/答案/技术大牛

发布

ionic2项目环境搭建

最近在学习ionic2，搭环境的时候遇到一些坑，自己写下来马克一下。最开始用npm安装ionic，记得把npm升级一下到最新版本。npm install –g ionic 记得要全局安装。...进入到要放项目的目录 ionic start 项目所在文件夹名称实例选项我安装的时候卡在了running command上，可以是因为网络的问题。...所以进到了项目文件夹里的 node_modules目录，再 ```npm 或者 cnpm install`` （或者直接之前换成国内源）之后想在浏览器中运行项目，需要进入项目目录，输入ionic serve

6730 0

Ionic 2 添加页面创建页面创建附加页面

现在我们已经基本知道了Ionic2 app的布局，接下来我们来走一遍在我们的app里创建和导航页面的过程。...Array; constructor(private navCtrl: NavController, navParams...: NavParams) { // If we navigated to this page, we will have an item available as a nav param...this.selectedItem = navParams.get('item'); this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball..., item) { this.navCtrl.push(ItemDetailsPage, { item: item }); } } 这个页面创建了一个包含多个数据项的列表页

3.3K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

【组件篇】ionic3图像手指缩放滑动预览

这段时间没有做ionic相关的事，但看到群里有人问这个，写一下。我在一篇文章【组件篇】ionic3开源组件提到过图像预览组件，可以看里面的源码，也可以看下面内容。...其次，实现这个功能其实也是很简单的，正常这个功能用ionic自带的slides即可，它有zoom属性，不过我那时用有bug，所以也是拿万能的swiper来代替，所以先在index.html里添加： ionic-angular'; declare let Swiper: any; interface IInput...{ canEdit: boolean, //能否编辑 selectedIndex: number, //默认选择项索引 images: any[], selectedCount...: NavParams, private alertCtrl: AlertController) { let inputParams: IInput = navParams.data;

2K3 0

使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页（Home page）3 持久化数据保存4 总结

本文使用Ionic2从头建立一个简单的Todo应用，让用户可以做以下事情：查看todo列表添加新的todo项查看todo详情保存 todo到持久化存储 0 开始之前本教程需要你了解基本的Ionic...已经在电脑上安装了Ionic 2。如果没有，先去安装和学习吧。 1 创建新的Ionic 2工程我们将通过生成一个基于“空白”模板的新项目开始。这是一个空的项目框架，但有一些示例代码供我们使用。...可以看到Ionic 2项目的基本结构，这些是由Ionic CLI生成的代码。...= this.navParams.get('item').description; } } 当我们把这个页面将传入的数据项,点击,然后我们把物品的标题和描述,使用NavParams。...我们将使用Ionic 2提供的Stroage服务来帮助我们做到这一点。Stroage服务是Ionic 2的通用存储服务,它负责存储数据的最佳方式,同时提供了一致的API供我们使用。

8K5 0

Ionic3 拍照上传

ionicAPI cordovaAPI 界面预览项目是基于ionic 提供的 tabs模板创建的，除了添加一个 camera page，在camera里面做测试，其它地方基本没有修改过。...cordova plugin add cordova-plugin-camera npm install --save @ionic-native/camera 安装File插件 File 插件基于HTML5...ion-content> camera.ts，逻辑代码 import {Component} from '@angular/core'; import {IonicPage, NavController, NavParams...'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOlsiYXBpLXJlc291cmNlIl0sInVzZXJfbmFtZSI6ImFkbWluIiwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNTA5MTk2OTcyLCJhdXRob3JpdGllcyI6WyJST0xFX1VTRVIiXSwianRpIjoiOWFmYmIyYWItMzdiYi00MTIyLTg2NDAtY2FmMDc1OTRmOGZkIiwiY2xpZW50X2lkIjoiY2xpZW50MiJ9...: NavParams, private camera: Camera, private transfer: FileTransfer, private

2.3K3 0

Ionic3学习笔记（十二）拍照上传图片以及从相册选择图片上传

安装插件终端运行: ionic cordova plugin add cordova-plugin-camera npm install --save @ionic-native/camera ionic.../image-picker 2....background-size: cover; } } edit.ts import {Component} from '@angular/core'; import {IonicPage, NavController, NavParams...export class EditPage { avatar: string = ""; constructor(public navCtrl: NavController, public navParams...: NavParams, public actionSheetCtrl: ActionSheetController, public alertCtrl: AlertController, public

1.7K1 0

Ionic 2 应用剖析0 开始之前1 创建一个新的Ionic 2 应用2 目录结构3. Class 定义Root Components 模版App Module总结

0 开始之前通过本教程之前,您应该至少了解一些基本的Ionic 2概念。您还必须已经安装了Ionic 2 在您的机器上。...要做到这一点，您需要运行以下命令： ionic start ionic2-tutorial tutorial --v2 现在您的应用程序将自己开始建立。...根据功能组织代码的想法不是Angular 2 & Ionic 2 的特权，事实上人们在Ionic 1中使用和倡导基于特征的方式，只是大多数人没那样做（趋势是很难打破）。...通过Angular 2 的工作方式，默认就使用基于特征的结构，因此不难推行这种结构。 index.html 已经是惯例了，浏览器第一个打开的文件就是 index.html 。...= navParams.get('item'); console.log(this.selectedItem); 这就是Ionic2主从复合的基本模式了。

6K5 0

ionic-navigation 原

/images/{{contact.contactid}}.png" alt=""> 2>{{contact.contactname}}2> {{...'; import {NavController} from 'ionic-angular'; import {NavigationDetailsPage} from '.....=[ {"contactid":1,"contactname":"张三","contacttext":"13123451388"}, {"contactid":2,...openNavDetailsPage(contact) { this.nav.push(NavigationDetailsPage, { item: contact }); } } //NavParams...'; import {NavController, NavParams} from 'ionic-angular'; @Component({ templateUrl: 'build/pages

8821 0

Ionic3学习笔记（十三）HttpClient 实现 HTTP 请求以及踩过的一些坑

猫眼API 当然是基于这篇古老的文章啦 ==> http://www.jianshu.com/p/9855610eb1d4 因为是2015年的文章，已经时隔2年多，很难确保API仍可使用，所以我亲自进行了抓包...，发现没毛病还能用，并且还多发现了2个接口，现整理如下：正在热映电影列表： http://m.maoyan.com/movie/list.json?...showId=70157&showDate=2017-12-09 Request： showId 放映id showDate 放映时间 2.... movie.ts import {Component} from '@angular/core'; import {IonicPage, NavController, NavParams...首先卸载 Ionic WebView 插件 ionic cordova plugin remove cordova cordova-plugin-ionic-webview --save ionic

3.5K1 0

ionic2实现扫描二维码功能

安装插件 // 安装平台插件 ionic cordova plugin add cordova-plugin-qrscanner // 安装ionic2插件 npm install --save @ionic-native.../qr-scanner ---- 2.使用插件 1.创建扫描二维码的页面 ionic generate page qrdcan 2.页面跳转到扫码页面跳转方法 // 跳转扫码页面 goQrdcan...// qrdcan.ts import { Component, OnInit } from '@angular/core'; import { IonicPage, NavController, NavParams..., ViewController } from 'ionic-angular'; import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner...: NavParams, private qrScanner: QRScanner, private viewCtrl: ViewController) { } ngOnInit

1.6K2 0

Ionic3学习笔记（十一）实现省市区三级联动

安装 ion-multi-picker 终端运行: npm install ion-multi-picker@2.1.0 --save 2.... edit.ts import {Component} from '@angular/core'; import {IonicPage, NavController, NavParams...} from 'ionic-angular'; import {CityDataProvider} from "../.....export class EditPage { cityColumns: any[]; constructor(public navCtrl: NavController, public navParams...Angular component and it has 'multiPickerColumns' input, then verify that it is part of this module. 2.

2.2K1 0

Ionic3学习笔记（十）实现夜间模式功能

/src/theme 文件夹下创建 theme.light.scss、theme.dark.scss 2个文件，分别用于日间模式、夜间模式的设置。...2. 导入 variables.scss @import "theme.light"; @import "theme.dark"; 3....ion-content> setting.ts import {Component} from '@angular/core'; import {IonicPage, NavController, NavParams...: NavParams, public toastCtrl: ToastController, public settingDataProvider: SettingDataProvider) {...'; import {StatusBar} from '@ionic-native/status-bar'; import {SplashScreen} from '@ionic-native/splash-screen

1.1K3 0

Ionic2 Rest 认证1、创建Ionic 2 APP2、创建服务3、创建登陆和注册页面4、登出和token检查

2 APP 反复练习，应该是很熟悉了： ionic start Ionic2RestAuth --v2 我习惯上会先启动看看，确保项目创建成功： cd Ionic2RestAuth ionic serve...Rest API 功能界面五一更一发，更多内容请查看百度阅读： Ionic 2 实例开发 ---- 序 Ionic 2 安装环境安装创建Ionic项目测试运行项目 Ionic 2 项目结构...总结 Ionic 2 添加页面创建页面创建附加页面使用 Ionic 2 开发Todo应用 0 开始之前 1 创建新的Ionic 2工程 2....Ionic 2 基本导航功能总结 Ionic 2 中使用管道处理数据 1.生成一个新应用 2.创建一个管道 3.使用管道总结 Ionic 2 中使用HTTP与远程服务器交互数据开始之前...Ionic 2程序开始之前 1 创建一个Ionic 2的应用 2 建立Ionic Cloud 3 生成证书和创建一个安全概要 4 使用Ionic Package 命令总结 Ionic

4.8K3 0

SpringDataJPA笔记(2)-基于SpringBoot的配置项

基于SpringBoot的配置项大概整理了一下配置项说明 spring.jpa.database spring.jpa.database-platform 设置数据库引擎 spring.jpa.generate-ddl...to enable JPA repositories spring.jpa.show-sql 打印sql语句，方便调试 spring.jpa.properties.* jpa provider的配置项

1.5K2 0

HTML5手机APP开发入门(2)

HTML5手机APP开发入门(2) 课程内容使用IonicFramework v2 + angular 2 完成一个简单的联系人列表的操作，有三个页面: ListPage，DetailPage，AddItemPage...blank –v2 --ts ?...and Angular and will be resolved with the next Ionic2 release (beta.4) because the master is already...updated to Angular2 beta.8. ?...编辑list.ts 添加导航，页面切换到add-item NavController,NavParams 用于页面导航参考 http://ionicframework.com/docs/v2

1.9K8 0

Ionic3 开发流程

简单介绍自己使用Ionic3开发的过程，涉及到的知识点如下： Angular Ionic Cordova ES6 TypeScript Scss 环境搭建引用插件调试 Android...Angular路由的影子，API就看Ionic的API即可。...NavController、NavParams、依赖注入和你想象中的依赖注入一样。 Ionic ionic3基于Angular4。...我们知道Angular可以创建自己的模块、组件、管道、服务等等，Ionic就是干了这么一件事情。Ionic提供了一系列的组件给我们使用，使用（基于flex）实现响应式布局。...cordova 配置SDK 引用插件安装Ionic Nativa 插件直接在Ionic官网看，上面会给安装的命令，拿过来用就好了 ionic cordova plugin add cordova-plugin-camera

2.8K3 0

Ionic3 导航分析

在刚接触ionic的时候，我觉得导航不太好理解，主要是ionic的导航方式和我们之前接触的路由导航方式不太一样。...但ionic的导航系统使用起来感觉不是这样的，或许原理是类似的吧，但这里只讨论ionic中导航的使用。本文将通过一个例子，讲解ionic中导航的使用。...image.png uiRouter 路由是前端构建单页面应用(SPA)必不可少的一部分，AngularJS1.x中有两种路由实现，一个是内置的ngRouter，还有一个是基于 ngRoute...//在构造函数中注入了 NavController constructor(private navCtrl: NavController, private navParams...: NavParams, private formBuilder: FormBuilder, private viewCtrl: ViewController

2.7K1 0

【技巧】ionic3的页面导航后退事件拦截

基于此，起码有两种方式： 1、重写导航栏的后退按钮点击方法，具体操作为：头顶添加引用： import { IonicPage, NavController, NavParams, Navbar } from...'ionic-angular'; 类里添加注解变量： @ViewChild(Navbar) navbar: Navbar; 最后在页面生命周期方法ionViewDidLoad添加逻辑操作（写在此方法中是保障页面已经加载完成...2、利用ionViewCanLeave 给定一个标志变量： canLeave:boolean = false; 然后在逻辑操作中控制这个标志即可，最后在方法里面判断： ionViewCanLeave()

1.5K5 0

SNS项目笔记--RXjs简要用法

Angular升级到2过后，一直延续着promise做流处理，但是它自身携带的RXjs又是处理流的利器。...本篇从实战角度出发，简要的概括它的两个使用方法 1、极简HTTP请求 1.1、创建provider 在命令行输入ionic g provider youProviderName 在创建好后，系统会自动导入从...建立请求响应方法 //某个需要请求的类里: export class RealPage{ constructor(public navCtrl: NavController, public navParams...: NavParams, public baseService:BaseServiceProvider) { } param:any //请求携带的参数，这里可以自定义为number、...2、回调监听--组件中通讯在写ionic时发现当页面pop()的时候，竟无返回响应机制，这个时候，页面与页面就可以使用RXjs进行传播串接起来，类似于Android里面的EventsBus，Otto等

1.4K4 0

【红队APT】反朔源隐藏&C2项目&CDN域前置&云函数&数据中转&DNS转发

域前置-CDN隐藏C2真实IP 防止被溯源国内外云服务上大部分已经不支持域前置了，作者在阿里云刚刚复现成功…… 这里做简单的流程演示和相关的溯源分析什么是域前置区别于单纯的CDN隐藏IP技术;域前置技术采用高权重域名进行伪装...cs.whgojp.top代表着我们的恶意站点，www.baidu.com就是同服务器上的其它一个高可信站点，利用域前置，审查流量时显示的就是高可信域名，而看不到我们的恶意域名，所以可用来逃避流量审查，隐藏真实...emmm 这里拿自己生成的样本payload进行简单溯源条件：样本Payload，通过Banner信息测绘与基于样本通信特征扫描的方式获取域前置的真正Host 1、根据已经拿到的资产获取...teamserver IP 密码 xxx.profile 7、CS新添监听器以该监听器生成后门进行上线有一个有意思的特点就是external IP 不停的在变化(而且都是腾讯云的IP) 云函数隐藏真实...请求重定向也可以和之前的CDN方法相结合，之前CDN方法是通过CDN将请求转发到真实的C2服务器上，而添加请求重定向后，流程就变为了CDN转发到中转服务器，中转服务器再转到C2，达到双重隐藏的效果。

1.4K2 1

点击加载更多

ionic2项目环境搭建

Ionic 2 添加页面创建页面创建附加页面

【组件篇】ionic3图像手指缩放滑动预览

使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页（Home page）3 持久化数据保存4 总结

Ionic3 拍照上传

Ionic3学习笔记（十二）拍照上传图片以及从相册选择图片上传

Ionic 2 应用剖析0 开始之前1 创建一个新的Ionic 2 应用2 目录结构3. Class 定义Root Components 模版App Module总结

ionic-navigation 原

Ionic3学习笔记（十三）HttpClient 实现 HTTP 请求以及踩过的一些坑

ionic2实现扫描二维码功能

Ionic3学习笔记（十一）实现省市区三级联动

Ionic3学习笔记（十）实现夜间模式功能

Ionic2 Rest 认证1、创建Ionic 2 APP2、创建服务3、创建登陆和注册页面4、登出和token检查

SpringDataJPA笔记(2)-基于SpringBoot的配置项

HTML5手机APP开发入门(2)

Ionic3 开发流程

Ionic3 导航分析

【技巧】ionic3的页面导航后退事件拦截

SNS项目笔记--RXjs简要用法

【红队APT】反朔源隐藏&C2项目&CDN域前置&云函数&数据中转&DNS转发

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐