IONIC3

手摸手带你入门ionic3(五)：样式绑定

上一篇讲了数据绑定和事件绑定，这一篇该讲如何美化下我们的界面了，打算分为class绑定，style绑定和全局样式三个部分来讲。此篇所有的代码在上一篇的代码基础上添加。开始之前用编辑器打开awsomeProject，通过ionicserve命令运行项目class绑定ionic样式使用的是scss，它是成熟稳定的CSS拓展语言，具体的用法大家可以自己去学习下。这里就不讨论了。home.html对应的样
weixin_34279061·2018-04-24 10:48

ionic3 UI Components学习1：Action Sheets 动作面板

1.概述ionicApps由称为组件的高级构建块组成。组件允许您快速构建应用程序的界面。Ionic配备了许多组件，包括模块，弹出窗口和卡片。查看下面的示例，了解每个组件的外观，并了解如何使用每个组件。熟悉了基础知识后，可以详细阅读API文档，了解如何自定义每个组件。2.ActionSheets动作面板动作面板从设备屏幕的底部边缘向上滑动，并显示一组选项，可以确认或取消操作。动作面板有时可以用作菜单
zhiyu·2018-04-21 00:00

ionic3 UI Components学习3：Badges 徽标

1.Badges徽标概述徽标是通常将数值传递给用户的小部件。它们通常用于项目中。Demo源代码2.基本用法Followers260k徽标也可以被赋予任何颜色属性：2.BadgeAPI徽标是ionic中包含数字或文字的简单组件。您可以显示一个徽标来表明有与它所在项目相关的新信息。2.1SassVariables变量PropertyDefaultDescription$badge-font-size1
zhiyu·2018-04-21 00:00

ionic3 UI Components学习4：Button 按钮

1.Button按钮概述按钮是与应用程序进行交互和导航的基本方式，并且应该清楚地告知用户点击后会发生什么操作。按钮可以由文本或图标组成，或者文本图标一起组成，并且可以用各种属性进行增强。出于可访问性的原因，按钮使用标准元素，但通过ion-button指令进行了增强。2.用法2.1DefaultStyle默认样式Demo源代码buttonion-button>Button该color属性设置按钮的颜
zhiyu·2018-04-21 00:00

ionic3 UI Components学习2：Alerts 警报

1.Alerts警报概述警报是向用户提供选择特定动作或动作列表的好方法。他们还可以向用户提供重要信息，或要求他们作出决定（或多项决定）。从用户界面的角度来看，警报可以被认为是一种只覆盖屏幕一部分的“浮动”模式。这意味着警报只能用于快速操作，如密码验证，小应用程序通知或快速选项。更深入的用户流应该保留在全屏模式下。警报非常灵活，并且可以轻松定制。2.BasicAlerts基本警报基本警报通常用于通知
zhiyu·2018-04-21 00:00

ionic3学习之记住密码登录

ionic3学习之记住密码登录准备工作：先看下，重点看下存储数据在storage中ionic3学习之登录页登录的逻辑处理我们需要将用户登录是否记住密码记录下来图示：login.ts_login(username
Wayfreem·2018-04-19 00:00

ionic3学习之登录页

准备工作部分源码说明：constructor(publicmodalCtrl:ModalController){}我们使用的是：ModalController不是NavController。这两者的区别为：NavController和ModalController都是打开新页面，但是NavController是直接将页面放入到原有的页面堆栈中的，而ModalController是创建一个新的页面堆
Wayfreem·2018-04-18 12:05

ionic3学习之登录页

准备工作部分源码说明：页面跳转的相关类说明constructor(publicmodalCtrl:ModalController){}我们使用的是：ModalController不是NavController。这两者的区别为：NavController和ModalController都是打开新页面，但是NavController是直接将页面放入到原有的页面堆栈中的，而ModalController
Wayfreem·2018-04-18 00:00

ionic3 填坑之 -- ionic serve 报错183

作者：猿奇链接：www.jianshu.com/p/9d8c7b7558d8來源：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。如有疑问，可评论联系作者，热心解答，从不怼人。。。events.js:183thrower;//Unhandled'error'event^Error:readECONNRESETat_errnoException(util.js:1024:11)a
猿奇·2018-04-13 16:37

ionic3学习笔记（2）支付宝支付准备工作（一）

1.准备工作、接入支付宝：1.必须注册企业支付宝账户，如果已有企业支付宝账户忽略此步骤2.百度搜索《支付宝开放平台》，或者点击下面链接进入支付宝开发接入页面：https://open.alipay.com/developmentAccess/developmentAccess.htm3.点击用支付应用如下图:4.填写对应应用名称,如下图点击创建：5.创建以后进入下面页面。上传应用图标6.设置应用公
夏日蔷薇666·2018-04-13 13:54

ionic3 ion-input进入页面自动获取焦点

查了许多资料，也问了ionic3的大神，现将知识点记录如下：1、能不能直接设置ion-input的属性值来达到自动获取焦点的目的使用autofocus="true"属性值效果：⑴在网页端浏览，可以自动获取焦点了
Mandy·2018-04-13 00:00

ionic3瀑布流

下面就介绍一下如何在ionic3中使用瀑布流布局。首先创建一个项目，这里不多做介绍。我们用about这个模块来进行瀑布流的开发。
journey_雪·2018-04-12 13:33

ionic3 微信授权登录

1、安装微信插件ioniccordovapluginaddcordova-plugin-wechat--variablewechatappid=YOUR_WECHAT_APPIDYOUR_WECHAT_APPID就是你申请的appid注意：在微信开放平台创建应用的时候，appid是你的安装包签名的md5的值去掉冒号小写，如果这个不匹配，微信登录老闪退提示错误。2、组件中引入微信服务，定义。impo
zxc19890923·2018-04-12 00:00

ionic3学习笔记（1）修改toast样式

项目中需要使用弹出框，向用户展示提示信息。找到了toast和alert两个组件，alert样式美观，但是必须点击按钮之后才能消失，显然不满足需求。toast可以使用，但是样式非常的吃藕，只能自己修改样式了。网上有大神使用第三方插件，做了非常的炫酷的效果，但是太麻烦（我太懒），找了个简单的办法来修改toast背景色和字体颜色，以及toast宽度。在variables.scss里面覆盖的样式//修改t
夏日蔷薇666·2018-04-11 13:06

使用Ionic3创建原生app系统入门

前提需要安装node.js官方文档：https://ionicframework.com/do...安装脚手架npminstall-gioniccordova创建项目ionicstartmyApptabsstart命令代表创建新app项目.myApp是新项目的工程及文件名tabs是采用提供的模板类型ionic提供了一些模板tabssidemenublanksupertutorial运行项目ioni
易兒善·2018-04-11 00:00

ionic3学习之目录结构分析

ionic3目录结构新建工程在要创建项目的目录下使用命令：ionicstartmyApptabs如果不熟悉搭建环境的同学，可以去看下ionic3学习之环境搭建工程图示工程目录说明:hooks：编译cordova
Wayfreem·2018-04-09 00:00

ionic3学习之环境搭建

ionic简介ionic是一款基于Angular、Cordova的强大的HTML5移动应用开发框架,可以快速创建一个跨平台的移动应用。可以快速开发移动App、移动端WEB页面、微信公众平台应用，混合appweb页面。ionic主要关注外观和体验，以及和你的应用程序的UI交互，特别适合用于基于Hybird模式的HTML5移动应用程序开发。ionic特点1.ionic基于Angular语法，简单易学（
Wayfreem·2018-04-04 00:00

ionic3、跨域访问

@ionic-native/httphttps://ionicframework.com/docs/native/http/使用nativehttp就不是ajax|fetch了，不受浏览器限制！所以只能在真机或模拟器上运行，不能再浏览器中运行了。
ZiYi5662120·2018-03-27 16:46

初学ionic--自学整理知识点总结(1)

所以移动端打算使用ionic框架来混合开发,刚接触此框架时感觉这简直就是对于web大前端的程序员专门设计准备的,对移动端程序员很不友好,ionic使用学习需要熟练掌握HTML/JS/CSS等前端知识,同时ionic3
Missnya丶·2018-03-26 19:51

命令行 jarsigner 签字和解决找不到证书链错误

命令行jarsigner签字和解决找不到证书链错误问题：最近在学习Ionic3，然后做了页面，想在自己的Android手机上面测试下。结果在最后使用jarsigner签名时报错。
Wayfreem·2018-03-26 00:00

ionic3 中使用 environments

在ionic3中，与angular中不一样的，还有cordova这一层壳。
ck110·2018-03-26 00:00

解决ionic3 无法访问https请求的问题

在ionic的开发中，我需要用进行https请求，但是我发现在debug下访问没有问题，但是一旦打包签名后就无法访问了。这是由于在测试APK的时候，如果后端API为https的，而且在测试服的https证书是非正式的话，会导致测试版apk无法发起http请求。我是用的是自签名的证书，因此导致无法访问。经过苦苦寻觅，终于找到了一种忽略ssl认证的方法，可以解决遇到的问题。方法如下：android端找
仲夏夜之恋·2018-03-19 13:01

ionic3 热更新android篇

这热更新简直了，其实看网上配来配去就这几步，但自己一配就立马遇上很多问题，主要还是细节方面处理不够到位。索性自己也开一篇，防止自己忘了。进入自己的ionic项目根目录下启动ionic服务ionicserve安装ionicnative热更新插件ioniccordovapluginaddcordova-hot-code-push-pluginioniccordovapluginaddcordova-h
SHpoi·2018-03-18 12:10

ionic3 增加iframe

阅读更多对请求的url进行安全处理。import{Component}from'@angular/core';import{DomSanitizer}from'@angular/platform-browser';@Component({selector:'page-hello-ionic',templateUrl:'hello-ionic.html'})exportclassHelloIonic
coocaobo·2018-03-17 12:00

ionic3 增加iframe

阅读更多对请求的url进行安全处理。import{Component}from'@angular/core';import{DomSanitizer}from'@angular/platform-browser';@Component({selector:'page-hello-ionic',templateUrl:'hello-ionic.html'})exportclassHelloIonic
coocaobo·2018-03-17 12:00

ionic3-android打包完美解决

ionic打包的问题先哭一会，我以为我已经掌握了打包的技术，没想到我还是tooyoungtoosample，换了几次电脑，开发环境的版本都不固定，以前整理的文档都是不能通用的。而对于被androidstudio支配的恐惧还残留在大脑里，我还是不想下它，所以坚持用gradle来打包。1.故事的一开始因为我们是通过版本管理共享代码的，打包这块不是我主要负责，换了电脑之后一直也没有这块的工作，所以一开始
JiaXinYi·2018-03-14 00:00

Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解

1.Ionic3.x页面正向传值关于正向传值，上一篇文章里面有讲，具体可以看这里：//www.jb51.net/article/136302.htm2.Ionic3.x页面pop反向传值,主要有两种方式
前端小智·2018-03-13 09:58

Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解

1.Ionic3.x中页面(组件)之间正向传值方式？这里所说的正向传值指的是如有两个页面，我们简称页面A和页面B,正向指的是A跳转到B,比如一个商品跳转这个商品的详情页面。
前端小智·2018-03-13 09:17

Ionic3各种问题汇总

安卓1、如果在64位系统出现如下错误请安装64位jdkUnabletostartthedaemonprocess.2、如果在fat32格式的磁盘上面执行cnpminstall会报错，必须在ntfs格式的磁盘上执行3、如果出现如下错误：YouhavenotacceptedthelicenseagreementsofthefollowingSDKcomponents:请安装sdk版本24，包括SDKp
冰咖啡mary·2018-03-12 11:32

ionic3学习之路（三）

Angular4第二周1、第一天1.1、路由知识梳理、理解2、第二天2.1、Angular4双向数据绑定(Angular4中默认单向数据绑定，有时我们需要用到双向数据绑定，一般有两种情况)2.1.1、同一组件中，页面与控制器进行双向数据绑定，一般是表单控件。用法是在页面的表单控件中添加[(ngModel)]=”控制器中的属性”2.1.2、在子组件和父组件中使用。因为子组件和父组件进行通讯的话会有其
li_zean·2018-02-06 14:15

【技巧】ionic3如何实现优雅的弹窗动画

关于这篇文章，很早前就准备写了，只是内容属于我了解的非官方资料，怕有Bug风险误导别人，又怕我表述不清楚一直没动笔，后来群里有人专门找我问这个，那我还是写一下，仅作为参考……image.png在了解弹窗动画前，我们先了解下CSS3中动画的基本内容：CSS3transition属性值描述transition-property规定设置过渡效果的CSS属性的名称。transition-duration规
IT晴天·2018-02-06 01:45

IONIC3中接入极光推送

5月16日更新：最近极光进行了更新，已支持Android7.0，并且更新了详细文档与问题解释：https://github.com/jpush/jpush-phonegap-plugin/blob/b5d3661240ed59e93fe861b8ae44a209744abfcd/ionic/example/src/app/app.module.ts最近公司ionic项目要求接入推送，查了一圈发现只
小澄·2018-02-05 17:52

ionic3中文翻译：ToastController

校对一遍后，陆续放出几个月前学习时的翻译，文档几乎是没改变的，希望对你有用。原文Toast是应用中常用的微妙（subtle）通知。它用于提示有关操作的反馈或显示系统消息。Toast显示在app内容的顶部（覆盖内容），app可以将其关闭，以恢复用户与app的交互。（一般这些描述打开官网看看演示就会很明了）1.创建toast的所有选项都应该在create方法的第一个参数中传递：create(opts)
ceido·2018-02-04 12:13

ionic3中文翻译：ToastController

校对一遍后，陆续放出几个月前学习时的翻译，文档几乎是没改变的，希望对你有用。原文Toast是应用中常用的微妙（subtle）通知。它用于提示有关操作的反馈或显示系统消息。Toast显示在app内容的顶部（覆盖内容），app可以将其关闭，以恢复用户与app的交互。（一般这些描述打开官网看看演示就会很明了）1.创建toast的所有选项都应该在create方法的第一个参数中传递：create(opts)
ceido·2018-02-04 12:13

ionic3自定义icon图标（简单版）

有小伙伴说这方法不行了，我试了一下还是可以的。可能原因是样式那里。如有错误，请多斧正，谢谢。在网上找了几篇文章来看，步骤多，觉得麻烦。经过自己的实践后，总结了自己的方法。本来想贴出参考的那篇文章的地址的，但我跟作者说了我的方法后，第二天他就把文章给删了还是转私密了。第一步，我们可以去阿里图标网找我们要的图标：http://www.iconfont.cn/这里写图片描述然后点击最右上角的购物车，选择
ceido·2018-02-03 00:41

ionic3自定义icon图标（简单版）

有小伙伴说这方法不行了，我试了一下还是可以的。可能原因是样式那里。如有错误，请多斧正，谢谢。在网上找了几篇文章来看，步骤多，觉得麻烦。经过自己的实践后，总结了自己的方法。本来想贴出参考的那篇文章的地址的，但我跟作者说了我的方法后，第二天他就把文章给删了还是转私密了。第一步，我们可以去阿里图标网找我们要的图标：http://www.iconfont.cn/这里写图片描述然后点击最右上角的购物车，选择
ceido·2018-02-03 00:41

ionic3 日期选择的三种方式

第一种使用HTML5标签dateinput类型日期：各种日期格式可以参照http://www.webhek.com/post/html5-date.html第二种使用ionic控件ion-datetimeDate各种日期格式可以参照https://ionicframework.com/docs/api/components/datetime/DateTime/第三种使用ionicCordova插件
程序员_小小·2018-02-01 11:32

ionic3 环境搭建

第一步，安装Node.js+npm安装ionic环境需要先安装Node.js和npm.Node.js下载地址：https://nodejs.org/en/,选择下载一个带npm的安装包；安装流程这里和一般软件的安装方式大同小异，这里就不介绍了，安装成功后打开cmd查看版本，第二步：安装ionicwindows在cmd中执行下列命令：npminstall-gcordovaionic如果npm安装太慢
木木木木头脑袋·2018-01-30 00:00

ionic3编译到Android 相关配置

前言：由于ionic是可以进行多平台打包运行的，现在我们就来看看如何在Android和iOS中平台中进行运行：ionic添加到Android平台：执行的命令为：//将ionicsrc中的代码添加到Androidionicplatformaddandroid//使用cordova创建一个Android项目ioniccordovabuildandroid//直接在Android设备上运行ionicco
木木木木头脑袋·2018-01-30 00:00

ionic3先检测是否安装了app,没有就安装，有则打开

1.判断是Android还是iosif(this.platform.is('ios')){this.scheme=自己定义的';}elseif(this.platform.is('android')){this.scheme='包名';}2.装插件appAvailability用于检测是否装上appioniccordovapluginaddcordova-plugin-appavailabilit
changzhengcome·2018-01-26 11:10

Ionic3-部分公共样式设置

在app.module.ts中可以设置以下代码，达到一些公共模板的设置imports:[BrowserModule,HttpModule,IonicModule.forRoot(MyApp,{tabsHideOnSubPages:'true',//隐藏全部子页面tabsiconMode:'ios',//引用iOS的返回图标mode:'ios',//把平台设置成iOS的风格modalEnter:'m
Neokekeke·2018-01-22 10:31

Ionic初学之Ionic3（Cordova）插件制作与添加

现在制作APP都流行混合开发，Ionic是个不错的选择，但是很多原生的功能，混合开发是无法实现的，这时候就要根据功能来制作Cordova插件来实现，下面就记录第一次制作Cordova插件的步骤和遇到的问题及解决方法。首先cmd命令行创建自定义插件TestPlugin，格式：plugmancreate--name--plugin_id--plugin_versionplugmancreate--na
DearLC·2018-01-18 15:17

Ionic初学之Ionic3（Cordova）插件制作与添加

现在制作APP都流行混合开发，Ionic是个不错的选择，但是很多原生的功能，混合开发是无法实现的，这时候就要根据功能来制作Cordova插件来实现，下面就记录第一次制作Cordova插件的步骤和遇到的问题及解决方法。首先cmd命令行创建自定义插件TestPlugin，格式：plugmancreate--name--plugin_id--plugin_versionplugmancreate--na
DearLC·2018-01-18 15:17

利用Angular2 + Ionic3开发IOS应用实例教程

从Angular1到Angular2Angular2作为著名前端MVVM架构Angular1的继承者，从一定程度上说，引领了新一代Web前端开发技术的革新。从最新版的ember.js,react.js,vue.js中，可以看到这几种技术相互借鉴，取长补短，最终向一种技术方向演进。组件化技术的崛起Angular1也有组件，叫另外一个名字：指令。在Angular1中，指令是DOM元素紧密结合的一段包含
IBM developerWorks中国·2018-01-15 09:23

ionic3实现透明导航栏

这里（1）实现透明导航栏并且根据页面滑动来调整导航栏的透明度（2）导航栏根据页面滑动的%来隐藏，当向上滚动时在显示。实现效果如下：实现以上效果：（1）你要在ion-content里面定义一个div（class="headerNav"）用来模拟导航栏的样子，其次还要在这个div里面定义一个div(class="header_bg")来设置当页面滚动时导航栏的背景颜色等（这里div里面也写导航栏的内容
Dan_2017·2018-01-04 17:03

ionic3实现透明导航栏

这里（1）实现透明导航栏并且根据页面滑动来调整导航栏的透明度（2）导航栏根据页面滑动的%来隐藏，当向上滚动时在显示。实现效果如下：实现以上效果：（1）你要在ion-content里面定义一个div（class="headerNav"）用来模拟导航栏的样子，其次还要在这个div里面定义一个div(class="header_bg")来设置当页面滚动时导航栏的背景颜色等（这里div里面也写导航栏的内容
Dan_2017·2018-01-04 17:03

ionic3用Segment实现左右滑动菜单

1.这里使用Segment实现左右滑动菜单主要是解决一下两个问题：之前在Ionic3学习笔记(三)这篇博客里我使用的Swiper实现的左右滑动菜单的页面布局默认居中的问题，在.slide-zoom{height
Dan_2017·2018-01-03 09:18

ionic3用Segment实现左右滑动菜单

1.这里使用Segment实现左右滑动菜单主要是解决一下两个问题：之前在Ionic3学习笔记(三)这篇博客里我使用的Swiper实现的左右滑动菜单的页面布局默认居中的问题，在.slide-zoom{height
Dan_2017·2018-01-03 09:18

ionic3实战教程之随机布局瀑布流的实现方法

前言最近一段时间由于项目需要接触到了ionic3,发现真是一个利器啊!ionic项目提供了一套丰富的图标库，在ionic3中也进行了升级。
CM 朋克·2017-12-28 09:31

ionic3学习笔记(六)--轮播图

下面是轮播图的实现1，页面模板2，ts文件里对数据的初始化//初始化slidesinitSlides(){this.slidesItems=[{img:'assets/imgs/content-logo3.jpg'},{img:'assets/imgs/content-logo4.jpg'},{img:'assets/imgs/content-logo5.jpg'},{img:'assets/im
Dan_2017·2017-12-25 10:11
上一页 14 15 16 17 18 19 20 21 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他