Ionic 的生态系统基于Angular 和Cordova，前者是Web 应用框架，后者是构建和打包原生应用的工具。 下图展示了整个技术栈的概况 ? 技术栈的起点是用户在设备上打开应用。...假设是一台运行iOS 的iPhone 或者一台运行Android 的Nexus 10。下面是各个部分的介绍。 设备—设备可以加载应用。设备中的操作系统负责安装从平台对应商店下载的应用。...Web 应用就是在手机浏览器中访问的网站，它们专门被设计成适合手机屏幕尺寸。 ? 有些网站的设计者会专门为移动设备开发一个版本。你在移动设备上访问网站的时候可能会被重定向到另一个功能有限的版本。...而访问其他一些网站，比如www.bostonglobe.com 时，你会发现网站的设计会根据设备的类型和屏幕尺寸进行调整。这用到了被称为响应式设计的技术。...网站的内容会根据浏览器窗口尺寸自动调整大小，有些内容甚至会被隐藏起来。 移动端网站的优点 移动端网站有很多优点，主要体现在效率和设备兼容性上。
开始使用 Ionic 为了设置 Ionic 的开发环境，需要完成以下几步： 安装 Node.js 使用 npm 安装 Ionic 和 Cordova： npm install -g cordova ionic...你可以使用 Chrome 的设备模式查看应用程序在 iPhone 6 中的效果。 ? 使用 Ionic serve 命令的特点是它会在浏览器中显示编译错误，而不是（有时会隐藏）在开发控制台。...你可以使用 Chrome 的设备模式查看在 iPhone 6 上的效果。 ?...TIP: 我发现在模拟器中运行应用程序时的最大问题是键盘很难弹出。...Ionic/Cordova 似乎并不支持这种方式。为了解决这个问题，你可以使用 Cordova 提供的 in-app 浏览器直接与 Okta 的 OAuth 服务通信。
cordova为一移动开发框架，他让我们可以仅仅专注前端代码，然后通过一个开发框架编译形成一个可安装的APP，因为前端代码的特性，所以这种APP是跨平台的，可以最大程度的提升开发效率，因为只需要前端人员...这里又会引出另一个问题，哪个好？...IONIC Ionic是一个基于Cordova的移动开发框架，他的一大优势就是提供了很多UI，这样对于开发者来说就比较省心了，其次Ionic使用的angularJS作为配套框架（强依赖），所以对于前端来说是很不错的一个体验...当然，Ionic在一些Andriod机上表现不是很好，因为是内嵌资源，作为APP来说加载速度较快还无所谓，但是同一套代码如果要用做H5站点的话，angularJS的尺寸就是很大一个制约。...进行这个操作前，得保证电脑具有Node环境，然后执行命令行： npm install -g cordova ionic 然后我们随便找一个目录，创建我们第一个项目myAPP： ionic start myApp
$ npm install -g cordova ionic $ ionic start myApp tabs $ cd myApp $ ionic platform add ios $ ionic build...SQLite来存储数据（localstorage中数据很容易被系统，或者一些坑爹系统清理软件删除） Hipo所使用的brodysoft的Cordova-SQLitePlugin，以及集成到ionic...APP都知道，使用表单时键盘的弹起/关闭中会引来很多问题，Ionic之前的方案都是js实现，效果实难恭维，上述插件以原生代码的方式来优化这个问题，亲测效果很好，也强烈推荐你使用这个插件。...默认情况下启动图片时间停留较短，如果你的APP在这段时间没有完成数据加载或者视图渲染等(需要查询SQLite数据库，或者更甚者请求服务器)就需要自定义启动图片的关闭，那么就需要安装这个插件，否则就又会在启动时候有屏幕闪动的影响体验的问题...需要提示的是，安装插件后，在启动图片未关闭时候，默认菊花转在屏幕中间，如果你要自定义，可以更改插件中的原生代码，以iOS为例,将其改到屏幕底部：更改/src/ios/CDVSplashScreen.m中
，它们的屏幕数据分别如下： iPhone XS: 5.8 英寸，375pt * 812pt (@3x)； iPhone XR: 6.1 英寸，414pt * 896pt (@2x)； iPhone XS...iPhone 到最新发布的 iPhone XS Max 等所有 iPhone 设备的屏幕数据，包括：开发尺寸（points）、物理尺寸（pixels）以及实际渲染像素、1倍/2倍/3倍模式等，如图 1...iPhone X/XS 的屏幕宽度（开发尺寸）与 4.7 英寸的 iPhone 8 相同，都为 375pt，只是在高度上增加了 145pt； iPhone XR 和 iPhone XS Max 的屏幕宽度...---- 适配新的 iPhone X 设备 此外，我们发现，对于未进行新屏幕尺寸适配的工程，直接编译，在新设备 iPhone XR 和 iPhone XS Max 上运行，它们是以放大模式自动适配的（以...那么如何正确适配新的屏幕尺寸呢？
1、启动前黑白屏 启动前黑白屏问题，仅存在于android，是android应用的通病，ionic表示这锅它不背。...所以解决方式有好几种，可以看这两篇文章： Android启动页优化，去黑屏实现秒启动 Android启动页黑屏及最优解决方案 具体应用在ionic上可以参照这个： 快速解决ionic安卓主题启动时短暂的黑屏或白屏问题...ionic cordova plugin add cordova-custom-config 这个插件和普通插件不同，并不会增加项目大小，它是注册Cordova的钩子，利用Cordova命令修改自定义配置...我们可以验证一下，执行命令运行看效果： ionic run android 2、启动后黑白屏 ionic启动页使用了cordova-plugin-splashscreen这个插件，插件配置在应用的config.xml...SplashScreen； SplashScreenBackgroundColor——背景颜色； SplashMaintainAspectRatio——如果值设置为 true，则图像将不会伸展到适合屏幕
movieid=342068&offset=0&limit=1 Request： movieid 电影id offset 初始数据位置（最大为1000） limit 显示数据最大上限值（最大为15...offset=0&limit=1&startTime=2017-12-01%2008:00:00 Request： 后面跟上电影id offset 初始数据位置（最大为1000） limit 显示数据最大上限值...坑3: WKWebView 问题 emmm… 真机调试的时候，Android 端木有问题，显示正常，而 iOS 端啥都不显示，不知道问题出在哪里（我怀疑是 WKWebView 的 CORS 问题，求评论...首先卸载 Ionic WebView 插件 ionic cordova plugin remove cordova cordova-plugin-ionic-webview --save ionic...cordova platform rm ios ionic cordova platform add ios ionic cordova build ios --prod 然后 config.xml
ionic cordova resources是用于一键打包生成各分辨率icon和splash的命令，在使用过程中可能会遇到以下问题： 1....生成图片不全 官方标配尺寸： icon：1024*1024 splash：2732*2732 其中splash其实用2208*2208够用且更好，不容易出现图片太大的错误提示。 2....Bug），这时可以回滚回legacy后再切换到pro： ionic config set backend legacy -g ionic config set backend pro -g 备注说明 参考自下面链接...，先前使用后没放在心上，使得另一部机子遇到同样问题找了半天，遂记录下来：https://stackoverflow.com/questions/45885432/ionic-cant-login-request-post-https-api-ionic-io-login-no-user-found-by-that...无法上传图片 先检查图片格式是否正确且像素尺寸合理、文件不要太大，然后重试一两次。
于是，人们就想： 让Web开发人员可以利用他们所有的HTML、CSS和JavaScript知识，而且仍旧可以同iPhone的重要本地应用程序(如摄像头和通讯录)交互呢？...同理于，React + Cordova，又或者是 Cordova + Weex。 在 Web 方面的经验比较丰富，没有足够的能力来支撑起 React Native 的开发。...这个时候，你基本上不需要考虑 Android 低版本的问题。 如果上面的原因没有说服你，那么你应该选择使用 Ionic。...它可以解决低版本 Android 设备上的 JS 引擎效率问题。 当然，如果基于 Cordova 的应用，还自带 WebView。那么，它可能做不到这么轻的量级。...毕竟一次开发两套逻辑，可能会造成一些浪费和不一致的问题。也或许，有一天你也顺利地转型，成为一个前端工程师。 当你决定使用 React Native 的时候，你还需要考虑几个问题： 安全问题。
UI多屏幕适配 RN平台默认的尺寸就是不带单位的，使用的是设备独立像素，但由于手机的尺寸也越来越多，比如说相同尺寸，像素密不同结果导致UI的物理尺寸也不同，所以通常来说，我们们需要根据屏幕的尺寸对UI的尺寸进行一定比例的缩放...当然，要想X系列组件 支持的前提还是：得设置一个参考屏幕尺寸（设计同学做UI的时候使用的参考屏幕尺寸），代码如下： XWidget.initReferenceScreen(375, 667); //iphone...6 屏幕 我们找个UI看看适配前后的区别（sample项目的列表页面，适配前后）： [5s_iphoneX_iphone Xs Max_before.png] [5s_iphoneX_iphone Xs...UI布局页面适配如下（sample项目的UI组件页面，适配前后）： [5s_iphoneX_iphone Xs Max_UI_before.png] [5s_iphoneX_iphone Xs Max_UI_after.png...在Xs Max上，UI组件由之前偏小，后适配后，相对应的都放大了也显得自然了(大屏、高分辨率屏幕上UI尺寸太小看着比较吃力) 可能有同学想，X系列组件都做了屏幕适配但一些特别情况下，可能不需要作适配怎么办
___ 关于iPhone XS系列手机的那些新亮点 大屏、双卡、A12仿生芯片成重要亮点 除了一如既往更强劲的运算性能，刘海屏普及，iPhone XS系列，终于提供更大尺寸的屏幕，分别是5.8英寸的iPhone...XS和6.5英寸的iPhone XS Max。...[2.png] iPhoneXS基本配置 新款iPhone虽壕，兼容适配问题仍在 新一代的iPhone在性能和使用上有了大幅度的提高，大部分手游应用厂家仍最关心新机型的适配问题...刘海屏问题仍在** “侧边任务指引遮挡，倒过来屏幕按不上技能” [3.jpg] “系统下移方案导致布局问题（截断、错乱，按钮热区错位）” [4.jpg] **2....[6.png] iPhone XS MAX售价 腾讯WeTest平台作为一站式品质开放平台，目前已第一时间入库iPhone XS系列机型，助力厂商/开发者们低成本、高效率，解决产品兼容性问题。
从设计方面来看，做手机界面设计的尺寸一般分为iPhone和Android两种设备。...Android的常用逻辑分辨率： Android的常用逻辑分辨率：参考屏幕尺寸大全 360 * 640 、 360 * 720、 360 * 740、 360 * 760、 360 * 780、 360...* 800 411 * 731 480 * 853 iPhone的分辨率 设备 逻辑分辨率(point)(pt) 物理分辨率(pixel)(px) 屏幕尺寸(diagonal) 缩放因子(scale...1080 x 1920 5.5英寸 @3x 401 9:16 iPhone X/XS 375 x 812 1125 x 2436 5.8英寸 @3x 458 9:20 iPhone XS Max 414...iPhone 12 Pro Max 428 x 926 1284 x 2778 6.7英寸 @3x 458 全新 iPhone 12 发布，再谈 iPhone 屏幕尺寸 屏幕尺寸 屏幕尺寸是指屏幕的对角线长度
PhoneGap PhoneGap 恐怕是最老的一个框架了，相信很多人都已经听说过甚至使用过它，但是PhoneGap是基于开源的 Cordova 商业版本。...创建它的一个主要动力是基于一个几乎每一个单独 的iPhone开发新手都要面对的简单事实：Objective-C是一个对Web开发人员来说非常陌生的环境，并且Web开发人员的数量远远多于 Objective-C...问题是，是否有人可以开发一个框架，让Web开发人员可以利用他们所有的HTML、CSS和JavaScript知识，而且仍旧可以同iPhone的重要本地应用程序(如摄像头和通讯录)交互呢？...框架我最后选择ionic ,ionic集成cordova，在ionic中的ngcordova 可以对原生设备的调用。...http://ionicframework.com/ ionic 官网 http://www.ionic-china.com/index.html ionic中文网 http://ngcordova.com
JavaScript框架来搭配 ---- 2、Ionic 优点： 国外的一款接近原生的Html5移动App开发框架，免费开源。...漂亮的界面，追求性能，专注原生，免费开源 Angular JS MVVM 开发理念，数据双向绑定 基于Cordova，可以使用 Cordova 的插件 缺点： 需要掌握 HTML + CSS +...Angular JS ，学习路线陡峭 Ionic 框架相比于原生的 Cordova 有所差异，Cordova 某些官方插件可能不适用于Ionic ---- 3、Dcloud 优点： 国内厂商，中文文档...解决了哪些问题？...可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能 实现了消息推送 它解决了上述提到的问题，这些特性将使得 Web 应用渐进式接近原生
iOS设备的分辨率和尺寸(参考The Ultimate Guide To iPhone Resolutions) 分辨率 点（point）： 开发过程中，所有基于坐标系的绘制都以point为单位，point...是4.7英寸，iPhone11是6.1英寸等，这里的数字是指手机屏幕对角线的物理长度，实际上会是Physical Pixels的像素值会渲染到该屏幕，而不是Render Pixels的像素值，屏幕上会有...- 2x iPhone 和 iPod touch 显示屏自动加载的图片版本 MyImage@3x~iphone.png - 3x iPhone and iPod 显示屏自动加载的图片版本 设计和开发之间的多屏适配问题...现在iPhone的屏幕尺寸也不再单一，那么现在以怎样的流程来进行iOS的研发更合适呢？...一个基本思路是： 选择一种尺寸作为设计和开发基准 定义一套适配规则，自动适配剩下两种尺寸 特殊适配效果给出设计效果 这个问题很早之前在知乎上已经被讨论，附上链接：手机淘宝设计师pigtwo的回答
iPhone手机屏幕尺寸一般指：物理像素，ps像素。 iPhone的app现在一般适配2倍图和3倍图。...XR,iPhone 11 2倍图 iphontX，iPhone XS， iPhone XS Max, iPhone 11 Pro, Phone 11 Pro Max, iPhone 12 mini,...iphone6，7，8的放大模式屏幕像素是：（320/568）。iphone6 plus，7 plus，8 plus的放大模式屏幕像素是：（375/667）。...下面是iphone的ps像素（手机截图尺寸）： iphont4,iphone4s 像素尺寸： 3.5英寸屏（640/960） iphone5,iphone 5s,iphone 5se 像素尺寸：...1080/2340） iphont6 plus,iphone7 plus,iphone8 plus像素尺寸： 5.5英寸屏 （1242/2208） iphoneX，iPhone XS，iPhone
这里最大的不同是没用附加ng-app 到body标签（目的是是让Ionic知道应用存在的地方），而是使用了： 根组件将在这里被创建，通常你的入口应用在这里注入。...接下来我们看到从ionic-native导入 StatusBar，因为我们通过Ionic2使用Cordova来访问本地功能，就像控制 status bar。...Ionic Native是由Ionic提供的服务以便于方便使用Cordova插件。...尽管你不用为了使用Ionic Native而包含Native functionatilty，你可以直接使用Cordova插件。 2....Root Components 模版 当我们创建根组件是我们提供了一个模版给组件，就是被渲染到屏幕的内容。1）.这里是我们在浏览器运行时根组件的样子： ?
一.iPhone 各屏幕尺寸表 手机型号 屏幕尺寸(inch) 像素密度（PPI） 逻辑分辨率 （point） 物理分辨率（屏幕分辨率）（pixel） 缩放因子（scale factor） 宽高比...PPI的计算公式（勾股定理）： 其中，X：长度像素数；Y：宽度像素数；Z：屏幕尺寸即对角线长度 以根据iPhone4/iPhone4s为类，计算PPI的计算值: = 329.65 pixcel...屏幕尺寸 指的是显示屏的对角线长度，以下为iPhone5s、iPhone6s、iPhone6Plus屏幕尺寸规格示意图： 4....iPhone 4的屏幕物理尺寸还是3.5寸，分辨率为640 × 960，提升了4倍。也就是说，原先的1 point可以容纳4个pixel。...； 但这个方案的缺点就更明显了: 所有 iOS UI 元素尺寸在屏幕上的实际物理面积一下子就变小了，比如标签栏或导航栏按钮的物理高度只有原来的 81.5% ， 点击面积就只有iPhone 6的 0.815
直接播放.PNG 而这两种方式，可分别使用以下方式处理： 一、使用Cordova插件播放。...以官网推荐的cordova-plugin-streaming-media插件为例： 首先安装插件，并安装相应的native模块： ionic cordova plugin add cordova-plugin-streaming-media...然而当你运行查看效果时，会发现有问题：文字图标不显示，这个时候你可以修改node_modules下的源码(videoangular2或者@ionic)，一般我不建议(因为当删除并重新npm install...因为问题还存在着：当全屏时，尤其是android，会黑屏，可以开启GPU硬件加速来解决，但也并不是很好的方法，此时可以使用伪全屏——用样式模拟，这样又涉及到横竖屏切换的监听等等，这里不详细说明，有兴趣可以看看此文...最最后，就算你解决了上述问题，你还是需要大致处理下以下问题： 视频滚出可视区域，应停止播放； 当前视频点击播放，其它视频应该全部停止； 全屏播放完成应退出全屏； 播放时应自动隐藏播放控件，点击屏幕时显示播放控件
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
