文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

【风雨欲来的Hybird】（1）Capacitor——为了原生，RN、NS、Weex的下一个强劲对手

Capacitor是由ionic团队最新开发维护的，用JavaScript为IOS、Android和Web构建跨平台、响应式Web应用框架容器。关键字是：容器。...其实Capacitor是ionic4的衍生品，如果说Stencil是跨框架组件开发，那Capacitor就是跨平台原生封装。...来看看Github上的官方介绍： Capacitor是一个跨平台的API和代码执行层，可以很容易地从Web代码中调用Native SDK，并编写您的应用可能需要用到的自定义Native插件。...Capacitor正在由Ionic Framework团队设计，作为Cordova的最终替代品，但向后兼容Cordova插件，它可以在没有Ionic Framework的情况下使用，但很快它将成为Ionic...开源 Capacitor是完全开源（MIT），由Ionic及其社区维护。 原始Web 使用可以工作数十年的标准网络技术构建应用程序，并轻松访问应用程序商店和移动网络上的用户。

4K40

【技巧】ionic后FileTransfer时代的文件传输

FileTransfer是常用的Codrodva插件之一，在过去的几篇文章中都能看到它的身影： Cordova插件使用——Office文档在线预览那些事 【技巧】ionic3视频上传 【技巧】Ionic3...它简称XHR，中文可以解释为可扩展超文本传输请求，具体概念自行找度娘。有人可能对它没概念，但是基于它封装的库，如HttpClient、Fetch、ajax等都是较为熟悉的吧？...const xhr = new XMLHttpRequest(); const url = 'http://192.168.96.64:8089/temp.apk'; xhr.open("GET...尝试把Blob数据保存到手机上 借助file插件用于保存文件: ionic cordova plugin add cordova-plugin-file npm install --save @ionic-native...= xhr.response; const fileName = 'temp.apk'; console.log(blob); if(blob){

2.3K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    深度测评 | 五大主流多端开发框架全面对比

    1.1 React Native RN 是 Facebook 于 2015 年 4 月开源的跨平台移动应用开发框架，到现在已经发展了 6 年多了，目前最新版本是 0.66，20211年12月10日还有更新发布小版本...图片 打开 8100 地址，其实就是一个正常的 web 项目，熟悉 vue 的同学一眼就能看出来了，IonicVue 是作为 Vue 的一个插件存在的。...image image 那么看一下如何在模拟器上预览吧，首先需要安装下边两个工具，是前置依赖。...ionic capacitor run ios -l --external 选择一个本地的模拟器，之后就可以看到界面了，但是因为笔者本地的 Xcode 是 11 的老版本，会报编译错误，所以需要升级到最新的...图片 启动后需要 adb devices 检查一下，如果设备在线，再进行下一步： ionic capacitor add android ionic capacitor run android 这一步第一次非常非常慢

    7K30

    跨平台开发框架到底哪家强？5款主流框架横向对比！

    1.1 React Native RN 是Facebook于2015年4月开源的跨平台移动应用开发框架，到现在已经发展了6年多了，目前最新版本是0.66，2021年12月10日还有更新发布小版本，整体来看框架还是非常有生命力的...global add expo-cli 这里不说配置源什么的了，如果慢的话，可以切换国内 yarn 源，安装完毕后，直接使用 expo init AwesomeProject 安装项目，项目安装完毕后进入项目执行...打开8100地址，其实就是一个正常的 web 项目，熟悉 vue 的同学一眼就能看出来了，IonicVue是作为 Vue 的一个插件存在的。...那么看一下如何在模拟器上预览吧，首先需要安装下边两个工具，是前置依赖。...启动后需要 adb devices 检查一下，如果设备在线，再进行下一步： ionic capacitor add android ionic capacitor run android 这一步第一次非常非常慢

    11.3K20

    实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端

    Axure设计App,使用WebStorm开发(3) – 构建页面架构 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI 实战使用Axure设计App,使用WebStorm...App服务端 咱们选择了Express作为App的服务端技术，Express需要先安装NodeJS，在之前的Ionic安装部分，已经安装好了NodeJS。...Express 框架非常的简单易用，使用 app.get app.post 就可以实现一个Http的Method定义。...OrderService 中的请求如all 方法，直接使用: return $http.get(CommonService.buildUrl(orders)); 就可以将原来的MockDB请求转向了...如果你使用 ionic emulate ios ionic emulate ios 是可以直接访问的: ? 但是如果你使用浏览器来调试，你会在控制台看到浏览器的跨域请求拦截： ?

    2.9K80

    利用 Blob 处理 node 层返回的二进制文件流字符串并下载文件

    所以经过讨论，就在后端根据文件地址直接转成二进制流形式，返回给前端合并，再进行下载 文件转换二进制流 在 nodejs 中将文件转换成二进制是比较简单的，先通过接口获取文件下载地址，由于是不同域的地址，...也就是必须通过网络请求得到这个文件，不能使用 ==fs.readFile== 读取文件，可以使用 ==get== 请求获取读写，编码设置成二进制 ==binary== // 后端 node 所写的接口(...ctx.body = binaryFiles }, handleFiles(url) { return new Promise((resolve, reject) => { http.get...当然也可以在后端直接下载这个文件，然后使用 ==fs.readFile== 以 ==binary== 编码读取得到，但没必要下载，下载完还要删除，多此一举 前端处理下载 问题来了，也是坑了我一个下午的问题，如何在前端...构造函数的时候，先利用 Buffer 将二进制字符串转为 Buffer 对象，再作为 Blob 的第一个参数，指定好第二个参数的类型 type 即可 博客地址：https://ainyi.com/65

    12.6K10

    Spring Boot 之 Spring Data JPA（一）1、新建工程2、配置数据库3、代码结构4、从数据到逻辑总结

    Test，如下图所示： 启动执行测试用列 运行结果一闪而过，结果如何呢？...设置主页（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 2 中的创建一个闪视卡片组件 1. 创建一个新的应用作为例子 2. 什么是组件？ 3. 创建组件模版 4. 创建组件类 5. 创建 CSS 动画 6.

    5.3K50

    Harbor制品仓库资源配额的使用

    对于较大的层文件，客户端通过 PATCH Blob 请求分块推送。在所有块文件都推送成功后，客户端会发起 PUT Blob 请求，让 Artifact 仓库知道该层文件推送完成。...4．PATCH Blob Harbor 接收到 PATCH Blob 请求时，会将写入存储的字节数记录在 Redis 数据库中。...在 Redis 中将该 Session ID 作为键值。Harbor 从每个 PATCH 请求中获取块的大小，并将其更新为该 Session ID 对应的值。...在所有的 PATCH 请求都结束后，在 Redis 中存放的就是该层文件的大小，如图所示。 ? 5．PUT Blob Harbor 接收到 PUT Blob 请求，意味着该层文件全部上传完毕。...如果可以申请到足够的配额，那么项目的配额被更新，并持久化 Blob 数据；如果无法申请到足够的配额，那么拒绝 PUT Blob 请求，如图所示。 ?

    3.1K20

    ionic hybrid app：产品还是玩具？

    Kind of like "Bootstrap for Native," ionic主要职责是作为app的前端UI框架，提供基本的样式以及各种UI组件，号称相当于native版的Bootstrap...基于Cordova的 Hybrid APP Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。...（以上描述摘自百度百科） Cordova最早的名称是PhoneGap，后来被Adobe收购，Adobe将PhoneGap的核心代码抽出，贡献给Apache作为开源项目。...通过WebView能调用的系统功能只有WEB页面的一些基本功能，如页面展示和HTTP请求。如果要调用系统的其它一些Native功能，比如Camera,震动等等，则需要通过Cordova来实现。...4. ionic的适用范围 对于上文中的问题，ionic的官方博客中专门有一篇文章有说明。

    6.5K80

    Ubuntu 16.04搭建ionic开发环境

    前端开发框架ionic，以假乱真的页面和流畅的运行速度直逼原生应用，让你情不自禁的爱上了她，下面来简单介绍下ionic。 Ionic是目前最有潜力的一款 HTML5 手机应用开发框架。...先决条件： 注：以下命令除有sudo说明外都是在普通用户权限下执行 要有nodejs环境. sudo apt install nodejs 做软链接(ionic脚本命令中nodejs的命令是nodejs...nodejs` /usr/bin/node 要有Java环境 使用oneinstack一键PHP/Java工具安装sun-JDK 要有Android SDK环境 安装32位运行库 sudo apt-get...apk路径 myApp/platforms/android/build/outputs/apk/android-debug.apk 4.运行项目 ionic emulate android 免责声明：...转载本站文章请保留原文链接，如文章内说明不允许转载该文章，请不要转载该文章，谢谢合作。

    2.7K10

    ionic hybrid app：产品还是玩具？

    Kind of like "Bootstrap for Native," ionic主要职责是作为app的前端UI框架，提供基本的样式以及各种UI组件，号称相当于native版的Bootstrap...基于Cordova的 Hybrid APP Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。...（以上描述摘自百度百科） Cordova最早的名称是PhoneGap，后来被Adobe收购，Adobe将PhoneGap的核心代码抽出，贡献给Apache作为开源项目。...通过WebView能调用的系统功能只有WEB页面的一些基本功能，如页面展示和HTTP请求。如果要调用系统的其它一些Native功能，比如Camera,震动等等，则需要通过Cordova来实现。...4. ionic的适用范围 对于上文中的问题，ionic的官方博客中专门有一篇文章有说明。

    4.1K10

    PWA入门：手把手教你制作一个PWA应用

    本文将通过一个简单的列子（一个简单的邮编查询app）向大家展示PWA的开发流程，项目参考：Traversy Media - Build a PWA With Vue & Ionic4。...初始化vue项目： vue create vue-ionic-pwa 3. 因为ionic的路由依赖于vue-router，所以接下来安装 vue-router： vue add router 4....在 src/main.js 中添加对ionic的引用： ... import Ionic from '@ionic/vue' import '@ionic/core/css/ionic.bundle.css...搜索组件 我们在 src/components 下面新建 ZipSearch.vue 文件作为邮编搜索组件，主要逻辑为当用户输入一串字符，按下搜索按钮，如果输入合法则触发get-zip事件，如果不合法则给出提示...，再查询刚刚的那个邮编，发现在网络请求失败之后立即切换用本地缓存的数据： image.png 好了，一个简单的PWA就已经制作完成了。

    5.7K40

    【开发指南】（四）Ionic3快速上手并了解这些

    Ionic这几个网站是需要经常看的，应该了解过才执行后面步骤，其中强烈要求至少先撸一遍官网的组件和API文档。...开发环境配置 开发ionic项目，我们经常需要使用ionic-cli，其内置了很多命令，基本每个命令都带可选的参数，如参数--help，要想知道某个命令的详情，在敲入命令后面加上--help即可，如敲入以下命令...成功提示 其中，我们可以cd myDemo进入到项目，然后根据上图，敲入命令在浏览器预览： ionic serve 也可以两步并作一步执行： cd myDemo && ionic serve 命令执行完...image.png 2、原生项目配置 用来配置原生项目内容，主要是config.xml文件，最基本是修改id，它作为应用的唯一识别身份，取个不会重复的，如： <widget id="com.flower.binfen...$colors: ( primary: #387ef5, secondary: #32db64, danger: #f53d3d, light: #f4f4f4,

    4.5K20

    如何优雅的实现消息通信？

    semlinker/awesome-typescript 1.8K 一、背景 作为一名 Web 开发者，在日常工作中，经常都会遇到消息通信的场景。...这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而 HTTP 请求与响应可能会包含较长的头部，其中真正有效的数据可能只是很小的一部分，所以这样会消耗很多带宽资源。...微内核架构模式允许你将其他应用程序功能作为插件添加到核心应用程序，从而提供可扩展性以及功能分离和隔离。...在西瓜播放器内部，定义了一个 Player 类来创建播放器实例： let player = new Player({ id: 'mse', url: '//abc.com/**/*.mp4' }...而当 poster 插件监听到播放器的 destroy 事件时，就会执行清理操作，比如移除已绑定的事件。

    2K50
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券