H5+

1、打开HBuilderX App版

新建项目

配置模拟器端口

device

Device模块管理设备信息，用于获取手机设备的相关信息，如IMEI、IMSI、型号、厂商等。通过plus.device获取设备信息管理对象。

属性：

• imei: 设备的国际移动设备身份码
• imsi: 设备的国际移动用户识别码
• model: 设备的型号
• vendor: 设备的生产厂商
• uuid: 设备的唯一标识

信息获取
uuid：
os: 
厂商: 
网络：

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可获取运行环境管理对象。

方法

• quit: 退出应用
• restart: 重启当前的应用

运行时
 
  退出应用 | 
  重启应用


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: 从系统相册选择文件（图片或视频）
• save: 保存文件到系统相册中

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=``;
          // 设置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=``;
        // 设置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');
        }