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中的Props(不可变状态)

    Vue中的Props(不可变状态)

    这篇文章主要介绍了Vue中的Props(不可变状态),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • vue使用webSocket更新实时天气的方法

    vue使用webSocket更新实时天气的方法

    本文将结合实例代码,介绍vue使用webSocket更新实时天气的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • 基于VUE选择上传图片并页面显示(图片可删除)

    基于VUE选择上传图片并页面显示(图片可删除)

    这篇文章主要为大家详细介绍了基于VUE选择上传图片并页面显示,图片可以删除的效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 在vue 中使用 less的教程详解

    在vue 中使用 less的教程详解

    这篇文章主要介绍了在vue 中使用 less 的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • Vue非父子组件通信详解

    Vue非父子组件通信详解

    这篇文章主要为大家详细介绍了Vue非父子组件通信的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Vue项目中Websocket的使用实例

    Vue项目中Websocket的使用实例

    WebSocket就诞生了,它最大特点就是服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,下面这篇文章主要给大家介绍了关于Vue项目中Websocket使用的相关资料,需要的朋友可以参考下
    2023-02-02
  • 基于Vue2.0的分页组件

    基于Vue2.0的分页组件

    这篇文章主要为大家详细介绍了基于Vue2.0的分页组件的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • vuepress打包之后页面样式丢失问题的两种解决方式

    vuepress打包之后页面样式丢失问题的两种解决方式

    这篇文章主要介绍了vuepress打包之后页面样式丢失问题的两种解决方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue中$event使用之获取当前元素及相关元素

    vue中$event使用之获取当前元素及相关元素

    这篇文章主要介绍了vue中$event使用之获取当前元素及相关元素,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue两种组件类型:递归组件和动态组件的用法

    Vue两种组件类型:递归组件和动态组件的用法

    这篇文章主要介绍了Vue两种组件类型:递归组件和动态组件的用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论