前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于Vue+cordova开发webapp并调用Native功能 实践

基于Vue+cordova开发webapp并调用Native功能 实践

作者头像
安德玛
发布2022-03-09 08:19:58
1.1K0
发布2022-03-09 08:19:58
举报
文章被收录于专栏:Cordova封装H5 APP

安装cordova,安装vue-cli: npm i cordova -g,npm i -g vue-cli 。

使用cordova初始化项目并安装android平台:

代码语言:javascript
复制
使用命令行进入开发目录:
执行: cordova create vueapp此命令会生成vueapp目录,vueapp即是完整的cordova项目

进入vueapp目录:
执行:cordova platform add android执行 cordova build android,会将项目默认的示例打包成apk,目录在 vueapp\platforms\android\build\outputs\apk下,直接copy到手机进行安装即可。注:在进行build过程中,会用到sdk相关平台包,按要求进行安装。

使vueapp项目支持相关插件:

代码语言:javascript
复制
在vueapp目录下执行安装插件命令:

cordova plugin add cordova-plugin-geolocation  #支持手机位置获取
cordova plugin add cordova-plugin-camera  #支持手机相机与相册调用
cordova plugin add cordova-plugin-vibration #支持调用手机振动
cordova plugin add phonegap-plugin-barcodescanner #支持手机扫描二维码

创建Vue项目:

代码语言:javascript
复制
在vueapp目录下:
执行 vue init webpack src
此命令会生成src目录,进入src目录:
执行 npm i

修改src下的index.html,加入cordova.js

修改src下config目录下index.js,使其build生成到www目录下,因为cordova生成app时是读取www目录的内容:

将src下默认生成的HelloWord.Vue中的显示内容删除,直接修改App.vue,代码如下:

代码语言:javascript
复制
<template>
  <div id="app">
    <img :src="imgsrc" width="64" height="64"><br/>
    
    <button @click="getposition(1)">获取位置</button>
    <span>{{msg}}</span><br/>

    <button @click="getimage()">显示本地图片</button>
    <button @click="getcode()">获取二维码</button><br/>
    <span>{{codeinfo}}</span>

    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data:function(){
    return {
      imgsrc:'./static/logo.png',
      msg:'cordova not init',
      codeinfo:''
    }
  },
  methods:{
    getcode()
    {
      var me = this;
      cordova.plugins.barcodeScanner.scan(
      function (result) {
          me.codeinfo="We got a barcode\n" +
                "Result: " + result.text + "\n" +
                "Format: " + result.format + "\n" +
                "Cancelled: " + result.cancelled;
      }, 
      function (error) {
          alert("Scanning failed: " + error);
      }
   );
    },
    getimage()
    {
      var me= this;
      navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
          destinationType: Camera.DestinationType.FILE_URI,sourceType:0 });

      function onSuccess(imageURI) {          
          me.imgsrc = imageURI;
      }

      function onFail(message) {
          alert('Failed because: ' + message);
      }
    },
    getposition:function(val)
    {
      navigator.vibrate(500);
      var me = this;
       var onSuccess = function(position) {
        me.msg='Latitude:\t'          + position.coords.latitude          + '\n' +
              'Longitude:\t'         + position.coords.longitude         + '\n' +
              'Altitude:\t'          + position.coords.altitude          + '\n' +
              'Accuracy:\t'          + position.coords.accuracy          + '\n' +
              'Altitude Accuracy:\t' + position.coords.altitudeAccuracy  + '\n' +
              'Heading:\t'           + position.coords.heading           + '\n' +
              'Speed:\t'             + position.coords.speed             + '\n' +
              'Timestamp:\t'         + position.timestamp                + '\n';
    };

    // onError Callback receives a PositionError object
    //
    var error= function(error) {
        me.msg='code: '    + error.code    + '\n' +
              'message: ' + error.message + '\n';
    }

    navigator.geolocation.getCurrentPosition(onSuccess, error,{maximumAge: 30000, timeout: 30000, enableHighAccuracy: val});
    }
  },
  mounted(){
    document.addEventListener("deviceready", onDeviceReady, false);
    var me = this;
    function onDeviceReady() {
        me.msg="cordova is ready";
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
  1. 在src目录下使用npm run build 打包vue项目,所生成的相关文件全部进入www目录下。
  2. 再次进入vueapp目录,执行 cordova build android  ,生成相关APK,copy并安装apk。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档