Hbuild混合开发h5实用方法

最新推荐文章于 2024-07-17 15:29:04 发布

web前端进阶者

最新推荐文章于 2024-07-17 15:29:04 发布

阅读量614

点赞数 17

分类专栏： Hbuild混合开发App 文章标签：前端

本文链接：https://blog.csdn.net/u014708123/article/details/135012065

版权

Hbuild混合开发App 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

热更新-下载安装包

// 下载热更新包
downloadWgt(url, newVersion) {
    // 原生弹窗
    plus.nativeUI.showWaiting('正在下载更新包...');
    // 建立一个下载任务
    plus.downloader.createDownload(url, {filename: '_doc/update/'}, function(d, status) {
        if (status === 200) {
            // 安装wgt
            installApp(d.filename, newVersion);
        } else {
            // 原生弹窗
            plus.nativeUI.alert('更新包下载失败，请尝试到应用市场下载安装');
        }
        // 关闭原生弹窗
        plus.nativeUI.closeWaiting();
    }).start();
 },
 // 安装并重启应用
installApp(path, newVersion) {
    // 原生弹窗
    plus.nativeUI.showWaiting('安装文件...');
    plus.runtime.install(path, {force: true}, function() {
        /* 更新本地版本号newVersion
            setNewVersion(VERSION, newVersion);
        */
        plus.nativeUI.closeWaiting();
        // 原生弹窗
        plus.nativeUI.alert('应用资源更新完成!',function(){
            // 重启应用
            plus.runtime.restart();
        });
    }, function(e) {
        // 原生弹窗
        plus.nativeUI.closeWaiting();
        plus.nativeUI.alert('安装文件失败[' + e.code + ']：' + e.message);
        plus.nativeUI.alert('请尝试到应用市场下载安装');
    });
},

跳转地图

// 跳转高德地图
openAMap(info) {
    let plus = window.plus;
    var url = null, id = null, f = null;
    switch (plus.os.name) {
    case 'Android':
        // 规范参考官方网站：http://lbs.amap.com/api/uri-api/android-uri-explain/
        url = `androidamap://viewMap?sourceApplication=${this.app}&poiname=${encodeURI(info.address)}&lat=${info.latitude}&lon=${info.longitude}&dev=0`;
        f = this.androidMarket;
        id = 'com.autonavi.minimap';
        break;
    case 'iOS':
        // 规范参考官方网站：http://lbs.amap.com/api/uri-api/ios-uri-explain/
        url = `iosamap://viewMap?sourceApplication=${encodeURI(this.app)}&poiname=${encodeURI(info.address)}&lat=${info.latitude}&lon=${info.longitude}&dev=0`;
        f = this.iosAppstore;
        id = 'itunes.apple.com/cn/app/gao-tu-zhuan-ye-dao-hang-ban/id461703208?mt=8';
        break;
    default:
        break;
    }
    plus.runtime.openURL(url, function(e) {
        plus.nativeUI.confirm(`检查到您未安装"高德地图"，是否到商城搜索下载？`, function(i) {
            if (i.index === 0) {
                f(id);
            }
        });
    }, id);
},
// 跳转百度地图
openBMap(info) {
    let plus = window.plus;
    var url = null, id = null, f = null;
    switch (plus.os.name) {
    case 'Android':
        url = `baidumap://map/marker?location=${info.latitude},${info.longitude}&title=${encodeURI(info.address)}&content=${encodeURI(info.stationNames)}&src=${encodeURI(this.app)}`;
        f = this.androidMarket;
        id = 'com.baidu.BaiduMap';
        break;
    case 'iOS':
        url = `baidumap://map/marker?location=${info.latitude},${info.longitude}&title=${encodeURI(info.address)}&content=${encodeURI(info.stationNames)}&src=${encodeURI(this.app)}`;
        f = this.iosAppstore;
        id = 'itunes.apple.com/cn/app/bai-du-de-tu-yu-yin-dao-hang/id452186370?mt=8';
        break;
    default:
        break;
    }
    plus.runtime.openURL(url, function(e) {
        plus.nativeUI.confirm(`检查到您未安装"百度地图"，是否到商城搜索下载？`, function(i) {
            if (i.index === 0) {
                f(id);
            }
        });
    });
},

ios指向应用商店

plus.runtime.openURL(url);

视频播放

// id: DOM节点id styles: {播放器控件参数}
let videoPlay = plus.video.VideoPlayer(id, {
   src: src, // 视频资源地址
   showPlayBtn: false, // 是否显示视频底部控制栏的播放按钮
   controls: false, // 是否显示默认播放控件
   width: '100%'
 });
 // 播放
 videoPlay.play();

摄像

videoCapture() {
  var cmr = plus.camera.getCamera();
  var res = cmr.supportedVideoResolutions[0];
  var fmt = cmr.supportedVideoFormats[0];
  var _this = this;
  cmr.startVideoCapture(path => {
    // 可以拿到临时路径进行展示
    // plus.io.convertLocalFileSystemURL(path);
    // 上传视频
    createUpload(path);
  }, error => { // 拍摄失败
  }, {
    resolution: res,
    format: fmt,
    videoMaximumDuration: 15
  });
}，
createUpload(file) {
   let task = window.plus.uploader.createUpload(url, {method: 'POST'}, (res, status) => {
     if (status === 200) {
     } else { // 上传失败
     }
   });
   task.addFile(file, {key: 'file'});
   task.start();
 },

图片下载保存

// 新建一个下载任务
var dtask = window.plus.downloader.createDownload(url, {
  filename: localImageUrl
}, function(d, status) {
  if (status === 200) {
    plus.gallery.save(d.filename, () => {
      /** 下载成功后-可以删除临时文件
      plus.io.resolveLocalFileSystemURL(d.filename, function(entry) {
           entry.remove();
      }); */
    }, (error) => {
    });
  } else {
   // 失败
  }
});
// 任务开始
dtask.start();

图片上传

// 调用原生UI按钮
window.plus.nativeUI.actionSheet({
    cancel: '取消',
    buttons: [{title: '拍照'}, {title: '从相册选择'}]
}, function(e) {
  if (e.index === 1) { // 拍照
    _this.getImage();
  } else if (e.index === 2) { // 从相册选择
    _this.galleryImgs();
  }
});
// 拍照
getImage() {
    var cmr = window.plus.camera.getCamera();
    var _this = this;
    cmr.captureImage(function(p) {
        // 处理图片
        handleImg(p);
    }, function(e) {}, {
        filter: 'image'
    });
},
// 处理图片
handleImg(url) {
    plus.io.resolveLocalFileSystemURL(url, function(entry) {
        entry.file(function(file) {
            // 如果超出限制就压缩图片
            if (file.size / 1024 > 1000) {
                compressImage(entry.toLocalURL(), entry.name, _this.upload);
            } else {
                // 上传图片
                upload(url);
            }
        });
    }, function(e) { // 读取拍照文件错误
    });
},
// 压缩图片
compressImage(url, filename, cb, er) {
    var name = '_doc/upload/' + filename;
    plus.zip.compressImage({
        src: url, // src: (String 类型 )压缩转换原始图片的路径
        dst: name, // 压缩转换目标图片的路径
        format: 'jpg',
        quality: 20, // quality: (Number 类型 )压缩图片的质量.取值范围为1-100
        overwrite: true // overwrite: (Boolean 类型 )覆盖生成新文件
    }, function(zip) {
        // 压缩成功上传图片
        cb && cb(zip.target);
    }, function() {
        er && er('图片压缩失败');
    });
},
// 从相册选择照片
galleryImgs() {
    plus.gallery.pick(function(e) {
        // 处理-相册选择照片-递归
        handleRestructureAlbum(e.files, 0);
    }, function(e) { // 用户取消了选择        
    }, {
        filter: 'image',
        multiple: true,
        maximum: 2, //设置还可以上传的图片数量limitNu
        system: false
    });
},
// 处理-相册选择照片
handleRestructureAlbum(list, index) {
    // 递归超出return
    if (index > list.length - 1) {return;};
    let url = list[index];
    plus.io.resolveLocalFileSystemURL(url, function(entry) {
     entry.file(function(file) {
       if (file.size / 1024 > 1000) { // 压缩图片并上传
         _this.compressImage(entry.toLocalURL(), entry.name, (zip) => {
           _this.upload(zip).then(() => { // 上传成功递归
             index++;
             handleRestructureAlbum(list, index);
           }).catch(() => { // 上传失败});
         }, () => { // 图片压缩失败 });
       } else { // 直接上传
         _this.upload(url).then(() => {
           index++;
           handleRestructureAlbum(list, index);
         }).catch(() => { // 图片上传失败 });
       }
     });
   }, function(e) { // 读取拍照文件错误e.message
   });
 },
// 创建上传图片
upload(url) {
    return new Promise((resolve, reject) => {
      let serverUrl = process.env.SERVER_HOST + '/common/uploadImage.do';
      let _this = this;
      let task = plus.uploader.createUpload(serverUrl, {
        method: 'POST'
      }, function(res, status) {
        // 上传完成
        if (status === 200) {
          resolve();
        } else {
          reject('图片上传失败');
        }
      });
      // 所上传文件
      task.addFile(url, {key: 'file'});
      // 开始上传任务
      task.start();
    });
},