cordova+vue构建app进阶 _cordova

莫问天涯路几重，轻衫侧帽且从容。这篇文章主要讲述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()}` }); },

【cordova+vue构建app进阶】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了，完美适配一切