Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

利用ionic2制作手电筒App

Posted on 2017年5月29日2017年5月29日 by king2088

ionic是一个开源而且比较不错的混合app开发框架,集html5+css+angularJS+cordova而开发的一个纯手机端app框架。使用ionic可以轻而易举的制作出非常漂亮的app。下面我就利用ionic2制作一个手电筒软件,控制手机的闪光灯。
1、使用ionic官方的native文档中提到的flashlight插件(手电筒)
其实ionic的插件也就可以说是cordova的插件,因为cordova插件是JS写的,而ionic中则是使用微软的typescript,因此ionic官方已经将相应的cordova插件转换为typescript的了。
根据官方文档的介绍,很简单我们就可以实现手电筒的功能了,首先我们得安装cordova的flashlight插件,其次还要安装ionic的flashlight插件,使用如下命令:

ionic cordova plugin add cordova-plugin-flashlight
npm install --save @ionic-native/flashlight

我使用的是ionic2,而就在今天,我使用的版本中,安装cordova插件发生了错误,说cordova命令不存在,当然我肯定已经安装了cordova,后来我直接把前面的ionic去掉以后即可安装了。因此你要是遇到这样的问题,那么就修改下上面的代码如下:
cordova plugin add cordova-plugin-flashlight
npm install --save @ionic-native/flashlight

安装成功后,我们得先在src/app/app.modules.ts中添加flashlight插件,否则flashlight插件在其他页面将无法使用。
2、app.modules.ts代码
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
/* 在此添加flashlight插件 */
import { Flashlight } from '@ionic-native/flashlight';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
/* 在此注入flashlight插件 */
Flashlight,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

3、home.ts代码
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Flashlight } from '@ionic-native/flashlight';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public icon_light='./assets/icon_light/lightoff.png';
public status = {
on:false,
off:true
};
constructor(public navCtrl: NavController,public flashlight: Flashlight) {

}
lightStatus(){
if(this.flashlight.isSwitchedOn()){
this.status.on = false;
this.status.off = true;
this.icon_light='./assets/icon_light/lightoff.png';
this.flashlight.switchOff();
}else{
this.status.on = true;
this.status.off = false;
this.icon_light='./assets/icon_light/lighton.png';
this.flashlight.switchOn();
}
}
}

4、home.html代码


点击屏幕开启手电

<#img src="./assets/icon_light/off.png" *ngIf="status.off">
<#img src="./assets/icon_light/on.png" *ngIf="status.on">


5、home.scss代码
page-home {
.content{
background: #f2f2f2;
color:#fff;
}
.content .light{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
padding-bottom: 10px;
color: #333;
}
.status img{
width: 100px;
padding: 100px 10px;
}
}

上面的代码,请大家把img标签前面的#号删除。
这样就完成了手电筒的功能了。
我制作的apk最终效果如下

ionic手电筒
ionic手电筒

目前已经打包为安卓的apk文件(大家需要打包成apk文件的话,请看我另一一篇文章ionic2签名打包),大家可以下载测试哈!
点此下载手电筒APK(安卓版)

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 4月
一 二 三 四 五 六 日
 12
3456789
10111213141516
17181920212223
24252627282930
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme