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;

}

相关推荐
00后程序员张11 小时前
iOS 上架费用全解析 开发者账号、App 审核、工具使用与开心上架(Appuploader)免 Mac 成本优化指南
android·macos·ios·小程序·uni-app·cocoa·iphone
前端与小赵18 小时前
uni-app开发安卓app时控制屏幕常亮不息屏
android·gitee·uni-app
2501_9160088919 小时前
HTTPS 请求抓包,从原理到落地排查的工程化指南(Charles / tcpdump / Wireshark / Sniffmaster)
ios·小程序·https·uni-app·wireshark·iphone·tcpdump
xiaohe060120 小时前
🥳 Uni ECharts 2.1 发布:正式支持鸿蒙,零成本迁移、全平台兼容、跨端开发零负担!
vue.js·uni-app·echarts
2501_915909061 天前
WebView 调试工具全解析,解决“看不见的移动端问题”
android·ios·小程序·https·uni-app·iphone·webview
2501_915106321 天前
App 怎么上架 iOS?从准备资料到开心上架(Appuploader)免 Mac 上传的完整实战流程指南
android·macos·ios·小程序·uni-app·iphone·webview
行走的陀螺仪2 天前
uni-app + Vue3 实现折叠文本(超出省略 + 展开收起)
前端·javascript·css·uni-app·vue3
小禾青青2 天前
uniapp安卓打包遇到报错:Uncaught SyntaxError: Invalid regular expression: /[\p{L}\p{N}]/
android·uni-app
环信即时通讯云2 天前
实现小程序 uniApp 输入框展示自定义表情包
小程序·uni-app
2501_915921432 天前
iOS 抓不到包怎么办?工程化排查与替代抓包方案(抓包/HTTPS/Charles代理/tcpdump)
android·ios·小程序·https·uni-app·iphone·tcpdump