Vue中使用h5 Plus的实现方法

 更新时间:2023年10月31日 11:10:44   作者:我啥都会  
这篇文章主要介绍了Vue中使用h5 Plus的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

npm上Vue中使用的库数不胜数,作为移动App端的又一泰斗,h5 plus当然也是可以被使用进来的。

H5Plus是一种基于HTML、JS、CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能。

一、安装库

安装库

cnpm i vue-awesome-mui -S

如果没有cnpm那就npm吧!

二、引入

 main.js中引入

import Mui from 'vue-awesome-mui';
Vue.config.productionTip = false
Vue.use(Mui);

三、使用

xx.vue中  

<script>
  export default {
    name:'Profile',
    methods:{
      // 扩展API准备完成后要执行的操作
      plusReady () {
        var ws = plus.webview.currentWebview(); //pw回车可输出plus.webview
        console.log("hello plus");
      },
    },
    created () {
      // 扩展API是否准备好,如果没有则监听“plusready"事件
      if (window.plus) {
        this.plusReady()
      } else {
        document.addEventListener('plusready', this.plusReady, false) 
      }
    }
  }
</script>

四、demo

调用拍照的方法:

<ul class="mui-table-view">
   <li class="mui-table-view-cell" id="device.html" @click="getImage">
       <a class="mui-navigate-right">
           调用拍照
       </a>
   </li>
</ul>

在methods中添加方法: 

getImage () {
  let cmr = plus.camera.getCamera() // 获取摄像头对象
  let res = cmr.supportedImageResolutions[0] // 字符串数组,摄像头支持的拍照分辨率
  let fmt = cmr.supportedImageFormats[0] // 字符串数组,摄像头支持的拍照文件格式
  console.log('Resolution :' + res + ', Format: ' + fmt)
  cmr.captureImage ((path) => {
    alert('调用成功: ' + path)
  },
  (error) => { // 拍照操作失败的回调函数
    alert('调用失败: ' + error.message)
  },
  {resolution: res, format: fmt} // 摄像头拍照参数
  )
},

五、用hbuilder打包至App

注意细节:

1.将config文件夹里的index.js文件中assetsPublicPath由'/'改为 './';否则会出现白屏的问题

2.删除路由模式或者改为hash

运行:

npm run build

生成dist文件夹。

新建hbuilder 5+App项目,将dist目录下的东西全部放在5+App项目下,直接全部覆盖。

最终如图:

然后可以直接在hbuilderx中连接手机进行测试,可以看到结果:

打印出了webview的信息: 

 拍照接口效果截图:

六、总结

本文简单记录了一下vue中使用h5 plus的方法,并做了一个简单调用相机的例子,以后再开发App就可以用上Vue了。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue 路由跳转打开新窗口被浏览器拦截问题处理

    vue 路由跳转打开新窗口被浏览器拦截问题处理

    这篇文章主要介绍了vue 路由跳转打开新窗口被浏览器拦截问题处理,下面文章操作中所遇到相关问题解决的内容介绍详细,需要的小伙伴可以参考一下
    2022-03-03
  • vue-router 组件复用问题详解

    vue-router 组件复用问题详解

    本篇文章主要介绍了vue-router 组件复用问题详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue中Element UI组件库使用方法详解

    Vue中Element UI组件库使用方法详解

    ElementUI是Vue的UI框架,提供了丰富的组件,方便快速开发页面,本文详细介绍了ElementUI的安装、使用方法以及常见组件的说明,包括基础组件、布局组件、选择框组件、输入框组件、下拉框组件等,需要的朋友可以参考下
    2024-11-11
  • Vue项目前后端联调(使用proxyTable实现跨域方式)

    Vue项目前后端联调(使用proxyTable实现跨域方式)

    这篇文章主要介绍了Vue项目前后端联调(使用proxyTable实现跨域方式),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue实现购物车的小练习

    vue实现购物车的小练习

    这篇文章主要为大家详细介绍了vue实现购物车的小练习,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 解决vite项目Uncaught Syntaxerror:Unexpected token>vue项目上线白屏问题

    解决vite项目Uncaught Syntaxerror:Unexpected token>vue项

    这篇文章主要介绍了解决vite项目Uncaught Syntaxerror:Unexpected token>vue项目上线白屏问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 详解el-table表头文字换行的三种方式

    详解el-table表头文字换行的三种方式

    本文主要介绍了el-table表头文字换行的三种方式,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • Vue.js上下滚动加载组件的实例代码

    Vue.js上下滚动加载组件的实例代码

    本篇文章主要介绍了Vue.js上下滚动加载组件的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue中如何通过iframe方式加载本地的vue页面

    vue中如何通过iframe方式加载本地的vue页面

    这篇文章主要介绍了vue中如何通过iframe方式加载本地的vue页面,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue实现弹出框点击空白页弹框消失效果

    Vue实现弹出框点击空白页弹框消失效果

    这篇文章主要介绍了VUE实现弹出框点击空白页弹框消失,实现方法可以在Vue中实现弹出框然后通过点击空白页面来让弹窗隐藏,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-12-12

最新评论