cordova+vue构建app进阶

Posted 2021-03-22 阿布大人

显示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了，完美适配一切