而且私以为在目前激烈而又变化快速的移动APP市场环境下，用phonegap来开发APP未尝不是一种低成本mvp的方案，快速发布，成王败寇^-^ 为什么选用ionic 其中ionicframework便是...ios $ ionic emulate ios 以及私人推荐的电脑浏览器调试命令：$ ionic searve 相关插件扩展推荐 SQLite插件，如果你的APP需要持久保存用户数据，强烈推荐你使用...启动图片(或称闪屏)插件：$cordovaSplashscreen，之所以推荐也必装这个插件的原因是，默认情况下启动图片时间停留较短，如果你的APP在这段时间没有完成数据加载或者视图渲染等(需要查询SQLite...需要提示的是，安装插件后，在启动图片未关闭时候，默认菊花转在屏幕中间，如果你要自定义，可以更改插件中的原生代码，以iOS为例,将其改到屏幕底部：更改/src/ios/CDVSplashScreen.m中...中的TouchID也可以在hybrid APP中使用了，$cordovaTouchID 上述推荐仅仅是自己在开发Hipo的一点经验之谈，还是建议需得根据自己APP实际情况选用自己需要的插件。
设置必要的权限 在Info.plist的dict节点下添加以下配置 主要配置了http请求允许和所需权限的申请提示 NSAppTransportSecurity App需要您的同意,才能在使用期间访问位置 NSMicrophoneUsageDescription App需要您的同意...idea/ *.xcbkptlist 设置主页面 默认新建项目有两个文件LaunchScreen.storyboard和Main.storyboard LaunchScreen.storyboard是闪屏...加载后才会执行AppDelegate的回调 Main.storyboard是默认闪屏后的主页 我不建议开发用storyboard所以我们用代码控制页面跳转 创建一个MainController 然后在...-> Build Settings 搜索 swift 找到Objective-C Bridging Header 设置值为$(SWIFT_MODULE_NAME)/Bridge-Header.h 设置状态栏颜色
这里只说明androd和ios的情况。 1、启动前黑白屏 启动前黑白屏问题，仅存在于android，是android应用的通病，ionic表示这锅它不背。...具体操作时，当我们点击桌面图标启动APP时，有时会闪一下黑色背景，有时黑色背景时间还比较长。...原因是： 黑色背景：其实是在我们看到首页第一帧之前，看到的默认的背景色，黑、白色对应的就是黑白背景。 那解决方法是：让这个黑色的背景变成用户喜欢看到的画面或者让它透明化。...我这里定义了两个样式，来满足不同喜好，使用时二选一就行了：第一个样式，screen.png作为ionic或cordova默认生成的启动屏图片，于是使用screen.png为背景图；第二个样式为透明主题。...我们可以验证一下，执行命令运行看效果： ionic run android 2、启动后黑白屏 ionic启动页使用了cordova-plugin-splashscreen这个插件，插件配置在应用的config.xml
(状态栏和导航栏统称为系统栏) ? 实现从边到边的全面屏体验后，系统栏会覆盖在应用内容前方。应用也得以通过更大幅面的内容为用户带来更具有冲击力的体验。...使用 Android 10 以下设备的用户同样能获得更加沉浸的体验。我们将它设置为可选，仅仅是为了最大程度地减少开发者的工作量和测试量。 在状态栏后面绘制内容 接下来，我们来看看屏幕顶部的状态栏。...△ 应用内容在全屏范围内渲染，而且在导航栏后面2. 更改系统栏颜色 我们的应用布局现在已经拓展至全屏范围，因此需要同步更改一下系统栏的颜色，以便看清其后面的应用内容。...上文中列出的条件是目前系统用来判断的依据，在将来可能会更改。...Android 9 及更早版本 如果您决定在 Android 10 以下的设备上实现全面屏应用，则应将系统栏颜色设置为半透明，从而确保其内容可见。
(状态栏和导航栏统称为系统栏) 实现从边到边的全面屏体验后，系统栏会覆盖在应用内容前方。应用也得以通过更大幅面的内容为用户带来更具有冲击力的体验。...使用 Android 10 以下设备的用户同样能获得更加沉浸的体验。我们将它设置为可选，仅仅是为了最大程度地减少开发者的工作量和测试量。 在状态栏后面绘制内容 接下来，我们来看看屏幕顶部的状态栏。...更改系统栏颜色 我们的应用布局现在已经拓展至全屏范围，因此需要同步更改一下系统栏的颜色，以便看清其后面的应用内容。...上文中列出的条件是目前系统用来判断的依据，在将来可能会更改。...Android 9 及更早版本 如果您决定在 Android 10 以下的设备上实现全面屏应用，则应将系统栏颜色设置为半透明，从而确保其内容可见。
image.png 因为应用标题栏背景有底色，而默认状态栏的文字颜色为黑色，看上去就没那么美观，所以我们可以去利用该插件改变状态栏的文字为协调的颜色。 那实际在ionic3里是怎么使用的？...因为该插件是项目默认安装的，所以我们直接使用即可，打开app.component.ts，找到下面代码 this.platform.ready().then(() => { // Okay,
5、华为手机Android8.0 使用代码安装APK闪退问题 更新版本APK自动安装的时候，在安卓6.0、7.0下都OK，唯独在华为安卓8.0手机闪退。...---- 6、华为手机app闪退重启清空log日志问题 解决方案： ◆ 方式1（最全面的解决方案）： 找到手机设置 ---> 最后的开发人员选项 ---> 在调试模块,打开USB调试。...在MIUI V6及以上版本，调用MIUI的方法将状态栏图标改为黑色。发现部分小米手机，这样的设置不管用，导致头上一片白，状态栏上的东西基本看不到。...（四）改变状态栏字体颜色为黑色的适配 2.4.1 小米适配 /** * 改变小米的状态栏字体颜色为黑色，要求MIUI6以上 * tested on: MIUI V7 5.0 Redmi-Note3...示例图 实现原理：利用WindowManager将我们的圆角加到屏幕的四个角，圆角颜色设置为黑色，形成视觉圆角屏幕。
「虚拟键盘」 iOS 中虚拟键盘上的 Dictation 按键在启用和关闭多语言输入后的颜色是有所不同的。...「计算器」 横屏后变成科学计算器， 输入错误时在数字框上向 右/左 滑动，一次 删除/撤销 一位。 「顶栏图标」 调节到飞行模式时，飞机会从顶部状态栏左侧飞入。...用手捏住的时候是直的： 自然向下滑落（或者落地）的时候是向上弯的： 向上缩回的时候，是向下弯的： 「相机」 调节到倒计时拍摄状态时，闪光灯伴随倒计时一闪一闪的。...「滑块」 iOS 8 控制中心亮度和音量滑块用力往边上撞会有反弹效果 「滑动解锁」 升级到 iOS 8 的 iPad，在开启自动旋转且横屏锁屏状态下，右滑的同时，将屏幕竖过来。...「录屏」 同时按下 Home 键和电源键是截屏，同时按住 Home 键和电源键 5s，开始进入录屏模式…
、应用界面和导航条的突兀效果，更多的是提升用户体验，比如下面的效果，当页面中的标题栏颜色和状态栏不一样时，视觉上显然是很突兀的，大家可以纵观市场上的绝大部分主流应用，比如支付宝，微信，或者各个游戏，都会发现...安全区域实现沉浸式 安全区域是指页面的显示区域，也就是状态栏、导航栏区域之外的区域，没有特殊的情况，默认下开发者开发的界面都是在安全区域内，如下图，粉色的区域就是安全区域。...SafeAreaType 扩展安全区域的枚举类型 名称 描述 SYSTEM 系统默认非安全区域，包括状态栏、导航栏。 CUTOUT 设备的非安全区域，例如刘海屏或挖孔屏区域。...注意事项 在使用expandSafeArea属性时，有几点需要注意： 第一点，如果你的父容器是滚动容器，比如Scroll，所设置的expandSafeArea属性是没有效果的，这个千万要注意。...状态栏属性设置 当然了，窗口管理中，不仅仅可以实现沉浸式的效果，还可以更改状态栏的背景，字体颜色等功能，比如，我们把状态栏背景设置成红色背景，白色字体。
iOS7适配 状态栏设置 首先，需要在Info.plist配置文件中，增加键：UIViewControllerBasedStatusBarAppearance，并设置为YES； 然后，在UIViewController...UIStatusBarStyle.LightContent; } override func prefersStatusBarHidden() -> Bool { return false; } 最后，在需要刷新状态栏样式的时候...present的controller里面调用才起作用 iOS8适配 SDK 里面的某些API不能在iOS8下使用 如果，你的老项目在iOS8下运行，打开就闪退(iOS8之前没问题)，那么“恭喜你”...、Keyboard这些frame都是根据设备真实方向来返回frame的，而在iOS 7中，不过是横屏还是竖屏，iOS总是返回竖屏的frame，如以下输出： iOS7 竖屏： UIScreen.mainScreen...-- 在使用期间访问位置 --> NSLocationWhenInUseUsageDescription App需要您的同意,才能在使用期间访问位置</string
不过我们可以通过这个meta标签来禁止它： 百度SiteApp转码声明 4、设置状态栏的背景颜色...（IOS） 设置状态栏的背景颜色，只有在 "apple-mobile-web-app-capable" content="yes" 时生效 状态栏区域所对应的方向上的20px大小，相应地在retina设备上要减去40px的大小 的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个 在高清显示屏中的位图被放大，图片会变得模糊...="video/*"> 使用总结： ios 有拍照、录像、选取本地图片功能 部分android只有选取本地图片功能 winphone不支持 input控件默认外观丑陋 25、 消除transition闪屏
在收到邮件后，查阅谷歌官方的资料，更新SDK。其中UI最大的改变就是需要适配刘海屏。...如图： 第二张图就是开启模拟选项后显示的切口样式，当然这个缺口是模拟的，目前真机普遍的刘海屏高度在90px左右，安卓模拟器模拟的刘海屏高度为144px。...第三张图是开启一个应用的闪屏页没有适配刘海屏的高度时候的样子，顶部出现了黑色区域。这个黑色区域是因为刘海缺口导致的整个界面整体向下移。...因为我们的闪屏页一般都是会全屏显示，那我们就需要适配刘海屏上的全屏样式了。 坐好了，我开始吹一波了。...我另外又同时为大家准备了另外一个适配场景，其中做了适配和没有做适配的页面如下图： 想必大家从以上2个场景中也能总结出刘海屏的适配规则了： 就是界面的重要元素（例如按钮）不能被状态栏遮挡，需要充分的利用状态栏的显示区域
portrait是人像模式，也就是竖屏。...TabBar上移 系统原生的Tabbar在push的时候会上移 在UINavigationController的基类重写pushViewController代理方法，在Push的时候修正一下TabBar...现在通话或者其它状态下，状态栏高度不会变化了，程序不需要去做兼容。 横屏 在横屏状态下，不能因为刘海的原因将内容向左或者向右便宜，要保证内容的中心对称： ?...-- 在使用期间访问位置 --> NSLocationWhenInUseUsageDescription 获取地理位置，精准推送服务 如何实现在工程任何地方修改状态栏颜色的设置 info.plist中添加下面三项 UIStatusBarHidden UIStatusBarStyle
UINavigationBar是一个我们在开发中必定会碰到的控件，用好它能帮助我们自定义导航栏的样式，所以今天讲解一下UINavigationBar的用法。...设置导航栏的标题 这个直接是很简单的设置，一行代码搞定 self.navigationItem.title = @"导航栏标题"; 设置导航栏背景颜色 导航栏的背景颜色，也是很简单的 自己替换代码中的颜色即可...UIBarMetricsDefault, //表示在只横屏下才显示，和UIBarMetricsLandscapePhone功效一样，不过iOS8已经弃用了 UIBarMetricsCompact,...UIBarMetricsDefaultPrompt和UIBarMetricsCompactPrompt 更改顶部状态栏的颜色 typedef NS_ENUM(NSInteger, UIStatusBarStyle...黑色颜色，用于亮色背景，一个是白色用于深色背景 设置返回按钮 有时候我们会发现，我们设置的返回按钮都是蓝色的默认颜色，那么到底该怎么更改这些按钮的颜色呢 设置返回按钮的颜色，只设置tintColor的颜色就好了
是因为从 Android 6.0（API 23）开始，我们可以改状态栏的绘制模式，可以显示白色或浅黑色的内容和图标（除了魅族手机，魅族自家有做源码更改，6.0 以下就能实现）。...，同时让你的app可以捕捉到用户的所有触摸屏事件。...为了让标题栏回到原来的位置并且适应标题栏的颜色，我们在标题栏的上方添加一个大小和 StatusBar 大小一样假的状态栏 View,View 的 BackgroundColor 可以自己设置成标题栏一样的颜色也可以是其他颜色...并且在 Android4.4-Android5.0 是没有提供改变状态颜色的属性，所以只能通过新增加一个假的状态栏方式改变背景颜色。...，然后再去了解各个厂家定制化的属性在哪些版本阶段使用，以及是否需要对异形屏适配，最后才是在实际开发和需求中对状态栏和导航栏处理。
XML解析，用jsoup 线程通信（抓取HTML和RSS并解析的过程在子线程） 跨域，由安卓来请求，绕过去了 安卓与JS双向通信（包括JS接口注入和WebView历史栈管理） 靠这样一个很弱的玩具找到了第一份实习工作...） 自己用了半年的样子，后来知道了有更合适的方式：ionic之类的依赖Cordova实现的跨平台方案 三.ionic应用 2个月的前期准备（跟着计划走，学了一点PHP，一些angular），花1周时间做好了...RSS/HTML 内存缓存 + 本地缓存，简单过期策略 签名发布，正规安卓应用 遇到一些问题： JSONP跨域，接angular simplexml_load_file原生模块解析XML splash闪屏...在PHP生态没有找到更好的RSS解析方案 五.服务迁移至node 原PHP服务器无法支持HTTPS（廉价虚拟主机限制），改用HTTPS顺便用node重写，发现了生态的巨大作用： RSS解析使用feedparser...添上了一些本该有的支持： 定时抓取 服务端内存缓存 服务功能还比较简单，但目前抓取部分算是稳定了 六.打包iOS真机安装 安卓打包发布在之前有说过：ionic开发跨平台App常见问题，环境要求比较麻烦
摘要：全新SNS项目启动，现ionic更新到了3.0版本，angular更新到了4.0版本，博主随着这项目，带着大家领略一番ionic的相关技术细节上的问题 1、全新项目下载操作： 在新版本下，ionic...2、新增一个导航界面 在项目进行中要进行对底部导航栏目的修改，在项目中默认为三个导航，可是项目需求需要四个，我们需要ionic g page newPage//这里的newPage为我们开发人员自定义的名称自动生成页面...修改后结果.png 3、更改底部导航的颜色 由于项目使用橙色为主题色，最开始我不知道在哪里修改底部导航栏的颜色，于是去官网上寻找答案：http://ionicframework.com/docs/api...这些属性出现肯定是在scss里面进行设置的，很多情况下会误认为在：项目名/src/app/app.scss 里面，其实不然，经过一番的苦苦寻找最终在： 项目名/theme/variables.scss...改变点击色.png 4、结尾的话 作为公司项目此项目不应开源，但是我会在项目进行中将比比较精华的部分分享给大家，希望同路人喜欢上这样的UI框架，也希望ionic 在今后能改变我们大部分的工作方式！
和尚在切换横竖屏时用到 SystemChrome，和尚理解它作为一个全局属性，很像 Android 的 Application，功能很强大。...setPreferredOrientations 在我们日常应用中可能会需要设置横竖屏，或锁定单方向屏幕等不同要求，通过 setPreferredOrientations 配合实现；简单可以按...setEnabledSystemUIOverlays setEnabledSystemUIOverlays 是指定在应用程序运行时可见的系统叠加，主要对状态栏的操作，读起来比较拗口，但是看测试用例就很明了...； 1. systemNavigationBarColor 该属性仅用于 Android 设备且 SDK >= O 时，底部状态栏颜色； SystemChrome.setSystemUIOverlayStyle...(statusBarBrightness: Brightness.light)); setApplicationSwitcherDescription 和尚个人理解该属性显示效果是在应用程序切换器相关的应用程序的当前状态时
屏幕尺寸 在纵向方向上，iPhone X上的显示屏的宽度与iPhone 6，iPhone 7和iPhone 8的4.7 寸显示屏的宽度相匹配。...状态栏在iPhone X上比在其他iPhone上更高。如果您的应用假定固定状态栏的高度用于将内容定位在状态栏的下方，则必须更新您的应用，才能根据用户的设备动态定位内容。...iPhone上的显示高度为4.7 寸iPhone的显示屏提供了更多的内容垂直空间，状态栏占据您应用程序可能赢得的屏幕区域状态栏还显示人们发现有用的信息，只能隐藏以交换附加值。...颜色 iPhone X上的显示器支持P3色彩空间，可以产生比sRGB更丰富，更饱和的颜色。 使用广泛的颜色来增强视觉体验。使用宽颜色的照片和视频更加逼真，使用宽色的视觉数据和状态指示器更有影响力。...请参阅颜色管理。 手势 iPhone X上的显示屏使用屏幕边缘手势来访问主屏幕，应用程序切换器，通知中心和控制中心。 避免干扰系统范围的屏幕边缘手势。人们依靠这些手势在每个应用程序中工作。
因为这个h5项目嵌入在原生项目中，适配就会有有种方式：1.在原生中用原生的的方法适配 2.在前端页面中用h5的方式适配。 一.原生适配iphoneX 原生适配很简单，查看机型图： ?...优点：在原生中适配，h5页面不用更改任何一句代码。 缺点：1)意味着如右图某些通栏页面无法实现， ?...image 2）顶部和底部显色固定，无法适应页面颜色，（王者荣耀用链接地址传递参数的形式在原生中完美适配，不太明白原理） ---- ** 一.h5页面适配iphoneX** ** 1.viewport-fit...image.gif body { padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px padding-top: env(...safe-area-inset-top); //为导航栏+状态栏的高度 88px padding-left: constant(safe-area-inset-left); //如果未竖屏时为0
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
