Ionic 3 项目实战------插件原理
在此之前,JS和原生的交互主要是通过WebView(Android)和UIWebView(iOS)进行,但在Ionic 3 中,Cordova提供了标准的API,来让JS和native进行数据交互。
在Android中,Cordova提供了exec()方法,将访问原生的方法暴露给JS,而Java通过CordovaPlugin.execute()方法与之进行数据对接
以下是Cordova.exec()方法说明
cordova.exec(function(winParam) {}, function(error) {}, "service", "action", ["firstArgument", "secondArgument", 42, false]);
function(winParam) {}:成功回调函数。假设您的 exec成功完成,此功能将随您传递给它的任何参 ...
Ionic 3 项目实战------项目开发目录
在之前的文章中有提到项目的源码全部存放在项目根目录的src文件夹,我们之后所有的代码开发也是在该目录进行
app文件夹pp.component.ts 根组件import { Component } from '@angular/core';import { Platform } from 'ionic-angular';import { StatusBar } from '@ionic-native/status-bar';import { SplashScreen } from '@ionic-native/splash-screen';import { TabsPage } from '../pages/tabs/tabs';@Component({ templateUrl: 'app.html'})exp ...
Ionic 3 项目实战------自定义插件
之前对 Ionic 3 项目插件的结构做过简单的介绍Ionic 3 插件应用:plugin基本知识了解
一个插件应该至少包含以下file:
plugin-name
—————–src //插件支持平台
——android.java //添加了支持Android平台
—————–www //JS文件,将Cordova.exec方法暴露给HTML/JS调用
——android.js
—————–plugin.xml //插件的配置文件,通知CLI哪个平台应该从什么地方Copy哪些文件到什么地方,以及CLI在生成config.xml时应该根据平台加入什么样的特殊设置
在自定插件时,我们可以按照上述的目录结构,建立各自的文件,但是这样做的话,比较繁琐,因此一般不推荐这样做。
推荐使用插件生成工具plugman,他会自动帮我们创建好想要的插件目录,然后去对应文件中实现我们需要的功能即可。
安装plugman$ npm install -g plugman
创建插件模板先看一下plugman可用的命令
plugman m ...
Ionic创建项目失败Error:read ETIMEDOUT解决方案
在使用Ionic创建项目时,出现以下错误:
appledeMac-mini:~ zhaikun$ ionic start IonicAppDemo tabs✖ Downloading and extracting tabs starter - failed!Error: read ETIMEDOUT at TLSWrap.onread (net.js:659:25)
原因:在下载项目对应的模板时无法下载。
在网上研究了很多方法,有大神提出改动npm源后再进行操作,但是这是下载模板的问题,在下载模板时还没有使用到npm,注意:npm install是在Ionic的项目模板下载完之后才执行的。
方案一:尝试翻墙后重新创建项目
方案二:在IonicTeam的GitHub上找对应使用的模板https://github.com/ionic-team?page=3
方案三:Ionic版本回退到V3.9.2
npm install -g ionic@3.9.2
在macOS中注意在npm前加入sudo,增加权限访问
取消npm代理或淘宝镜像
1、取消npm代理
npm config delete proxy
2、取消淘宝镜像
打开npm代理编辑
npm config edit
找到对应的淘宝代理执行删除命令
npm config delete [需要删除的代理名称]
安装指定版本的Ionic或Cordova
安装ionic 及 cordova
npm install -g cordova ionic
更新命令
npm update -g cordova ionic
安装特定版本
npm install -g ionic cordova@5.0.0npm install -g ionic@1.6.5
删除命令
npm uninstall cordova -gnpm uninstall ionic -g
在macOS中,需要在npm前添加sudo,增加权限访问
Mac中NTFS格式文件的读写
在Mac中是不支持NTFS文件的读写的,我们可以在Mac中安装 Tuxera NTFS 软件,之后便可对NTFS格式的文件进行读写操作。
Tuxera NTFS 自行百度下载安装即可。
Mac终端常用命令
以下是小编常用的命令,更多命令可自行百度,最简单的方式是:在终端中使用 help 帮助命令
1、pwd:终端当前的工作路径
2、ls:显示当前工作路径下的所有文件夹和文件
3、ls -l:以详细信息的形式显示当前工作路径下的所有文件夹和文件
4、cd Applications:切换终端的工作路径为/Users/ZhaiKun/Applications,cd + 终端需要进入的工作路径
5、Tab建的使用:Tab建可作为系统已经存在的默认路径的自动补全,如 Applications 文件夹,输入前几个(字符个数不定)关键字母(App),再按下Tab建,即可自动完成Applications 的完整拼写
6、cd ..:回退到当前工作路径的父路径
7、mkdir 文件夹名称:在当前的工作路径下创建一个新的文件夹
8、clear:清除终端界面上的命令信息
9、touch 文件名称(注意增加文件的后缀名):在当前工作路径新建一个文件,我们知道,在 Mac 的 Finder 中是不能新建文件的,使用该命令即可新建一个文件
10、cc:任意工作路径下输入此命令,可检测系统是否装有 C 语言的开发环境 ...
macOS中安装node.js
node.js最新版下载地址:https://nodejs.org/en/#download
双击运行以上文件,安装过程直接下一步即可。安装后显示:
node.js和npm安装成功测试,在终端输入以下命令:
appledeMac-mini:~ zhaikun$ node -vv10.1.0appledeMac-mini:~ zhaikun$ npm -v5.6.0
macOS配置Android SDK 环境变量
1、启动终端,可以在Spotlight中搜索“终端”
2、进入当前用户的HOME目录
cd $HOME
3、创建“.bash_profile”文件(当该文件不存在时),如果文件已存在,直接打开文件即可
touch .bash_profile
4、打开.bash_profile文件,对其内容进行编辑
open -e .bash_profile
5、此时文本编辑器会打开一个文本,增加如下内容
ANDROID_HOME=/Users/zhaikun/Downloads/ZhaiKun/Android/android-sdk-macosxexport PATH=$PATH:$ANDROID_HOME/toolsexport PATH=$PATH:$ANDROID_HOME/platform-tools
ANDROID_HOME配置为Android SDK的安装路径
6、保存文件,关闭.bash_profile
7、更新刚配置的环境变量,在终端执行命令
source .bash_ ...