首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    构建具有用户身份认证的 Ionic 应用

    如果你需要开发原生功能,使用 web 技术是无法实现的,但是有些原生插件可以实现。 Ionic Native 是这些插件的精选集。 我第一次使用 Ionic 是在 2013 年底。...LoginPage ], providers: [ OAuthService, ... ] }) 运行 ionic serve,确认 LoginPage在 app 首次加载后可以展示出来...然后运行以下命令安装 ios-deploy、构建 app 并在你的设备上运行。...image.png Android 为了模拟或者部署到 Android 设备上,你首先要安装 Android Studio。在安装过程中,它会提示你将 Android SDK 安装到哪里。...如果你已经安装了Android Studio,请确保打开它以完成安装。 为了部署到 Android 模拟器,运行 ionic cordova emulate android。

    23.3K50

    Ionic3 Android调试

    不过在此之前,必须要将ionic项目成功打包成Android应用,有关 ionic打包成Android应用的具体教程,请参考以下文章: Ionic3 Android打包 模拟器调试 模拟器调试也就是启动...android模拟器,然后在模拟器上看效果。...可能是因为直接使用电脑上的cpu,然后这个和电脑的配置也有关系吧。 真机调试 除了使用模拟器调试,还可以使用真机调试。...准备工作完毕,接下来直接执行以下命令 cordova run android image.png 如果不出意外,手机上会打开那个app的界面。...日志是开发过程中非常重要的一个功能,有时候很多不懂的东西,打印出来一看可能就明白,以下是真机调试中查看日志的方法:https://jingyan.baidu.com/article/db55b609fde96d4ba30a2fa9

    1.1K40

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

    首先是 Nodejs 的命令行工具安装: yarn global add expo-cli 这里不说配置源什么的了,如果慢的话,可以切换国内 yarn 源,安装完毕后,直接使用 expo init AwesomeProject...使用脚手架的生成的目录和正常的 React 项目差不多,入口在 App.tsx 文件,支持修改后的 hotRload,整个流程走下来对前端开发来说门槛不高,至少到调试开发阶段,如果只单纯涉及到 UI 编写...启动后需要 adb devices 检查一下,如果设备在线,再进行下一步: ionic capacitor add android ionic capacitor run android 这一步第一次非常非常慢...性能我们直接 adb shell 进入设备后,使用 top命令来观察 app 进程情况: 其中帧数我们用android的开发者功能,GPU截图来标识,编译速度直接用 time 命令统计, 均采用第一次...AVM 笔者也不太清楚为什么这么快,这确实是让笔者很吃惊,但是有一点,AVM 在笔者的android模拟器上安装失败,所以笔者是用真机测评的,可能会有一些影响,真机的性能更高一些。

    7.1K20

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

    使用脚手架的生成的目录和正常的 React 项目差不多,入口在 App.tsx 文件,支持修改后的 hotRload,整个流程走下来对前端开发来说门槛不高,至少到调试开发阶段,如果只单纯涉及到 UI 编写...图片 启动后需要 adb devices 检查一下,如果设备在线,再进行下一步: ionic capacitor add android ionic capacitor run android 这一步第一次非常非常慢...性能我们直接 adb shell 进入设备后,使用 top 命令来观察 app 进程情况: 图片 其中帧数我们用 android 的开发者功能,GPU 截图来标识,编译速度直接用 time 命令统计,...均采用第一次 debug 启动耗时的时间。...AVM 笔者也不太清楚为什么这么快,这确实是让笔者很吃惊,但是有一点,AVM 在笔者的 android 模拟器上安装失败,所以笔者是用真机测评的,可能会有一些影响,真机的性能更高一些。

    5.3K30

    Windows下Ionic 开发环境搭建

    听起来还是很诱人的,事实上这也是目前最火的一种 Hybrid APP 开发方式。 接下来介绍如何在 Windows 下搭建 Ionic 开发环境。...下载 Nodejs for Windows 并安装 下载地址:https://nodejs.org/download/ Windows 下安装 Nodejs 环境很简单,在 Nodejs 官网下载正确版本后安装即可...app 创建 APP 进入 cmd 窗口,输入如下指令: ionic start myapp 这里的 myapp 是你的 APP 的名字 进入创建的 APP 目录 cd myapp 选择配置 Android...环境 ionic platform add android 打包生成 APP ionic build android 运行 APP 需要先新建虚拟机或者连接手机。...(位于 jdk1.6.0_24\bin 目录下),把上两个软件所在的目录添加到环境变量path后,即可使用生成签名文件的命令: keytool -genkey -v -keystore demo.jks

    3K30

    使用 React Native 重写大型 Ionic 应用后,我们想分享一下这八个经验

    其 1.0 和 2.0 主要使用 Ionic 实现,Ionic 1.x 的主要问题是 Angular 1.x 已经落后了。...在 APP 发布的这几天里,顺便写了篇文章分享一下经验: 你遇到的问题,别人基本到遇到过 版本间差异太大,导致下游配套 新的组件坑更多 大部分时间,你都是在重写 UI 最麻烦的地方,其实是搭建环境 真机才能反映问题...并且,我们可以使用直接使用大量的 Node.js 的库,如 moment。 由于,这是我第二次尝试 React Native,总的来说体验比第一次好多了。...最麻烦的地方,其实是搭建环境 这一点和 Web 应用开发是类似的,在搭建 Web 应用开发环境的时候,我们需要: 设计构建系统 搭建持续集成 完成自动化发版 等等 因而,有了上面的 UI 结论后,你也熟悉了...由于,我日常用的手机是 Android 系统,而 React Native 的 Web 资源问题,实际上在 Android 和 iOS 上都会出现的。

    1.8K60

    【技巧】ionic3优雅解决启动前、后黑白屏问题

    这里只说明androd和ios的情况。 1、启动前黑白屏 启动前黑白屏问题,仅存在于android,是android应用的通病,ionic表示这锅它不背。...所以解决方式有好几种,可以看这两篇文章: Android启动页优化,去黑屏实现秒启动 Android启动页黑屏及最优解决方案 具体应用在ionic上可以参照这个: 快速解决ionic安卓主题启动时短暂的黑屏或白屏问题...; 上述两步的可以直接下载已放到github上的插件cordova-fix-blackscreen。...然后安装该插件: ionic cordova plugin add 本插件本地或远程路径 验证一下,会发现在platform目录android里的res/values里会多出styles.xml文件。...我们可以验证一下,执行命令运行看效果: ionic run android 2、启动后黑白屏 ionic启动页使用了cordova-plugin-splashscreen这个插件,插件配置在应用的config.xml

    3.6K60

    ionic和cordova初探--从安装到运行首个app

    1.安装node 许多前端工具的安装都依赖于node的包管理器npm,Node官网: https://nodejs.org/ 安装完成后在cmd中输入 npm -v 回车。...3.安装安卓的SDK 打开Android Studio,File --> Settings --> 搜索sdk,找到对应的sdk进行安装即可。 需要在Path环境变量中添加两个值。...(y/N) 意思是是否要把 iOS 和Android集成到刚刚用Cordova 创建的app中 ,我这里选择y 表示确定。然后就会自动安装缺失的或者更新某些工具版本。 然后就会看到一个提示?...(3)在特定平台执行程序 1.在浏览器打开,进入工程根目录,输入cordova run browser,然后浏览器自动访问http://localhost:8000/ 2.在安卓上编译Cordova APP...默认是debug版本,打包出来的apk在 你创建的项目根目录\platforms\android\app\build\outputs\apk\debug目录下。

    3.4K10

    【初探IONIC】不会Native可不可以开发APP?

    cordova为一移动开发框架,他让我们可以仅仅专注前端代码,然后通过一个开发框架编译形成一个可安装的APP,因为前端代码的特性,所以这种APP是跨平台的,可以最大程度的提升开发效率,因为只需要前端人员...Native同事开发的,而cordova打包后的Webview容器是公司开发的,这里所谓跨平台,其实是有一个公司做出了这种平台性产品做出了支撑。...③ 视觉样式比较固定,如果一个公司有自己的规范可能不太适合 ④ 因为angular与IScroll固有的特点,做出来的应用可能体验不会太好 Ionic安装 上面我们在浏览器简单感受了下Ionic,接下来我们需要将之放到移动设备上运行...tabs 这里需要安装Andriod开发环境,不然的话,下面几个命令会报错,如果有Andriod环境的话,就能成功运行了: $ cd myApp $ ionic platform add android...$ ionic build android $ ionic emulate android 如果正常的话,技能弹出模拟器: ?

    2.4K80

    Ionic3 自动化发布

    我们知道我们的ionic项目是利用npm进行包管理的,npm是根据package.json文件安装依赖的。...还有另外一个原因,我们打包apk文件的时候,是需要依赖SDk和安卓平台的,安卓平台我们一般是通过执行 ionic cordova platform add android 命令来添加,但是我们不可能把这个提交到...这个时候,我们可以在 jenkins 构建的时候 执行这两个命令: npm install 和 ionic cordova platform add android 这样确实可以,但是太慢了,每次执行...我们可以第一次手动再这个目录下执行 npm install 和 ionic cordova pllatform add android 这两个命令,这样再打包的时候 就不会报错了。...如果是在第一次打开jenkins主页的时候,选择安装了它建议安装的插件,那么这个插件已经有了,其它情况 不太清楚,如果没有就自己安装一下插件。

    58220

    实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目

    本文将继续上篇,使用Ionic 框架来开发应用。   1. 首先安装NodeJs:https://nodejs.org/ 在NodeJs 网站上找到自己平台的安装包,执行安装即可。 2....npm install -g cordova ionic 在Mac下安装的时候,可能会出现没有权限的问题。...使用 ionic start DeliveryApp blank 创建这个 App应用,DeliveryApp 是咱们这个实例的项目名称。...WebStorm 开发环境 WebStorm下载地址:https://www.jetbrains.com/webstorm/ 下载并安装 WebStorm 安装完成后,使用 WebStorm 打开文件夹...截止到现在基于 ionic 的工程搭建好了,开发需要使用的 WebStorm 弄好了。下篇我们可以开始按照 Axure 里的需求开发每个页面了。(本文最终完成的工程代码会放在 github上)

    3.3K80

    Ionic2 坑の补充

    install对应的zip包,同样,在MAC上也出现一样的问题,甚至连ionic本身都安装不了,都是需要用户权限进行进一步的解压,下载,保存处理。...于是我们选择跳过install zip阶段,使用以下指令: ionic start app --v2 --skip-npm ,跳过过后,自然会怀疑自己的项目是否成功编辑。... 2、ionic2第一次build项目的坑:在第一次build项目的时候,会从maven上下载相关的cordova的lib和gradle的lib,这个时候会因为国内的墙的问题.../platforms/android目录下的build.gradle文件: android根目录下的build文件.png 2、.....这里表达你的cordova版本与ionic 需要的cordova编辑的版本不同,这个时候只需要先删除本机器上的cordovanpm uninstall -g cordova然后再下载6.0.0

    1.6K20

    【Weex一瞥笔记】

    /weexteam/weex-toolkit) sudo npm install -g weex-toolkit 如果提示.xtoolkit的权限问题,则执行下述命令后再次安装: mkdir ~/.xtoolkit...&&chmod 777 ~/.xtoolkit 安装结束后你可以直接使用 weex 命令验证是否安装成功,它会显示 weex 命令行工具各参数: ?...添加android平台 weex platform add android 一直等待下载安装完成,就会发现platform目录下多了个android的项目目录,然后执行: weex run android.../android下的app/build/outputs/apk/,发现文件名为weex-app.apk,而不是playground.apk,所以找不到。...也就是说修改配置文件,这里都不会动态变化,同时用Android Studio打开,包名也是固定死是:com.weex.app。 我猜这是weexpack的bug吧?应该不会一直存在。

    2.2K30
    领券