快捷導(dǎo)航

Vue中使用h5 Plus的實現(xiàn)方法

更新時間：2023年10月31日 11:10:44 作者：我啥都會

這篇文章主要介紹了Vue中使用h5 Plus的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一、安裝庫

安裝庫

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:{
      // 擴(kuò)展API準(zhǔn)備完成后要執(zhí)行的操作
      plusReady () {
        var ws = plus.webview.currentWebview(); //pw回車可輸出plus.webview
        console.log("hello plus");
      },
    },
    created () {
      // 擴(kuò)展API是否準(zhǔn)備好，如果沒有則監(jiān)聽“plusready"事件
      if (window.plus) {
        this.plusReady()
      } else {
        document.addEventListener('plusready', this.plusReady, false) 
      }
    }
  }
</script>

四、demo

調(diào)用拍照的方法：

<ul class="mui-table-view">
   <li class="mui-table-view-cell" id="device.html" @click="getImage">
       <a class="mui-navigate-right">
           調(diào)用拍照
       </a>
   </li>
</ul>

在methods中添加方法：

getImage () {
  let cmr = plus.camera.getCamera() // 獲取攝像頭對象
  let res = cmr.supportedImageResolutions[0] // 字符串?dāng)?shù)組，攝像頭支持的拍照分辨率
  let fmt = cmr.supportedImageFormats[0] // 字符串?dāng)?shù)組，攝像頭支持的拍照文件格式
  console.log('Resolution :' + res + ', Format: ' + fmt)
  cmr.captureImage ((path) => {
    alert('調(diào)用成功: ' + path)
  },
  (error) => { // 拍照操作失敗的回調(diào)函數(shù)
    alert('調(diào)用失敗: ' + error.message)
  },
  {resolution: res, format: fmt} // 攝像頭拍照參數(shù)
  )
},