camera
- Camera模块管理设备的摄像头，可用于拍照、摄像操作，通过plus.camera获取摄像头管理对象。
function photo(){
plus.camera.getCamera().captureImage(
p=>{
plus.gallery.save(p,s=>console.log("成功",s),se=>console.log("失败",se));
plus.io.resolveLocalFileSystemURL(p,entry=>{
var pa = document.createElement("p");
pa.innerHTML = `<img width="160" src="${entry.toLocalURL()}"/>`
picbox.appendChild(pa);
});
},
e=>{},
{}
)
}
<p><button onclick="photo()">拍照</button></p>
方法：
- getCamera: 获取摄像头管理对象
对象：
- Camera: 摄像头对象
- CameraOptions: JSON对象，调用摄像头的参数
- PopPosition: JSON对象，弹出拍照或摄像界面指示位置
Device
<script type="text/javascript">
document.addEventListener('plusready', function(){
//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")
uuid.innerHTML = plus.device.uuid;
osName.innerHTML = plus.os.name;
vendor.innerHTML = plus.device.vendor;
net.innerHTML = plus.networkinfo.getCurrentType()===3?'wifi':'其他';
// 0 - 6 3是wifi 4是2g 5是3g 6是4g
});
</script>
<h3>信息获取</h3>
<p>uuid:<span id="uuid"></span></p>
<p>os:<span id="osName"></span></p>
<p>厂商:<span id="vendor"></span></p>
<p>网络:<span id="net"></span></p>
属性：
Key
plus.key.addEventListener("backbutton",()=>{
plus.nativeUI
})
方法：
- addEventListener: 添加按键事件监听器
io
- IO模块管理本地文件系统，用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过plus.io可获取文件系统管理对象。
nativeUI
function showAlert(){
plus.nativeUI.alert("你好程序员",()=>console.log("用户点击"),"原生弹出","确定");
// 弹出内容,回调函数,标题,确定按钮文字
}
function showConfirm(){
plus.nativeUI.confirm("你准备好了吗",e=>console.log("你选择的是:"+e.index));
// 确定是0 取消是1
}
function showWaiting(){
var w = plus.nativeUI.showWaiting("客官稍等...");
setTimeout(()=>plus.nativeUI.closeWaiting(),2500);
}
function pickDate(){
var styles = {};
styles.title = "请选择日期："; // 显示标题
styles.date = new Date(), styles.date.setFullYear(2018,8,8);// 默认显示的日期
styles.minDate = new Date(), styles.minDate.setFullYear(2010,0,1);// 设置最小可选日期为“2010-01-01”
styles.maxDate = new Date(), styles.maxDate.setFullYear(2020,11,31);// 设置最大可选日期为“2020-12-31”
plus.nativeUI.pickDate(function(e){
var d = e.date;
console.log("选择的日期:"+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate());
},function(e){
console.log("未选择的日期"+e.message);
},styles);
}
<h3>nativeUI 原生UI</h3>
<p>
<button onclick="plus.nativeUI.toast('积分+5')">Toast提示</button><br><br>
<button onclick="showAlert()">Alert 警告</button><br><br>
<button onclick="showConfirm()">Confirm 确认</button><br><br>
<button onclick="showWaiting()">加载提示</button><br><br>
<button onclick="pickDate()">选择日期</button><br><br>
</p>
方法：
- actionSheet: 弹出系统选择按钮框
- alert: 弹出系统提示对话框
- confirm: 弹出系统确认对话框
- closeWaiting: 关闭系统等待对话框
- closeToast: 关闭自动消失的提示消息
- previewImage: 预览图片
- showWaiting: 显示系统等待对话框
- pickDate: 弹出系统日期选择对话框
- pickTime: 弹出系统时间选择对话框
- prompt: 弹出系统输入对话框
- toast: 显示自动消失的提示消息
- setUIStyle: 设置原生界面样式（暗黑模式）
share
function share(){
window.plusShare({
title:"神级网站",
content:"解决程序员99%烦恼",
// type:'text',
// pictures:["http://www.xxx.com/source/images/640.jpg"],
href:"http://www.baidu.com",
thumbs:["http://www.xxx.com/source/images/640.jpg"]
},res=>{plus.nativeUI.toast("分享成功")})
}
<h3>分享</h3>
<p><button onclick="share()">系统分享</button></p>
方法：
- getServices: 获取分享服务
- sendWithSystem: 使用系统分享
uploader
function upload(){
if(!file){plus.nativeUI.alert("你还没有选择文件");return;}
var url = "http://www.xxx.com/ajax/file.php";
var task = plus.uploader.createUpload(
url,
{method:'POST'},
(t,status)=>{
if(status==200){
console.log("上传成功");
var picurl = "http://www.xxx.com"+JSON.parse(t.responseText).pic;
var p = document.createElement("p");
p.innerHTML = `<img width="160" src="${picurl}"/>`;
picbox.appendChild(p);
}else{
console.log("上传失败"+status);
}
}
)
task.addFile(file,{key:"file"});
task.start();
}
<h3>拍照并上传</h3>
<p>
<button onclick="appendByCamera()">拍照</button> |
<button onclick="appendGallery()">相册选择</button>
</p>
<p id="myfile"></p>
<p><button onclick="upload()">上传</button></p>
<div id="picbox">
<!-- myfile存放文件名 picbox存放上传好的图片 -->
</div>
方法：
- createUpload: 新建上传任务
- clear: 清除上传任务
- enumerate: 枚举上传任务
- startAll: 开始所有上传任务
对象：
- Upload: Upload对象管理一个上传任务
- UploadEvent: 上传任务事件类型
- UploadState: 上传任务的状态，Number类型
- UploadOptions: JSON对象，创建上传任务的参数
- UploadFileOptions: JSON对象，添加上传文件的参数
webview
- Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。
var _openw = null;
function openAbout(){
if(_openw){return;} // 防止快速点击
_openw = plus.webview.create('about.html','about',{
backButtonAutoControl:'close',
titleNView:{
autoBackButton:true,
backgroundColor:"#f30",
titleText:'关于我们',
titleColor:"#fff",
buttons:[{
type:'share',
onclick:()=>alert("分享被点击了")
}]
}
})
_openw.addEventListener('close',()=>_openw=null);
_openw.show('slide-in-right');
}
function openPage(url,title,bgcolor){
plus.navigator.setStatusBarBackground(bgcolor);
if(_openw){return;}//防止快速点击；
_openw = plus.webview.create(url,title,{
backButtonAutoControl:'close',//当返回的时候关闭webview（当前的窗口）
// 设置标题
titleNView:{
autoBackButton:true,//默认返回按钮
backgroundColor:bgcolor, //标题栏颜色,
titleText:title,//标题栏文本,
titleColor:"#fff",
progress:{color:"#fff"},
// 设置进度条的颜色为白色
buttons:[{
type:'share',
onclick:()=>alert("分享被点击了")
}]
}
})
_openw.addEventListener('close',()=>{_openw=null;plus.navigator.setStatusBarBackground("#f30");});
//当关闭时候清空当前webView
_openw.show('slide-in-right');
}
<h3>页面切换</h3>
<p>
<a href="about.html">a标签切换到about</a>
<button onclick="openAbout()">webview切换</button><br><br>
<button onclick="openPage('http://xw.qq.com','新闻','#4c7eff')">新闻</button><br><br>
<button onclick="openPage('http://m.mi.com','购买','#f30')">小米</button>
</p>
属性：
- isRecovery: 当前Webview窗口是否由于内核崩溃自动恢复
方法：
- all: 获取所有Webview窗口
- close: 关闭Webview窗口
- create: 创建新的Webview窗口
- currentWebview: 获取当前窗口的WebviewObject对象
- getDisplayWebview: 获取屏幕所有可视的Webview窗口
- getWebviewById: 查找指定标识的WebviewObject窗口
- getLaunchWebview: 获取应用首页WebviewObject窗口对象
- getSecondWebview: 获取应用第二个首页WebviewObject窗口对象
- getTopWebview: 获取应用显示栈顶的WebviewObject窗口对象
- hide: 隐藏Webview窗口
- open: 创建并打开Webview窗口
- prefetchURL: 预载网络页面
- prefetchURLs: 预载网络页面（多个地址）
- show: 显示Webview窗口
- startAnimation: Webview窗口组合动画
- defaultHardwareAccelerated: 获取Webview默认是否开启硬件加速
作者：耶啵_
链接：https://www.jianshu.com/p/e9e33d14196a
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论