[extajp8x4o.gif] 切换到Code栏，可以看到生成了如下代码 <?xml version="1.0" encoding="utf-8"?...，可以理解为默认给fragment实现了返回键的功能，这样在fragment的跳转过程中，当我们按返回键时，就可以使得fragment跟activity一样可以回到上一个页面了 现在我们运行程序，就可以正常跑起来了...，也是一个一个页面返回，如果把前面的app:defaultNavHost设置为false，按返回键后会发现直接返回到桌面了，现在能体会到app:defaultNavHost这个属性的含义了吧。...popUpTo、popUpToInclusive、launchSingleTop [2k7y413srx.png] launchSingleTop：如果栈中已经包含了指定要跳转的界面，那么只会保留一个，不指定则栈中会出现两个界面相同的...app:uri="www.deeplink.com/{id}" /> 该uri没有声明是http还是https，那么这两个都能匹配。
例如：The hero's birthday is {{ birthday | date }} 在上面的例子中， date 就是一个管道 路由 Ionic对路由进行了封装，所以基本上看不出...Angular路由的影子，API就看Ionic的API即可。...Ionic ionic3基于Angular4。我们知道Angular可以创建自己的模块、组件、管道、服务等等，Ionic就是干了这么一件事情。...cordova 配置SDK 引用插件 安装Ionic Nativa 插件 直接在Ionic官网看，上面会给安装的命令，拿过来用就好了 ionic cordova plugin add cordova-plugin-camera...npm install --save @ionic-native/camera 安装大神写的插件 Cordova允许我们自定义插件，这种插件一般都放在 github，需要自己去找。
2.3 Deeplink <deepLink android:id="@+id/deepLink" android:autoVerify="false...拦截返回键的点击事件，这样Fragment就可以想Activity一样，具有回退，返回事件 配置路由XML文件，然后加载进NavHostFragment中 app:navGraph属性，对应的就是NavGraph..., 传入Action ID 表示执行XML 中的路由规则,同时还支持Deeplink跳转 navigateUp()和popBackStack()都表示回退上页面，但navigateUp...()在Deeplink的情况下 应用1a(deeplink)路由到应用2的B后navigateUp()返回到a，而popBackStack()则会返回到当前栈内的上一层(A) 另一个区别是popBackStack...4. 源码分析 4.1 源码中出现的个各类和职责 未命名文件.png 下篇将从这张图入手，开始源码分析，并利用实战改造
deeplink.png 前段时间公司让调研一下DeepLink，说以后会用到，之前看了很久，并做了个demo，现整理一下，方便以后查阅，如果有幸帮助到其他人就更好了。...Deferred deeplink（ 延迟深度链接） 相比deeplink，它增加了判断APP是否被安装，用户匹配的2个功能； 1.当用户点击链接的时候判断APP是否安装，如果用户没有安装时，引导用户跳转到应用商店下载应用...2.用户匹配功能，当用户点击链接时和用户启动APP时，分别将这两次用户Device Fingerprint（设备指纹信息）传到服务器进行模糊匹配，使用户下载且启动APP时，直接打开相应的指定页面。...如果系统成功验证到你拥有该网站，那么系统会直接把URL对应的intent路由到你的应用。...dl/games 游戏weixin://dl/help 帮助weixin://dl/feedback 反馈weixin://dl/profile 个人信息weixin://dl/features 功能插件
前面章节我们都是用命令行来操作，如ionic g page person，现在开始会涉及到很多命令操作，可能有些人会记不住命令，或者记不清关键字，可以像我这样，在IDE上装上插件，我这用的是VS Code...，装了插件后，src目录右键会出现Ionic Generate的快捷菜单，点击后弹出选择界面，输入名称即可自动创建。...关于IDE插件的，可以查看我另一篇文章开发工具插件。 ? image.png ?...这些服务会随着业务功能的开发而补充，服务的每个方法可以不写返回类型（如fun: Promise里的 Promise），但为了肉眼快速分辨出是异步方法还是普通方法？...返回参数是什么类型？我习惯了书写。 晚了，先写到这里。
1、这个功能需要我们用到ionic提供的registerBackButtonAction方法（注册硬件后退按钮动作） registerBackButtonAction(callback, priority...如果我们不想注册返回按钮影响所有页面，就要将返回函数再调用。 例如：如果一个上拉菜单已经显示，后退按钮应该关闭上拉菜单，而不是返回一个页面视图或关闭一个打开的模型。..."); // toast是cordova的一个插件cordova-plugin-x-toast，也可以用ionic的弹窗来代替 $rootScope.exitApp = true; const...delay = 2000; setTimeout(() = { $rootScope.exitApp = false; }, delay); } // 判断当前路由...环境已经准备完毕 ionic.Platform.ready(() = { try { const priority = 101; $ionicPlatform.is("Android
由于现在ionic还处于未正式的情况，所以博主不推荐使用这套新框架做项目开发，因为其源码一直在变化，现遇到有人问tab图标在4里面如何进行操作，带着这样的问题，我们来看看如何去写。...tabs.page.html 官方命令为我们创建好了代码，这里不难发现，tabs分为两大部分： 第一大部分：ion-tab： 这里是路由器，存放页面跳转路由用，此部分的tab作为标签，对应底部tabButton...第二大部分：ion-tab-bar： 这里是页面显示组件，每个button都在这里被合理放置并自适应和匹配ionic的主题。 2、查看官方文档 理清楚两大部分的作用后，我们查看官方文档： ?...event 说明：这里就有我们核心的利用值了，通过获取detail中的tab，匹配html中tab-bar设置tab的值来完成tab button 变化状态的改变： <ion-tab-button
03.什么是Deferred DeepLink 什么是Deferred DeepLink 相比DeepLink，它增加了判断APP是否被安装，用户匹配的2个功能； 1.当用户点击链接的时候判断APP是否安装...参考一些其他app，发现不管是跳转指定的几级页面，点击返回是回到首页，那么这个是如何做到的呢？...如果系统成功验证到你拥有该网站，那么系统会直接把URL对应的intent路由到你的应用。...下面就来看看scheme是如何匹配并拉起对应APP的。...ResolverActivity的，也就是这个scheme怎么会唤起App选择界面，在短信中，或者Webview中遇到scheme，他们一般会发出相应的Intent（当然第三方APP可能会屏蔽掉，比如微信就换不起
设置主页（Home page） 3 持久化数据保存 4 总结 Ionic 2 实现列表滑动删除按钮 1.创建Ionic2应用 2.准备列表数据 3.修改主页（HOME）的模版 4.创建方法删除数据...我们需要一个列表 3.获取远程数据 4.推送数据到服务器 总结 Ionic 2 中的样式与主题 Ionic 2主题简介 创建Ionic 2应用主题的方式 没有苹果电脑打包iOS平台的...Ionic 2程序 开始之前 1 创建一个Ionic 2的应用 2 建立Ionic Cloud 3 生成证书和创建一个安全概要 4 使用Ionic Package 命令 总结 Ionic...插件 Ionic 和 Cordova 的误解 使用Ionic Native 使用没有包含在Ionic Native中的插件 Ionic 2 中添加图表 1....一些更新命令 错误：Error: listen EADDRINUSE 0.0.0.0:53703
在刚接触ionic的时候，我觉得导航不太好理解，主要是ionic的导航方式和我们之前接触的路由导航方式不太一样。...开发的第三方路由模块uiRouter。...如果你没有了解过Angular4中的路由，其实也可以简单看看uiRouter的使用，不需要了解的多详细，仅仅理解它的那个指令的使用方式就可以了。...tab，表示我们在上面图片中看到的4个tab界面。...如果你不这么做，而是在 personal.ts 中直接setRoot exitSoftware() { this.alertCtrl.create({ title: '确认退出？
’，不过官方已经不推荐使用了。...cordova plugin add cordova-plugin-camera npm install --save @ionic-native/camera 安装File插件 File 插件基于HTML5...ionic cordova plugin add cordova-plugin-file npm install --save @ionic-native/file 安装File Transfer插件...File Transfer 插件提供上传和下载文件的方法，使用上很便利 ionic cordova plugin add cordova-plugin-file-transfer npm install...:///storage/emulated/0/Android/data/com.xxx.aaa/ ” const access_token = xxx; 为了测试了方便，这里直接将用户登录通过验证之后返回的
.}); 路由机制 : 状态机 对于视图的路由，ionic没有使用AngularJS的路由模块（ng-route），而是使用 了angular-ui项目的ui-route模块。...ionic.bundle.js已经打包了ui-route模块， 所以我们使用时不需要单独引入。 和通常基于URL匹配的路由机制不同，ui-route是基于状态机的导航： ?...模板视图 : ion-view 尽管在模板视图中可以随便写HTML，但是，在ionic中，我们总是使用指令ion-view来 作为模板视图内容的容器，这是为了与ionic的导航框架保持兼容： <script...点击该按钮将返回前一个模板。...点击回退按钮将返回前一个视图。 示例中的代码在上一节的基础上增加了回退按钮，切换到小说页再看看！
Axure设计App,使用WebStorm开发(3) – 构建页面架构 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI 实战使用Axure设计App,使用WebStorm...在迈向后端的同时，同时介绍如何使用Chrome跨域插件，在浏览器中请求跨域数据，模拟App的数据请求。...所有的Server端RESTful API已经写好了，主要是把原来前端的MockDB，搬移到了后端，然后配置了URL路由信息，基本没有改动，已经放在了本文最后的下载链接里了，你可以直接下载，使用 node...如果你使用 ionic emulate ios ionic emulate ios 是可以直接访问的: ? 但是如果你使用浏览器来调试，你会在控制台看到浏览器的跨域请求拦截： ?...但是为了在浏览器里进行调试，所以需要暂时添加这个Http Header设置，Chrome 的插件可以解决这个问题： ? 安装好以后，在浏览器上会出现图标，打开此功能。 ?
然后安装该插件： ionic cordova plugin add 本插件本地或远程路径 验证一下，会发现在platform目录android里的res/values里会多出styles.xml文件。...ionic cordova plugin add cordova-custom-config 这个插件和普通插件不同，并不会增加项目大小，它是注册Cordova的钩子，利用Cordova命令修改自定义配置...4）应用项目的config.xml文件添加下面一句，指定使用的主题（2选1），这样在cordova build时，cordova-custom-config插件会执行并修改这句里的文件参数。...我们可以验证一下，执行命令运行看效果： ionic run android 2、启动后黑白屏 ionic启动页使用了cordova-plugin-splashscreen这个插件，插件配置在应用的config.xml...加与不加这参数的区别其实是AOT（Ahead-of-time，提前编译）和JIT（Just-in-time，即时编译）的区别，使用参数后使用AOT，若代码存在不规范的地方，如缺文件使得应用报错而无法启动
前言 之前我们又是看源码又是研究动画，今天分享一个比较简单的技术点：DeepLink。...是不是非常方便，这就是DeepLink。 正文 这么流弊的DeepLink是不是非常的难？其实DeepLink的基本实现是简单到不可思议，他的核心思想实际上是Android的隐式启动。...html scheme和host不可缺省，否则配置无效；path，pathPrefix，pathPattern一般指定一个就可以了，pathPattern与host不可同时使用；mimeType可以不设置...DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head...这个时候我们需要回顾一下action和category的用法： 首先需要尝试匹配action，action匹配成功了之后，才会继续匹配设置的category，所以单独匹配category是没有任何效果的
weex platform add android 一直等待下载安装完成，就会发现platform目录下多了个android的项目目录，然后执行： weex run android 然后可能会报如下错误...目录结构 首先比较下weex和ionic的目录，两者还是有点像的，只是weex把ionic隐藏在node_modules里面的wabpack配置开放出来了，这样配置起来就灵活了一些。...weex ionic weex ionic 2. UI weex好像自身不带UI框架，但是可以很简单地集成weex-ui，而ionic自带UI，两者打个平手吧。...页面切换应该比ionic流畅。...4. 原生支持 可能刚接触不深，weex不建议但可以支持cordova，而且可以较方便集成原生第三方插件。反之，ionic只能支持cordova。
布局介绍 ionic ion-tap选项卡以及高级路由 ionic动态组件等 20150601更新 新增以下视频教程及资料： 妙味2014远程课堂jQuery视频教程 Javascript视频教程大合集...XML如何处理 返回JSON如何处理 省市联动实例 黄金价格实时图实例 阶段小结 WEB版QQ多人聊天，带离线留言功能 第二部分 AJAX概述与IntelliJ安装 使用IntelliJ开发Web项目...javascript JQuery的应用与高级调试技巧 JQuery的总结与简化调用 各种Ajax框架的对比介绍 各种Ajax框架的对比介绍 使用XHR对象发送和接受数据 浏览器穷尽测试与工具漫谈 为学员调试错误与...19 ngResource 数据交互插件 21 手机 app 开发的几种方式 ionic 学习思路以及ionic 新建的项目分析 22 ionic css布局介绍 25 ionic css布局介绍 grid...页面布局 26 ionic js指令布局介绍使用 27 ionic路由详解 28 ionic ion-tap选项卡以及高级路由 30 ionic侧边栏ion-side-menus 以及ion-tap结合侧边栏详解
本文将通过一个简单的列子（一个简单的邮编查询app）向大家展示PWA的开发流程，项目参考：Traversy Media - Build a PWA With Vue & Ionic4。...创建项目 项目使用Vue + Ionic的组合进行开发。本文主要关注PWA的搭建，因此vue、ionic等技术不做过多描述。使用VSCode的同学，建议安装Vetur插件增加开发效率。 1....初始化vue项目： vue create vue-ionic-pwa 3. 因为ionic的路由依赖于vue-router，所以接下来安装 vue-router： vue add router 4....}) .then(a => a.present()); } } }; 我们先看一下搜索组件的效果： image.png 输入邮编格式错误...clearInfo(){ this.info = null; } } } 到此，app的主体就完成了，效果如下： image.png 实现PWA 我们使用现成的 @vue/pwa 插件来给我们的
使用Safe Args Gradle插件，该插件可以生成简单的对象和构造器类，支持在destination之间进行类型安全的导航和参数传递。...当用户通过显式深层链接打开您的应用时，任务返回堆栈会被清除，并被替换为相应的深层链接页面。当用户从深层链接页面按下返回按钮时，他们会返回到相应的导航堆栈。...在这种情况下，如果按下返回按钮，您会返回到上一个应用；如果按下向上按钮，就会在导航图中的父级目的地上启动应用的任务。...在Navigation Graph文件中为页面添加标签。 <deepLink app:uri="www.yanghujun.com/{params}?...使用默认值或可为 null 的值所定义的变量的查询参数占位符无需匹配。 多余的查询参数不会影响深层链接 URI 匹配。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
