Html5Plus(h5+)+Vue開發的研習記錄


耗費了不少時間在Cordova、H5+上面,最終還是在項目中選擇了H5+,原因是因為不需要安裝本地SDK。畢竟對於IOS來說它必須是需要一台蘋果電腦的。而H5+的雲打包解決了這個問題。

前面立項前也是構思使用H5+和MUI來做開發的,但是由於某些因數最終是用了vue3,將webpack打包之后的dist再拿到Hbuilder打包成APP。
期間確實有一些需要解決的問題,例如微信支付的應用簽名,APK的簽名等等。(有關APK簽名的在其他博文里面有介紹,此處不詳說)

解決方案

回到正題,要讓vue能夠調用H5+的東西,先要搞清楚原理。無論是Cordova還是H5+,他們所通過的方式都是在Webview注入了一個對象,在代碼中通過window.plus調用。因為注入的過程和頁面文檔的加載並非是先后順序進行的,所以在文檔中調用plus對象時,需要先判斷當前的plus是否已經初始化完畢了。這里,可以采用官方提供的事件來判斷:plusready
官方示例Demo如下:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"/>  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
    <title>Hello world</title>  
    <script type="text/javascript">   
// 擴展API是否准備好,如果沒有則監聽“plusready"事件  
if(window.plus){  
    plusReady();  
}else{   
    document.addEventListener( "plusready", plusReady, false );  
}  
// 擴展API准備完成后要執行的操作  
function plusReady(){  
    // ... code  
}  
    </script>   
</head>   
<body>  
</body>  
</html>

官方的文檔也有說明,當擴展API准備好之后,那么就可以在javascript中調用plus對象,從而實現對APP的底層方法的調用,例如攝像頭,設備識別碼等。

我們在vue的assets/js/目錄中新建一個js文件 plusextends.js 內容如下:

const plusExtends = fn => {
  if (window.plus) {
    setTimeout(fn, 0)
  } else {
    document.addEventListener('plusready', fn, false)
  }
} 
export default plusExtends

然后,在main.js 添加下面的內容,以便於在vue組件中直接調用:

import plusExtends from './assets/js/plusextends.js'

Vue.prototype.$plusExtends = plusExtends

完成上述操作之后,便可以在任意的Vue文件中調用H5+的plus對象了。示例:

<template>
<div>></div>
</template>
<script>
export default{
methods:{
this.$plusExtends(()=>{
var cmr = window.plus.camera.getCamera();
cmr.captureImage((path )=>{
alert(path)
})
})
}
}
</script>

通過上面的代碼,即可成功的調起系統的攝像頭進行拍照。

Cordova的整合方式其實也是類似的,但是要注意,在使用plus對象的時候要通過window.plus來使用。否則esline會報plus undefined錯。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM