Cordova

依据Kitten编程猫社区的这个帖子： https://shequ.codemao.cn/comm... 产生的不是可执行文件或者源码，产生的是配置文件，通知执行文件的框架该怎么做的配置文件。必须依赖编程猫软件，能够在网上下载编程猫格局工厂来把bcm文件转为exe文件。不能间接转换成安卓的apk文件。能够参照这个帖子：https://shequ.codemao.cn/comm...但能够通过 Kitten 格局工厂这个软件，将 bcm 转换成 Windows10 平台下能够间接执行的exe文件： 抉择 bcm文件后，点击 一键转换即可： 转换胜利之后的 .exe文件： 能够执行双击，在windows平台上运行利用了： 更多Jerry的原创文章，尽在："汪子熙":

简介在以后挪动端跨平台框架漫天飞的状况下，很多开发者不晓得该抉择哪种框架来进行开发，哪种框架适宜前期保护、稳定性等问题。本文会带大家理解目前市场上比拟风行的一些框架的比照 挪动跨平台开发介绍传统挪动端开发现阶段，以后市面上的手机无非苹果和安卓，两大操作系统能够说各分天下，传统的app的开发就是指原生开发，须要ios工程师和安卓工程师各自进行，ios开发一份，安卓开发一份，安卓应用的是JAVA或者是Kotlin，ios应用的是Objective-C或者是SWIFT，这种开发模式也是最常见的开发模式，从智能手机诞生到明天，始终是最支流的开发模式。 AndroidIosJAVA / KotlinObjective-C / SWIFT传统挪动端开发优缺点长处毛病速度快、性能高、稳定性强、用户体验好后期开发费用高能够拜访手机所有性能开发效率偏低反对大量图形和动画前期保护繁琐可离线应用上线工夫无奈固定跨平台技术的诞生 早在2010年，过后从事 Android 和 iOS 开发的人很少，也不火，所有人都在 “摸着河底过河”，我的项目更没有第三方框架一说，大都是本人写的，不像当初各种的框架满天飞。随着挪动开发的倒退，互联网公司也是层出不穷，有些公司迫于竞争，想要更疾速的更省老本的进行开发，就不再满足 Android 端一套代码，iOS 端一套代码。同时，其余技术畛域和各大公司也都各自推出相干的技术，这样跨平台技术随之诞生，并且开始在公司中生根发芽。因为Android 和 iOS 生态很大，咱们能够把它们比作第一级生态，也有厂商想要颠覆这两个零碎，但都失败了，因而建设次级生态才是最稳当的策略，Android 平台更加凋谢，因而建设次级生态的核心就是 Android，次生态的模式多种多样，比方在 Android 零碎的根底上魔改建设本人的生态，再或者推出各种跨平台技术建设生态。跨平台技术产生的框架切实太多了，很多还没等咱们去学去理解，它们就败落了，也就成为了跨平台技术倒退的一个适度产物。 挪动跨平台开发演进为什么要跨平台开发？作为开发不同利用而应用不同的开发语言，对开发者而言并不是一个坏事。实质上，跨平台开发是为了减少代码复用，缩小开发者对多个平台差别适配的工作量，升高开发成本，进步业务专一的同时，提供比web更好的体验，跨平台开发正是解决了这一问题。 跨平台开发的优缺点因为跨平台技术须要依赖各种框架，各框架品质也参差不齐，老框架就不说了，新框架教程少、开发时遇到的坑多，有的能填上，有的填不上。这就须要框架背地的大厂和社区的反对了。 长处毛病节俭人力、开发成本性能低于原生节俭开发工夫用户体验低于原生多端的一致性包体积变大易上手跨平台框架本身bug、缺点挪动跨平台开发框架解析跨平台技术演进 WebAppWeb App 是指基于 Web 的利用，运行于网络和规范浏览器上，相当于一个网页而后加一个 App 的壳。2014 年 HTML5 的标准规范制订实现，记得过后在网络上 Web App 大有取代 Native App 的声势，但 Web App 有以下毛病，使得它始终是 “配角的心，主角的命” 性能低，操作体验不好无奈调用原生 API，很多性能无奈实现，依赖于网络，网速慢时体验很差，并且没有离线性能，优化不好的话会耗费流量只能做为一个长期的入口，用户留存率低在 Web App 的根底上，又呈现了几个进化者，比方PWA。 WebApp——PWA（Progressive Web App，渐进式加强 Web 利用）PWA（Progressive Web App）意为渐进式加强 Web 利用，它不是一门技术，而是一个概念，他的意思就是应用多种技术来加强 Web App 的性能 总结起来，PWA 的次要的能力就是离线、推送、桌面拜访，能够说 PWA 赋予 Web App 原生的体验，然而 PWA 始终不温不火的起因次要有以下几点： ...

There is a wonderful tutorial Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises written by Bertram Ganz. In this blog, I will show step by step how to package the UI5 application built by this tutorial as a native application into your Android device. Here below are some screenshot of this UI5 running in my mobile phone. (1) install nodejs in your laptop, and add the installation folder to your environment variable. ...

搞了一波cordova后，算是对Hybrid有了一点点微小的认知。为了快速开发，ionic无疑是更好的选择，它底层的打包和通信机制基于cordova实现，在上层实现了自己的UI组件，可以结合Angular或React使用，并且宣称将在未来支持Vue。 环境准备如果已经安装了cordova，则单独安装ionic即可，否则需要一并安装。 npm install -g ionic cordova创建项目通过start命令来新建一个ionic项目。 ionic start my-app并且可以支持传入模板，以及项目类型，具体参考ionic start。 我们在这里创建一个基于angular的tabs导航的app。 ionic start myapp tabs --type=ionic-angular当然也可以直接从一个更完善的模板开始。 ionic start myapp super --type=ionic-angular这几种方式可以都试试看。 运行项目在浏览器运行web版在尝试npm start调用ionic-app-scripts serve启动项目时，发现报错找不到@ionic/app-scripts模块，尝试重新安装该模块，node-gyp模块又报了这个错： Error: Can't find Python executable "python", you can set the PYTHON env variable.查询node-gyp后，官方提供了两种解决方案 我采用了第一种方案： npm install --global --production windows-build-toolsps: 必须以系统管理员方式运行命令行。 接着重新安装一遍@ionic/app-scripts，然后重新运行项目，冇问题啦。 npm uninstall @ionic/app-scriptsnpm install --save-dev @ionic/app-scriptsnpm start 支持android和iosionic cordova platform add iosionic cordova platform add androidandroid调试首先检查下设备连接是否正常 D:\robin\frontend\hybrid\ionic\ionic-blog> adb devicesList of devices attached5fdba1e7 device使用ionic cli提供的命令运行app ...

1.在HTML5中使用Geolocation.getCurrentPosition()方法来获取地理位置。 语法： navigator.geolocation.getCurrentPosition(success, error, options)参数： success: 成功得到位置信息时的回调函数，使用Position 对象作为唯一的参数。 error: 获取位置信息失败时的回调函数，使用 PositionError 对象作为唯一的参数，这是一个可选项。 options:一个可选的PositionOptions 对象,包含以下3个参数。 enableHighAccuracy 是一个Boolean值，用来表明应用是否使用其最高精度来表示结果，默认为false。 timeout 是一个正的long值，表明的是设备必须在多长时间（单位毫秒）内返回一个位置，默认是Infinity。 maximumAge 是一个正的long值，表明可以返回多长时间（即最长年龄，单位毫秒）内的可获取的缓存位置。如果设置为 0, 说明设备不能使用一个缓存位置，而且必须去获取一个真实的当前位置。如果设置为 Infinity ，那么不管设 置的最长年龄是多少，设备都必须返回一个缓存位置。默认值：0 2.success - 成功得到位置信息时的回调函数 navigator.geolocation.getCurrentPosition(function(position)) { // 获取成功时的的处理 //参数position是地理位置对象}position中返回的信息如下图： accuracy 获取到的纬度或者经度的精度(以米为单位)altitude 当前地理位置的海拨高度（不能获取为null）altitudeAccurancy 获取到的海拨高度的经度(以米为单位)heading 设备移动的方向（以度为单位）latitude 当前地理位置的纬度longitude 当前地理位置的经度speed 设备的前进速度(以米/秒为单位，不能获取时为null)timestamp 获取地理位置信息时的时间3.error - 获取位置信息失败时的回调函数 navigator.geolocation.getCurrentPosition(function(position){ // 获取成功时的的处理； //参数position是地理位置对象},function(error)) { // 获取失败时的的处理；}error中返回的信息如下图 code属性有以下值： - 1 地理位置信息的获取失败，因为该页面没有获取地理位置信息的权限。- 2 地理位置获取失败，因为至少有一个内部位置源返回一个内部错误。- 3 获取地理位置超时，通过定义PositionOptions.timeout 来设置获取地理位置的超时时长。message 返回一个开发者可以理解的 DOMString 来描述错误的详细信息。 4.使用Geolocation.getCurrentPosition()注意事项： ...

摘要ionic是可以让我们使用web开发即使来移动应用的框架。ionic4之前，ionic只能和angular搭配使用，ionic4后把ionic抽离成四个版本，@ionic/core，@ionic/angular，@ionic/react，@ionic/vue来满足更多开发者的需求，但是@ionic/vue和@ionic/react还处于内部测试阶段。如果你熟悉angular可以直接使用@ionic/angular开发，但如果你熟悉使用react或vue并且也想使用ionic，可以使用@ionic/core版本，本文就以@ionic/core + vue 来说明这两者如何结合使用。除此之外ionic还引入cordova和capacitor来对把我们代码打包成安卓或ios应用。。https://ionicframework.com使用ionic来搭建我们环境安装ionic脚手架npm install -g ionic安装androd stuiod来编译android代码https://ionicframework.com/docs/installation/android安装xcode来编译ios代码https://ionicframework.com/docs/installation/ios初始化项目 用提供的模版为来测试环境是否已经安装成功ionic start myApp blank在android studio上启动https://ionicframework.com/docs/building/android1， ionic cordova prepare android2， ionic cordova run android -l在xcode上启动1，ionic cordova prepare ios2, ionic cordova run ios -l自己来搭建环境代码可见 https://github.com/gdutjiweijin/webapp适应vue-cli脚手架来搭建vue基础基础代码1， npm install –global vue-cli2， vue init webpack webapp3， cd webapp4, yarn install5, yarn run dev引入ionic@core在index.html上加入<link href=“https://unpkg.com/@ionic/core@4.0.0-beta.13/css/ionic.bundle.css" rel=“stylesheet”><script src=“https://unpkg.com/@ionic/core@4.0.0-beta.13/dist/ionic.js"></script>在main.js加入Vue.config.ignoredElements = [/^ion-/];初始化cordova项目1,cordova create cordovawebapp2,cordova platform add android3,cordova platform add ios把我们代码放入到cordova目录1）打包我们项目代码 npm run build2） 把dist目录代码拷贝到安卓对应目录上cp -r dist/ ./cordovawebapp/platforms/android/app/src/main/assets/www/3）把dist目录代码拷贝到ios对应目录上cp -r dist/ ./cordovawebapp/platforms/ios/www/具体代码可参考https://github.com/gdutjiweij…，效果如下webandroidios

Ionic4混合开发首选应该是capacitor，但capacitor刚推出不久还不够成熟，所以选择使用传统的cordova方式开发。基本上，Ionic native5和之前版本使用方式上变化不大，但cli有些选项上有些区别。1.创建platform添加android平台ionic cordova platform add android删除android平台ionic cordova platform remove android2.编译ionic项目源文件到www目录只有在Android studio中运行调试ionic项目才需要执行cordova的prepare命令，用于ionic源代码被修改之后，更新Android studio中相应的原生项目。ionic cordova prepare android如果要编译release版本，可以添加参数：ionic cordova prepare android –release –prod3.ionic模拟器或者真机调试以下命令在模拟器上运行app，最好在运行命令之前启动模拟器。ionic cordova emulate android -l注意，原先3.x版本的–consolelogs参数在4.x版本已经不支持，至少在4.1版本不支持，也不知道以后是否会支持。因此，调用console.log等方法输出到浏览器控制台的信息，无法通过ionic输出到命令行。要查看console.log等方法输出到浏览器控制台的信息，目前只能进入模拟器的Extended controls窗口的Bug report选项卡，然后在Bug report data下方窗口复制日志信息到记事本中，然后查找"SystemWebChromeClient"或者"I chromium"定位console信息。这个方法比较麻烦，所以建议采用第4步的方法，使用Android studio调试app。连接真机运行调试app的cli：ionic cordova run android -l4.在Android studio中运行调试ionic项目(真机或者模拟器调试)如果项目之前曾经使用ionic在模拟器和真机上调试运行，Android studio导入项目可能会失败，此时需要用ionic cordova platform remove android删除android平台，然后再次使用ionic cordova platform add android添加。运行Android studio，导入项目platformsandroid，可能会提示配置gradle.wrapper，点击确定。配置过程中，可能会发生build失败，提示gradle版本过高，可以点击自动修改配置。然后还可能出现android sdk版本缺失，可以按照提示下载安装android sdk。点击 Run/Edit configurations菜单，点击+号，添加一个android app配置；在Gerenal选项卡的Module下拉框中选择app，点击确定创建配置。然后可以运行或者调试配置。之后修改ionic源代码，只需要重新执行第2步的ionic cordova prepare命令，就可以同步到android studio项目。调试之前，最好先把模拟器运行起来，运行模拟器之前最好wipe data。在下方的Logcat窗口中，筛选框中输入 I/chromium，可以查看ionic项目中调用console.info/debug等方法输出到浏览器console中的消息。真机调试时比较有用。

1.安装安装Cordova和Ionic Native插件：$ ionic cordova plugin add cordova-plugin-datepicker$ npm install –save @ionic-native/date-picker2.在app.module.ts中引入date-picker：import { DatePicker } from ‘@ionic-native/date-picker’;…@NgModule({ … providers: [ … DatePicker … ] …})export class AppModule { }3.用法html中：<ion-item> <ion-label>日期</ion-label> <ion-input disabled=true type=“text” [(ngModel)]=“tDate” text-right (click)=“getDate()"></ion-input></ion-item>ts中：import { DatePicker,DatePickerOptions } from ‘@ionic-native/date-picker’;//导入constructor（ private datePicker: DatePicker）{}getDate() { let options : DatePickerOptions ={ date: new Date(), mode: ‘datetime’, titleText:‘请选择日期’, okText:‘选择’, cancelText: ‘取消’, todayText:‘今天’, nowText: ‘现在’, is24Hour:true, allowOldDates:true, doneButtonLabel:‘确定’, minuteInterval:10, androidTheme: this.datePicker.ANDROID_THEMES.THEME_HOLO_DARK } this.datePicker.show(options).then( date => { let time = new Date(date.getTime() + 8 * 60 * 60 * 1000).toISOString(); this.tDate = String(time.substring(0, time.length - 5)).replace(‘T’, ’ ‘) //格式时间显示样式 }, err => console.log(‘Error occurred while getting date: ‘, err) ); }最后在真机或模拟机上进行测试 ...

现在国内越来越多的开发者使用Vue开发混合app，但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。现在的打包Vue项目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也极力推荐的，有兴趣的可以去学习使用一下。下面说说怎么使用cordova打包Vue项目：第一步：安装cordova,创建好cordova项目。第二步：修改vue项目首先修改vue项目的index.html，引入cordova.js。这个引入在浏览器打开会报错。要打包后运行在真机后方可看到效果<body> <div id=“app”></div> <script type=“text/javascript” src=“cordova.js”></script> <!– built files will be auto injected –></body>然后修改src中的main.js为以下代码// The Vue build version to load with the import command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from ‘vue’import App from ‘./App’import router from ‘./router’Vue.config.productionTip = falsedocument.addEventListener(‘deviceready’, function() { new Vue({ el: ‘#app’, router, store, template: ‘<App/>’, components: { App } }) window.navigator.splashscreen.hide()}, false);最后修改config文件夹中的index.js文件，修改build中的assetsSubDirectory: ‘static’,assetsPublicPath: ‘/’,为assetsSubDirectory: ‘’,assetsPublicPath: ‘’,第三步：运行看看是否能够运行起来，如果正常说明到这里是没有问题的（注意这里运行的时候需要将document.addEventListener注释，因为在浏览器环境下是找不到cordova.js的也就不能监听到deviceready的事件，打包在真机上才能实现监听）。第四步：将vue打包好的文件放到cordova项目中并打包cordova run android,会生成一个可执行的apk文件，也可以直接在真机上运行。安装即可。友情提示：如果vue项目在运行npm run dev或者npm run build的时候遇到问题一般不是代码出错的话可以将node_modules文件夹删除使用npm install安装。如果是因为eslint导致代码检查不通过的话，可以将Vue项目的build文件夹下的webpack.base.config文件中的rules { test: /.(js|vue)$/, loader: ’eslint-loader’, enforce: ‘pre’, include: [resolve(‘src’), resolve(’test’)], options: { formatter: require(’eslint-friendly-formatter’) } },这段代码注释即可。 ...

1.项目中安装echartscnpm install echarts –save但是ionic项目依赖于angular和typeScript，所以再安装ts支持包cnpm install @types/echarts –save官网给出的一段建议：在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的，从 3.1.1 开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package。所以还得安装zrendercnpm install zrender2.引入使用在所需页面的name.ts引入如下import echarts from ’echarts’;使用如下initCharts(){ echarts.init(this.myCharts.nativeElement).setOption({ xAxis: { type: ‘category’, data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’] }, yAxis: { type: ‘value’ }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: ’line’ }] },true);}调用constructor(public navCtrl: NavController, public navParams: NavParams) { console.log(echarts); this.initCharts();}页面显示找到name.html定义一个呈现图表的div如下<ion-header> <ion-navbar> <ion-title>charts</ion-title> </ion-navbar></ion-header><ion-content padding>// #charts通过ViewChild获取dom节点 <div class=“charts” #charts> </div></ion-content>在name.ts文件一如dom节点 @ViewChild(‘charts’) myCharts:ElementRef运行ionic serve报错如下图大概意思是说获取不到dom节点，也就是我们展示地图的那个div，打印了之后发现是null或者undefine。后面就打印了一下ionic页面的生命周期，测试了一下ionic页面的生命周期函数。生命周期函数 触发时刻 顺序constructor() 创建页面时触发 1ionViewDidLoad() 当页面加载时触发 2ionViewWillEnter() 当将要进入页面时触发 3ionViewDidEnter() 进入页面时触发 4在constructor() 和 ionViewDidLoad()initCharts()函数中是获取不到dom节点的，因为页面还没有加载完成，在ionViewWillEnter()和ionViewDidEnter()是能获取到dom节点的，顾名思义只有当页面加载完成时才能获取到dom节点，所以再在页面加载完成后的生命周期函数里可以获取到改为ionViewWillEnter(){ }或ionViewDidEnter(){ this.initCharts();}运行ionic serve 完美解决3.完整代码示例Charts.ts如下import {Component, ElementRef, ViewChild} from ‘@angular/core’;import { IonicPage, NavController, NavParams } from ‘ionic-angular’;import echarts from ’echarts’;/** * Generated class for the ChartsPage page. * * See https://ionicframework.com/docs/components/#navigation for more info on * Ionic pages and navigation. */@IonicPage()@Component({ selector: ‘page-charts’, templateUrl: ‘charts.html’,})export class ChartsPage { @ViewChild(‘charts’) myCharts:ElementRef constructor(public navCtrl: NavController, public navParams: NavParams) { console.log(echarts); } ionViewDidLoad() { // this.initCharts(); console.log(‘ionViewDidLoad ChartsPage’); } // ionViewDidEnter(){ // this.initCharts(); // } ionViewWillEnter(){ this.initCharts(); } initCharts(){ console.log(document.getElementById(‘charts’)); echarts.init(this.myCharts.nativeElement).setOption({ xAxis: { type: ‘category’, data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’] }, yAxis: { type: ‘value’ }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: ’line’ }] },true); }}charts.html<!– Generated template for the ChartsPage page. See http://ionicframework.com/docs/components/#navigation for more info on Ionic pages and navigation.–><ion-header> <ion-navbar> <ion-title>charts</ion-title> </ion-navbar></ion-header><ion-content padding> <div class=“charts” #charts> </div></ion-content>charts.scsspage-charts { .charts{ height: 500px; }} ...

环境依赖关系叙述移动端混合开发的一个明显优势就是，一套代码两套部署，开发一套项目代码，可分别打成Android的包和ios的包。无论是混合开发还是原生开发，都是会需要原生的平台。我们先以Android平台为例，首先肯定需要AndroidSDK,Android环境缘起于java，所以必须先安装JDk,这是平台的环境.混合开发顾名思义需要前端和原生两块环境内容。混合开发平台，我们选择的是cordova,那么它依赖于node.js环境，并且需要node.js的npm模块来帮它下载插件。创建项目还需调试运行，那么就会需要Android模拟器。由于原生的Android模拟器启动过于慢，而且由于网络限制，google的cpu渲染加速器环境也难以下载。我们这里使用的是一个国外的好用且免费的第三方模拟器Genymotion。东西是免费的，但是需要注册和登陆。一共需要搭建的环境也就这么几个JDK，AndroidSDK,node.js,cordova, Genymotion。开发环境：node.jscordova6.0.0ionic测试运行环境：JDKAndroidSDKGenymotion2.安装说明2.1 JDK安装教程很多，记住安装时下载1.8版本菜鸟教程：http://www.runoob.com/java/ja…2.2 AndroidSDKandroidSDK由于国内限网，推荐一个国内的一个下载网站：http://www.androiddevtools.cn/下载后根据提示安装，推荐下载的包就不要取消。系统一般会帮你默认勾选安卓最新版本Android9.0，但是Android9.0会出现模拟器启动不了的问题，坑很多，建议安装9.0以下的，我选的Android6.0，勾选下图的选项即可。下载完配置Android环境变量打开安卓的安卓目录如图，我画圈的两个目录，需要加入到path里面D:Program Filesandroidplatform-tools; D:Program Filesandroidtools;2.3Genymotion 安装官网下载官方只需注册即可免费使用，使用下面链接注册即可。注册：https://www.genymotion.com/下载：https://www.genymotion.com/do…下载后按照提示安装即可，打开软件时登录选择个人登录即可。下载安卓镜像打开后如图，点击add。找自己需要的版本下载即可2.4安装nodejs官网下载nodejs免安装版https://nodejs.org/en/download/选择windows免安装版64位解压到要安装的目录添加环境变量计算机(右键)–>属性(左键)–>高级系统设置(左键)–>环境变量(左键)检查是否配置成功node -vnpm -v正常显示出版本号则说明安装成功更换npm镜像源首先来说为什么要更换镜像源，由于npm的镜像源是国外的，我们使用npm工具安装软件环境时，由于网速问题会导致很多难以解决的问题，而且下载巨慢，故将镜像源更换为淘宝的镜像源。执行下面命令更换软件源npm install -g cnpm –registry=https://registry.npm.taobao.org查看是否更换成功cnpm -v不报错且出来一段信息则说明更换成功。参考学习菜鸟教程：http://www.runoob.com/nodejs/…w3school:https://www.w3cschool.cn/node…npm基本使用：https://www.w3cschool.cn/node…2.5安装cordova平台官网https://cordova.apache.org/使用npm安装平台cnpm install -g cordova@6.0.0上面安装指定版本的cordova，我们这里安装cordova6.0.0,建议不要安装7版本和8版本，后面创建项目时会出现很多问题。cordova -v检查是否安装成功，正确显示出版本号则说明安装成功。项目相关命令#1.创建项目cordova create MyAppcd ./MyApp#2.添加平台cordova platform add browser #添加浏览器平台cordova platform add android #安卓平台cordova platform add ios #ios平台#注意添加相关平台需要拥有相关平台的环境#3.编译打包cordova build android #打成android平台的包 .apkcordova build ios #打成ios平台的包#4.运行到androidSDK自带的模拟器cordova emulate android#5.运行到第三方模拟器或真机cordova run android参考学习w3school:https://www.w3cschool.cn/cord…2.6angularjs环境搭建官网https://www.angular.cn/guide/…安装项目脚手架npm install -g @angular/cli 这里只是为了给ionic创建项目提供环境，但是要使用ionic开发就必须学会angularjs。2.7ionic安装配置官网https://ionicframework.com/do…安装-g是全局的意思，latest是最新版的意思。cnpm install -g ionic@latest项目相关命令#1创建项目ionic start myNewProject tabs #tabs是项目模板的一种，ionic平台自身会提供几种项目模板#进入到项目cd ./myNewProject#2.添加平台ionic cordova platform add android #平台同上一样可选#3.打包ionic cordova build android#4.运行ionic serve #运行在浏览器ionic cordova run android #运行到android,ios可能会出现的问题创建项目时，会问你是否使用ionic4创建项目，选择n即可，也可创建尝试下，但运行性项目到android模拟器显示空白。参考学习菜鸟教程：http://www.runoob.com/ionic/i…中文文档：http://www.ionic.wang/js_doc-…参考学习w3school:https://www.w3cschool.cn/cuhk…3.可能会遇到的问题node.js 使用免安装版能避免许多未知错误。cordova安装6.0.0不要安装7.0或8.0的，后面出现的错误会很多。cordova添加android平台，会多次失败，由于资源在国外会失败多次，插件下载完成就可以成功。安卓模拟器需要cpu加速器，不然会一直黑屏，所以选用了第三方模拟器。谷歌真机调试chrome://inspect。android9.0不能用使用。

在制作一款打卡App的时候有这么一个需求 – 创建提醒到系统日历中，也就是利用系统日历来做事件的提醒，这么做的好处很明显，App无需处理提醒的细节，也无需后台。这个App是基于Cordova开发的，并没有访问系统日历的接口，我们只能通过插件来完成，这是一个有趣的挑战。APP设计请看下图，App允许创建事项时，可以设置重复，开始，结束和提醒时间四个选项：这四个选项对创建到日历的事件都有影响：重复 可以设置一周中的任意几天，比如选择周一到周五表示只要工作日。开始 从哪天天开始结束 到哪天结束提醒时间 在每天的哪个时间发出提醒这个四个组合起来就构成一个日历事件。插件Cordova平台实际上是一个基于web的平台，所以除了webview提供的能力，其他和设备交互的功能全部依赖于插件来完成，插件的安装和使用通常并不困难，比如增加一个关于状态栏控制的插件，可以在项目下这么做：cordova plugin add cordova-plugin-statusbar然后在js里调用插件提供的接口就可以了，更多的关于cordova平台和插件的使用，我有一个视频课程可以参考。很明显，创建系统日历事件也需要通过插件来做，搜索之后我们可以发现，完成这个功能的插件并不多，其中使用比较多的是cordova-plugin-calendar，试着安装cordova plugin add cordova-plugin-calendar这个插件可以支持android和iOS，我们现在android下测试，首先在js里写下下面的代码：let calOptions = window.plugins.calendar.getCalendarOptions()calOptions.firstReminderMinutes = 0calOptions.secondReminderMinutes = nullcalOptions.recurrenceEndDate = actionRemindEnd(action)if (action.repeat.length === 7) { calOptions.recurrence = ‘daily’}else { calOptions.recurrence = ‘weekly’ calOptions.recurrenceByDay = dateRepeat2Calendar(action.repeat)}window.plugins.calendar.createEventWithOptions( action.name, null, ‘dayday’, eventTime, new Date(eventTime.getTime() + 15 * 60000), calOptions, (result) => { }, (err) => { })action保存了用户所创建的一个活动事件的所有信息，其中有两个函数就不展开了，看起来应该可以了，实测的结果却是，日历事件创建起来了，没有报错，但是重复有问题，并没有能一直重复下去，在重复数次之后，事件就停了，类似下图这样，到15号事件就没有了：修改插件在这种情况下，调试js代码已经没有什么帮助了，js代码已经完全按照插件的要求来传递了参数，只能打开android studio，加载cordova项目下platforms/android下的这个工程，这个工程就是一个标准的android项目，打开之后可以定位到这个插件所提供的源码文件，找到AbstractCalendarAccessor.java，其中的createEvent函数完成在android下创建一个日历事件所做的事情，代码如下：public String createEvent(Uri eventsUri, String title, long startTime, long endTime, String description, String location, Long firstReminderMinutes, Long secondReminderMinutes, String recurrence, int recurrenceInterval, String recurrenceWeekstart, String recurrenceByDay, String recurrenceByMonthDay, Long recurrenceEndTime, Long recurrenceCount, String allday, Integer calendarId, String url) { ContentResolver cr = this.cordova.getActivity().getContentResolver(); ContentValues values = new ContentValues(); final boolean allDayEvent = “true”.equals(allday) && isAllDayEvent(new Date(startTime), new Date(endTime)); if (allDayEvent) { //all day events must be in UTC time zone per Android specification, getOffset accounts for daylight savings time values.put(Events.EVENT_TIMEZONE, “UTC”); values.put(Events.DTSTART, startTime + TimeZone.getDefault().getOffset(startTime)); values.put(Events.DTEND, endTime + TimeZone.getDefault().getOffset(endTime)); } else { values.put(Events.EVENT_TIMEZONE, TimeZone.getDefault().getID()); values.put(Events.DTSTART, startTime); values.put(Events.DTEND, endTime); } values.put(Events.ALL_DAY, allDayEvent ? 1 : 0); values.put(Events.TITLE, title); // there’s no separate url field, so adding it to the notes if (url != null) { if (description == null) { description = url; } else { description += " " + url; } } values.put(Events.DESCRIPTION, description); values.put(Events.HAS_ALARM, firstReminderMinutes > -1 || secondReminderMinutes > -1 ? 1 : 0); values.put(Events.CALENDAR_ID, calendarId); values.put(Events.EVENT_LOCATION, location); if (recurrence != null) { String rrule = “FREQ=” + recurrence.toUpperCase() + ((recurrenceInterval > -1) ? “;INTERVAL=” + recurrenceInterval : “”) + ((recurrenceWeekstart != null) ? “;WKST=” + recurrenceWeekstart : “”) + ((recurrenceByDay != null) ? “;BYDAY=” + recurrenceByDay : “”) + ((recurrenceByMonthDay != null) ? “;BYMONTHDAY=” + recurrenceByMonthDay : “”) + ((recurrenceEndTime > -1) ? “;UNTIL=” + nl.xservices.plugins.Calendar.formatICalDateTime(new Date(recurrenceEndTime)) : “”) + ((recurrenceCount > -1) ? “;COUNT=” + recurrenceCount : “”); values.put(Events.RRULE, rrule); } String createdEventID = null; try { Uri uri = cr.insert(eventsUri, values); createdEventID = uri.getLastPathSegment(); Log.d(LOG_TAG, “Created event with ID " + createdEventID); if (firstReminderMinutes > -1) { ContentValues reminderValues = new ContentValues(); reminderValues.put(“event_id”, Long.parseLong(uri.getLastPathSegment())); reminderValues.put(“minutes”, firstReminderMinutes); reminderValues.put(“method”, 1); cr.insert(Uri.parse(CONTENT_PROVIDER + CONTENT_PROVIDER_PATH_REMINDERS), reminderValues); } if (secondReminderMinutes > -1) { ContentValues reminderValues = new ContentValues(); reminderValues.put(“event_id”, Long.parseLong(uri.getLastPathSegment())); reminderValues.put(“minutes”, secondReminderMinutes); reminderValues.put(“method”, 1); cr.insert(Uri.parse(CONTENT_PROVIDER + CONTENT_PROVIDER_PATH_REMINDERS), reminderValues); } } catch (Exception e) { Log.e(LOG_TAG, “Creating reminders failed, ignoring since the event was created.”, e); } return createdEventID; }这段代码并不长，在Android Studio下设置断点，连接真机调试，发现整个过程没有任何错误，日历事件已经创建起来，但就是重复次数不正确。好吧，找到android api参考，看看官方文档中怎么说的：Here are the rules for inserting a new event:You must include CALENDAR_ID and DTSTART.You must include an EVENT_TIMEZONE. To get a list of the system’s installed time zone IDs, use getAvailableIDs(). Note that this rule does not apply if you’re inserting an event through the INSERT Intent, described in Using an intent to insert an event—in that scenario, a default time zone is supplied.For non-recurring events, you must include DTEND.For recurring events, you must include a DURATION in addition to RRULE or RDATE. Note that this rule does not apply if you’re inserting an event through the INSERT Intent, described in Using an intent to insert an event—in that scenario, you can use an RRULE in conjunction with DTSTART and DTEND, and the Calendar application converts it to a duration automatically.仔细对照代码和文档，我们发现DURATION这个参数并没有按照文档来传递，好吧，我们修改一下关键代码：if (allDayEvent) { //all day events must be in UTC time zone per Android specification, getOffset accounts for daylight savings time values.put(Events.EVENT_TIMEZONE, “UTC”); values.put(Events.DTSTART, startTime + TimeZone.getDefault().getOffset(startTime)); if (recurrence == null) { values.put(Events.DTEND, endTime + TimeZone.getDefault().getOffset(endTime)); } else { values.put(Events.DURATION, “P” + ((endTime - startTime) / (24 * 60 * 60000)) + “D”); }} else { values.put(Events.EVENT_TIMEZONE, TimeZone.getDefault().getID()); values.put(Events.DTSTART, startTime); if (recurrence == null) { values.put(Events.DTEND, endTime); } else { values.put(Events.DURATION, “P” + ((endTime - startTime) / 60000) + “M”); }}修改后的代码再次测试，这次ok了，这个例子表明了cordova生态的一个现象，插件质量参差不齐，有些插件可能需要我们的修改才能工作。应用修改为了使用修改后的插件，我们可以删除原来的插件，使用fork并修改后的插件，很简单，方法如下：cordova plugin remove cordova-plugin-calendarcordova plugin add https://github.com/i38/Calendar-PhoneGap-Plugin.git所有其他代码都不用修改，这是cordova很灵活的一个地方，这样一切都ok了，最后附上完整App的链接，有兴趣可以参考： 天天。 ...