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中动态添加class类名的方法

    vue中动态添加class类名的方法

    今天小编就为大家分享一篇vue中动态添加class类名的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 基于vue实现页面滚动加载的示例详解

    基于vue实现页面滚动加载的示例详解

    页面内容太多会导致加载速度过慢,这时可考虑使用滚动加载即还没有出现在可视范围内的内容块先不加载,出现后再加载,所以本文给大家介绍了基于vue实现页面滚动加载的示例,需要的朋友可以参考下
    2024-01-01
  • element表格变化后自动刷新的两种方案

    element表格变化后自动刷新的两种方案

    本文主要介绍了element表格变化后自动刷新的两种方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 解决Vue+Electron下Vuex的Dispatch没有效果问题

    解决Vue+Electron下Vuex的Dispatch没有效果问题

    这篇文章主要介绍了Vue+Electron下Vuex的Dispatch没有效果的解决方案 ,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue.js一个文件对应一个组件实践

    Vue.js一个文件对应一个组件实践

    Vue.js实现"一个文件对应一个组件",无需webpack等工具,按需加载组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Vue中的 watch监听属性详情

    Vue中的 watch监听属性详情

    这篇文章主要介绍了Vue中的 watch监听属性详情,mputed计算属性用来监听多个数据;watch 监听单个数据;本文将具体介绍的是 watch监听属性,感兴趣的小伙伴可以参考一下文章的具体内容,希望对你有所帮助
    2021-12-12
  • vue3自定义hooks/可组合函数方式

    vue3自定义hooks/可组合函数方式

    这篇文章主要介绍了vue3自定义hooks/可组合函数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue.js中v-on:textInput无法执行事件问题的解决过程

    vue.js中v-on:textInput无法执行事件问题的解决过程

    大家都知道vue.js通过v-on完成事件处理与绑定,但最近使用v-on的时候遇到了一个问题,所以下面这篇文章主要给大家介绍了关于vue.js中v-on:textInput无法执行事件问题的解决过程,需要的朋友可以参考下。
    2017-07-07
  • vue3使用百度地图超详细图文教程

    vue3使用百度地图超详细图文教程

    这篇文章主要给大家介绍了关于vue3使用百度地图的相关资料,最近一个项目要用到地图,因为微信小程序用的也是百度地图,所以想着网页端也用百度地图,需要的朋友可以参考下
    2023-07-07
  • vue3无法使用jsx的问题及解决

    vue3无法使用jsx的问题及解决

    这篇文章主要介绍了vue3无法使用jsx的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论