1、打开HBuilderX App版
新建项目
配置模拟器端口
device
Device模块管理设备信息，用于获取手机设备的相关信息，如IMEI、IMSI、型号、厂商等。通过plus.device获取设备信息管理对象。
属性：
<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>
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
});
runtime
Runtime模块管理运行环境，可用于获取当前运行环境信息、与其它程序进行通讯等。通过plus.runtime可获取运行环境管理对象。
方法
<h3>运行时</h3>
<p>
<button onclick="plus.runtime.quit()">退出应用</button> |
<button onclick="plus.runtime.restart()">重启应用</button>
</p>
plus.key.addEventListener("backbutton",()=>{
plus.nativeUI.confirm("确认要关闭app?",(e)=>{
if(e.index==0){
plus.runtime.quit();
// 如果用户单击的是确定，退出app
}
})
})
nativeUI
nativeUI管理系统原生界面，可用于弹出系统原生提示对话框窗口、时间日期选择对话框、等待对话框等。
方法：
- actionSheet: 弹出系统选择按钮框
- alert: 弹出系统提示对话框
- confirm: 弹出系统确认对话框
- closeWaiting: 关闭系统等待对话框
- closeToast: 关闭自动消失的提示消息
- previewImage: 预览图片
- showWaiting: 显示系统等待对话框
- pickDate: 弹出系统日期选择对话框
- pickTime: 弹出系统时间选择对话框
- prompt: 弹出系统输入对话框
- toast: 显示自动消失的提示消息
- setUIStyle: 设置原生界面样式（暗黑模式）
alert
弹出系统提示对话框
创建并显示系统样式提示对话框，可设置提示对话框的标题、内容、按钮文字等。 弹出的提示对话框为非阻塞模式，用户点击提示对话框上的按钮后关闭，并通过alertCB回调函数通知对话框已关闭。
示例：
// 弹出系统提示对话框
function showAlert(){
plus.nativeUI.alert("你好程序员",()=>console.log("用户点击"),"原生弹出","确定")
// 弹出内容，回调函数，标题，确定按钮文字
}
confirm
弹出系统确认对话框
创建并显示系统样式确认对话框，可设置确认对话框的标题、内容、按钮数目及其文字。 弹出的确认对话框为非阻塞模式，用户点击确认对话框上的按钮后关闭，并通过confirmCB回调函数通知用户点击的按钮索引值。
示例：
// 弹出提示信息对话框
function showConfirm(){
plus.nativeUI.confirm("Are you sure ready?", function(e){
console.log("Close confirm: "+e.index);
});
}
showWaiting
显示系统等待对话框
创建并显示系统样式等待对话框，并返回等待对话框对象Waiting，显示后需调用其close方法进行关闭。
示例：
// 弹出系统等待对话框
function showWaiting(){
var w = plus.nativeUI.showWaiting("等待中...");
}
pickDate
弹出系统日期选择对话框
创建并显示系统样式日期选择对话框，可进行日期的选择。 用户操作确认后通过successCB回调函数返回用户选择的日期，若用户取消选择则通过errorCB回调。
function pickDate(){
var styles = {};
styles.title = "请选择日期："; // 显示标题
styles.date = new Date(), styles.date.setFullYear(2020,4,24);// 默认显示的日期
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);
}
share
Share模块管理客户端的社交分享功能，提供调用终端社交软件的分享能力。通过plus.share可获取社交分享管理对象。
分享接口支持开发者获取设备上安装的社交App环境，调用社交App进行分享操作。若当前设备安装了对应的社交App，则调用此App的分享操作界面，否则调用WAP页面进行分享。
function share(){
window.plusShare({
title:"神级网站",
content:"解决程序员99%烦恼",
href:"http://www.baidu.com",
thumbs:["http://520mg.com/source/images/640.jpg"]//图片
},res=>{plus.nativeUI.toast("分享成功")})
}
camera
Camera模块管理设备的摄像头，可用于拍照、摄像操作，通过plus.camera获取摄像头管理对象。
方法：
- getCamera: 获取摄像头管理对象
getCamera
获取摄像头管理对象
function appendByCamera(){
plus.camera.getCamera().captureImage(p=>appendFile(p),e=>console.log("错误："+e),
{filename:'_doc/camera/',index:1});
// 插件 获取相机，获取图片，成功执行回调函数 把p传递给appendFile函数
}
function appendFile(p){
// 获取文件名
var n = p.substr(p.lastIndexOf("/")+1);
console.log("文件名"+n)
// 获取 文件p地址的最后一个斜杠后文本（文件名）
// lastIndexOf从后面查找字符串，并返回它的位置
myfile.innerHTML = n; // 显示文件的后缀名
file = p; //把p 赋值给 file
}
gallery
Gallery模块管理系统相册，支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。通过plus.gallery获取相册管理对象。
方法：
pick
function appendFile(p){
// 获取文件名
var n = p.substr(p.lastIndexOf("/")+1);
console.log("文件名"+n)
// 获取 文件p地址的最后一个斜杠后文本（文件名） lastIndexOf从后面查找字符串，并返回它的位置
myfile.innerHTML = n; // 显示文件的后缀名
file = p; //把p 赋值给 file
}
function appendByGallery(){
plus.gallery.pick(p=>appendFile(p))
}
save
function photo(){
plus.camera.getCamera().captureImage(
p=>{
plus.gallery.save(p,s=>console.log("成功",s),se=>console.log("失败",se));
// 图片保存再相册中;
// 把当前的图片插入到 咱们网页中
// p这个文件地址不是实际的绝对地址
plus.io.resolveLocalFileSystemURL( p,
entry=>{
var pa = document.createElement("p");
// 创建p元素
pa.innerHTML=`<img width="160" src="${entry.toLocalURL()}"/>`;
// 设置p的内容为图片
picbox.appendChild(pa);}
);
},
e=>{},
{});
//成功，失败，拍照选项
}
// 实现 拍照，保存到相册，插入网页中
// plus.camera.getCamera().captureImage() 拍照 ： 成功回调 ，失败回调，拍照参数
// plus.gallery.save 保存图片到相册 ：图片地址，成功回调，失败回调
// plus.io.resolveLocalFileSystemURL 解析文件地址：成回调，失败回调
// 成回调 entery.toLocalURl() 把文件地址解析为本地urL
uploader
Uploader模块管理网络上传任务，用于从本地上传各种文件到服务器，并支持跨域访问操作。通过plus.uploader可获取上传管理对象。Uploader上传使用HTTP的POST方式提交数据，数据格式符合Multipart/form-data规范，即rfc1867（Form-based File Upload in HTML）协议。
方法：
- createUpload: 新建上传任务
- clear: 清除上传任务
function upload(){
// 如果没有file 就提示
if(!file){plus.nativeUI.alert("你还没有选中文件啦");return;}
var url = "http://www.520mg.com/ajax/file.php";
var task = plus.uploader.createUpload(
url,
{method:'POST'},
(t,status)=>{
if(status==200){
console.log("上传成功");
var picurl = "http://www.520mg.com"+JSON.parse(t.responseText).pic;
// 图片的远程地址
var p = document.createElement("p");
// 创建p元素
p.innerHTML=`<img width="160" src="${picurl}"/>`;
// 设置p的内容为图片
picbox.appendChild(p);
// 把p内容插入到picbox里面
}else{
console.log("上传失败："+status);
}
})
// task上传的任务
// 上传地址 ，上传方法配置，回调函数
task.addFile(file,{key:"file"});
// 给上传任务添加文件
task.start();
// 开始上传
}
webview
Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作。通过plus.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默认是否开启硬件加速
示例：
var _openw = null;
function openAbout(){
if(_openw){return;}//防止快速点击；
_openw = plus.webview.create('./about.html','about',{
backButtonAutoControl:'close',//当返回的时候关闭webview（当前的窗口）
// 设置标题
titleNView:{
autoBackButton:true,//默认返回按钮
backgroundColor:"#F30", //标题栏颜色,
titleText:'关于我们',//标题栏文本,
titleColor:"#fff",
buttons:[{
type:'share',
onclick:()=>alert("分享被点击了")
}]
}
})
_openw.addEventListener('close',()=>_openw=null);//当关闭时候清空当前webView
_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');
}
网友评论