• 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错。

  • 相关阅读:
    c++ 在window下创建窗口的基本步骤
    visual studio 2015 安装MSDN全称Microsoft Developer Network 安装离线的MSDN
    interp1一维数据插值在matlab中的用法
    Win32控制台、Win32项目、MFC项目、CLR控制台、CLR空项目、空项目区别
    C# 中的延时的方法。
    C#入门——Console.Write()与Console.WriteLine()
    php发送短信验证码
    来自联想、百度的团队,带着颠覆的理想,做短信服务平台
    python发送短信验证码
    uperTextView-从未如此惊艳!一个超级的TextView
  • 原文地址:https://www.cnblogs.com/nozer1993/p/11902175.html
Copyright © 2020-2023  润新知