Angular Ionic app built with Capacitor + NativeScript
This example app demonstrates the following:
- Angular Ionic app built with Capacitor
- Usage of @nativescript/capacitor to help solve real world issues
- Native iOS/Android UI with Web Dom interactions
- How to build a native video streaming player yourself with NativeScript for Capacitor
- How to handle battery level change system notifications for iOS and Android using NativeScript for Capacitor
The Musical video clips used herein are only samples from recorded musical productions for free fairplay use and not intended to be high quality reproductions of those musicals in anyway.
nativeflix.mp4
Reference docs
Take it for a spin
Run this after cloning:
npm run clean
NOTE: If you get prompted about installing webpack you can choose 'y'. This may prompt when using npm 7+.
It will set things up.
Now build it and prepare:
npm run build:mobile
npx cap sync
You can now run on either iOS or Android:
npx cap open ios
// or...
npx cap open android
Troubleshooting
Android
- If you see a build/run issue related to 'node', for example like this:
> Task :capacitor-android:compileDebugLibraryResources
> Task :app:runSbg FAILED
Error executing Static Binding Generator: java.io.IOException: Cannot run program "node": error=2, No such file or directory
This means Android Studio could not find node. Close and open Android Studio via Terminal as follows which will help:
open -a "Android Studio"
- If you see an issue like this in the build log:
Caused by: java.lang.ClassNotFoundException: Didn't find class "io.nstudio.ngconf2021.CustomActivity" on path: DexPathList
This usually means a good project clean is needed. Try doing a full 'Project Clean' in Android Studio and build/run. If you still see the issue, try running once more - usually related to a clean/build cycle with Android Studio.
iOS
Picture-in-Picture mode works only on a real device. You can plug an iPhone in and launch on your phone from Xcode to experience the PIP mode.
-
1.安装Ionic和Cordova。 $ npm install -g cordova ionic 2.执行创建app目录 ionic start yourAppName tabs yourAppName 为项目名称 3.在app目录下执行 cnpm install 看到All packages installed 就表示项目已经创建完成。 4.执行 ionic serve (运行在浏览器中)
-
导语： 近年来，随着移动端app的广泛使用，对于降低app的开发成本，热更新等诉求日益增多。更多的APP采用了Native结合H5的混合开发模式，因此也衍生了大量的Hybrid框架。这其中有对载入H5做通信和性能优化的框架，如Phonegap等，也有使用JS脚本生成本地代码的框架，如Facdbook推出的react native这一类的框架。 React Native 正如项目的名称表露的那样，R
-
1.1.1.介绍： mui是最接近原生App体验的前端框架。 极小：100k的js文件，60k的css文件。原生编写，不依赖任何三方框架 极强：xcode和Android studio里所有原生控件都具备 高性能：精练的代码、适时的5+原生动画调用，达到原生应用的体验 多端发布：编写一套代码，iOS、Android、浏览器、微信App、百度直达号、流应用全覆盖 1.1.2.Mui能力？ HTML5
-
一、打包报错 Error: Metadata version mismatch for module E:/Ionic 2/kit/node_modules/@ionic-native/device/index.d.ts, found version 4 , expected 3 暂未解决 参考https://github.com/ionic-team/ionic-native/issues/26
-
ionic从哪儿来？ 什么是Ionic？ 什么是Cordova？ 什么是AngularJS ？ 我们为什么选ionic ionic从哪儿来？ 纵观互联网的历史，我们不难发现。计算机程序程序的发展都是一下几个规律和特点的。第一，都是由最初的CS结构和BS程序构成。但是，随着互联网的发展。BS结构的程序普及率和市场比重越来越大。这也是发展趋势，这也得益于网络、硬件的飞速发展。以前从拨号上网到现在的家用
-
$ionicActionSheet上拉菜单； $ionicBackdrop.retain()显示背景层，$ionicBackdrop.release()隐藏； ion-refresher下拉刷新<ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>； $ion-checkbox复选框； $ion-ra
-
在这一章,我们将要了解Ionic的下载和安装过程中所有必需的依赖关系。 选择平台 首先,我们需要首先注意使用最新稳定版的的Ionic构建应用程序的最低要求。Ionic目标最新的iPhone和Android设备。我们支持iOS6 +,和Android 4.0 + (尽管2.3应该可以运行)。然而,因为有很多不同的Android设备,某些人可能无法正常运行。像往常一样,我们正在寻找帮助测试和改进我们的
-
ionic react-native和native开发移动app那个好 ? 移动端开发如何选型？这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比。欢迎大家补充指正 一、 跨平台特性 ionic : write once, run anywhere ( 一次开发，随处运行，学习成本低 会html css js就可以学会 ) 不涉及到系统级
-
一 、前言 由于个人水平有限，在这里只是分享一些基于angularjs开发组件的一些思路~ 摘要：无UI组件类、有UI组件类、有UI组件类型2。 二 、无UI组件类 顾名思义，这类组件没有任何表现形式出现在用户界面上，只是一般功能的实现者，也就是平时所用到、所需要开发的 Factory。它一般由 controller 进行调用，用于处理并返回数据。重点是，Fatory 某些方法最好使用 $q(p
-
目录 一、概述 二、使用步骤 三、插件常用功能 一、概述 设备插件device可以获取手机设备的信息，比如设备的唯一编号UUID。很多APP都有根据使用者喜好推荐相关信息的功能，这就是通过设备插件获取UUID实现的。device插件可以判断当前操作系统的类型。 二、使用步骤 第一步：安装device插件 // 安装device插件 > ionic cordova plugin add c
-
1. http://ngcordova.com/docs/ 2. http://docs.phonegap.com/en/edge/index.html ----- phonegap(cordova API)
-
<!DOCTYPE html> <html ng-app="TravelApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <link href="
-
更改历史 * 2017-12-31 胡小根 初始化文档 1 历史、现状和发展 1.1 历史 1.2 现状 1.3 发展 难点：预测发展方向。 2 安装和使用 2.1 安装 2.2 使用 2.3 示例 2.4 最佳实践 难点：最佳实践，超出于示例，应该归纳总结出积累的技巧。 3 同类技术对比 难点：归纳比对项 参考资料 xxx书籍 xxx博客 xxx类库说明
-
Ionic Framework 是一个移动 UI 工具包，用于构建高质量，跨平台的本机和Web应用程序体验。只需一个代码库，就可以更快地移动代码，并可以在JavaScript和Web上随处运行。
-
NativeScript Ionic Template {N} Native mobile Apps with NativeScript and Web Apps (Mobile First) with Ionic styles and components sharing the same code with Angular! This template uses the default nav
-
ionic select 的 select 相比原生的要更加美观些。但是弹出的可选选项样式是浏览器默认的。 每个平台上的可选项样式都是不一样的，在PC电脑的浏览器上，你会看到传统的下拉界面，Android 上会弹出单选按钮选项，iOS 有个滚轮操作界面。 实例 尝试一下 » 运行效果如下：
-
ionic Range 是一个滑块控件，ionic 为 Range 提供了很多种默认的样式。而且你可以在许多种元素里使用它比如列表或者 Card 。 实例 尝试一下 » 运行效果如下：
-
主要内容：ionic checkbox（复选框）ionic checkbox（复选框） ionic 里面的 Checkbox 和普通的 Checkbox 效果上其实相差不大，只是样式上有所不同。 以下实例演示了多个复选框的列表。 注意，每个选项的 item 类后需要添加 item-checkbox 类。 复选框可以使用 checkbox-assertive 来指定颜色。 尝试一下 » 运行效果如下：