cordova+vue构建app进阶

Posted 阿布大人

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了cordova+vue构建app进阶相关的知识,希望对你有一定的参考价值。

显示app版本

效果:

 

在cordovaAppPpdate.js中,声明方法
由于vue项目是内嵌在cordova中的,所以 可以直接调用cordova插件注册的各种类名和方法
//获取最新版本
function getVersion() { var xmlhttp, xmlDoc; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET", "https://api.tooqing.com/android/version.xml", false); xmlhttp.send(); xmlDoc = xmlhttp.responseXML; var versionCode = xmlDoc.getElementsByTagName("version")[0].childNodes[0].nodeValue; if (versionCode) { return versionCode } else { return ""; } }
/**当前版本 */
function getnowVersion() {
  var versionCode = AppVersion.build;
  if (versionCode) {
    return versionCode;
  } else {
    return "";
  }
}

  

  使用的地方

   gameSetting(): void {
      this.$dialog({
        title: "设置",
        message: `当前版本:${getnowVersion()}<br/>"最新版本:"${getVersion()}`
      });
    },

  vue项目+rem

  选了好久,。还是用postcss-pxtorem 这个吧。

  第一步: yarn add postcss-pxtorem --save  or  npm add postcss-pxtorem --save

  第二步: 在postcss.config.css(vue-cli3.0自动生成的,)中 

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ["Android >= 4.0", "ios >= 7"]
    },
    "postcss-pxtorem": {
      rootValue: 37.5, //结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem
      propList: ["*"]
    }
  }
};
如果你没有这个js 就在vue.config.js里面写,如果这个js也没有,就新建一个这个js 跟src同级。

  第三步:在index.html里面

    window.onresize = function() {
      setRem();
    };
    function setRem() {
      // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
      let htmlWidth =
        document.documentElement.clientWidth || document.body.clientWidth;
      //得到html的Dom元素
      let htmlDom = document.getElementsByTagName("html")[0];
      //设置根元素字体大小
      htmlDom.style.fontSize = htmlWidth / 10 + "px";
    }
    // 初始化
    setRem();

  ok了,完美适配一切

 

以上是关于cordova+vue构建app进阶的主要内容,如果未能解决你的问题,请参考以下文章

构建vue+ionic+cordova项目,开发全平台APP

cordova+vue构建app

Cordova+vue 混合app开发创建Cordova项目

Cordova+vue 混合app开发创建Cordova项目

Cordova 4.0 上的 Android 片段内的 Cordova webview

用Cordova把react app 打包成原生的iOS项目