uni-app快速入门（五）--判断运行环境及针对不同平台的条件编译

一、判断运行环境

在实际项目开发中，经常需要进行开发环境和生产环境的切换，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;

}

原文地址：https://blog.csdn.net/baozhengw/article/details/143800516

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！