一、判断运行环境
在实际项目开发中,经常需要进行开发环境和生产环境的切换,uni-app可根据process.env.NODE_ENV判断当前运行环境是开发环境和生产环境,根据不同的环境调用不同的后台接口,具体实现方式:
在项目的static目录下建一个js目录,在js目录中再创建一个conf子目录,然后创建一个config.js文件:
let baseApi=process.env.NODE_ENV==='development'?"http://localhost":"http://www.xxx.com';
export default {
baseApi
}
接下来将config.js文件导入到main.js:
import App from './App';
import config from "./static/js/conf/config";
Vue.prototype.$config=config;
在pages/index/index.vue的onLoad可以这样调用进行测试:
onLoad((opts)=>{
console.log(this.$config.baseApi);
......
})
一、判断平台
1、编译期判断
uni-app平台判断包括编译期判断和运行期判断。编译期判断可以写在<script>标签、<template>标签和<style>标签,对于js文件,预编译标签使用//注释,.css文件使用/* */注释、.vue文件使用<!-----> ,换句话说,就是脚本处用//,css处用/**/,页面组件或元素处用<!---->
下面是页面组件处的写法:
js脚本处的写法:
css样式处的写法:
因为uni-app支持编译到多种平台,包括H5、微信小程序、APP等,所以预编译语句的平台编码有一套标准的定义,其中H5的编码为H5,微信小程序的编码为MP-WEIXIN,支付宝小程序的编码为MP-ALIPAY,APP的编码为APP-PLUS。
2 运行期判断
运行期判断指代码已经打入包中,需要再运行期间判断平台类型,可以使用uni.getSystemInfoSync().platform,示例:
switch(uni.getSystemInfoSync().platform){
case 'android':
console.log('安卓');
break;
case 'ios':
console.log('苹果');
break;
default:
console.log('其他');
break;
}