一站式解决方案:uni-app条件编译及多环境配置,appid动态修改攻略!

news/2024/5/25 10:38:31/文章来源:https://blog.csdn.net/weixin_64051447/article/details/136701659

前言

这篇文章主要介绍uniappHbuilderx 中,通过工程化,区分不同环境、动态修改小程序appid以及自定义条件编译,解决代码发布运行时手动切换到问题。

背景

在企业级的应用中,通常会分为,开发、联调、生产等多个环境,一个项目可能要发布到多个微信小程序,在工程化中,通过使用不同的打包命令设置不同的环境变量,解决不同环境各变量的内容需手动修改的问题,比如:接口、前缀、appid等;在使用uniapp开发项目时,通常使用Hbuilder可视化运行项目,点击运行编译出来都代码环境是(development),点击发布运行编译出来的代码是(production),分别对应开发和生产,使用process.env.NODE_ENV来获取运行环境。但是在很多企业项目中,就两个环境,很难满足使用场景。

为了解决以上问题,通过在package.json中增加增加 uni-app节点,自定义条件编译和环境,通过modifyManifest.js重写appid,扩展vue.config.js配置,用环境标识区分接口

一、自定义条件编译

以微信小程序为例,在做条件编译时候,只有一种判断条件

<!-- #ifdef MP-WEIXIN --><view>我是微信</view>
<!-- #endif -->
<!-- #ifdef H5 --><view>我是后</view>
<!-- #endif -->

但实际情况是,我们有两个微信主体,希望在不同主体展示不同信息:

<!-- #ifdef MP-CJN --><view>我是CJN</view>
<!-- #endif -->
<!-- #ifdef MP-YYT --><view>我是YYT</view>
<!-- #endif -->

package.json中新增uni-app官网自定义配置;

实际使用时,删除掉文件中所有的注释信息,否则编译时会报错。

{"uni-app": {"scripts": {"cjnDev": {"title":"小程序1-联调环境","env": {"UNI_PLATFORM": "mp-weixin","NAME": "cjnDev"},"define": {"MP-CJN": true}},"cjnTest": {"title":"小程序1-测试环境","env": {"UNI_PLATFORM": "mp-weixin","NAME": "cjnTest"},"define": {"MP-CJN": true}},"cjnProd": {"title":"小程序1-生产环境","env": {"UNI_PLATFORM": "mp-weixin","NAME": "cjnProd"},"define": {"MP-CJN": true}},"yytDev": {"title":"小程序2-联调环境","env": {"UNI_PLATFORM": "mp-weixin","NAME": "yytDev"},"define": {"MP-YYT": true}},"yytTest": {"title":"小程序2-测试环境","env": {"UNI_PLATFORM": "mp-weixin","NAME": "yytTest"},"define": {"MP-YYT": true}},"yytProd": {"title":"小程序2-生产环境","env": {"UNI_PLATFORM": "mp-weixin","NAME": "yytProd"},"define": {"MP-YYT": true}}}    }
}

注意:尽量保证yytProd和NAME值保持一致

以上代码以微信小程序在不同主体的展示为例,分别为小程序1(MP-CJN)、小程序2(MP-YYT),同时区分了三个环境,联调、测试和生产,配置好以后,我们在Hbuilder中点击运行和发行可以看到下面效果

ee70d202403091044358594.png

这时就可以使用<!-- #ifdef MP-YYT -->来实现在微信平台,区分不同主体的条件编译,通过环境变量process.env.NAME取得配置文件中NAME的信息

二、配置其他变量
创建`env.js`,存放相关环境变量的信息;我是在common中创建的,可以根据自己项目实际情况选择目录

module.exports = {// 小程序1联调环境cjnDev: {requestUrl: 'https://mp.com',appid: '小程序appid'},// 小程序1测试环境cjnTest: {requestUrl: '接口地址',appid: '小程序appid'},// 小程序1线上环境cjnProd: {requestUrl: '接口地址',appid: '小程序appid'}// 小程序2联调环境yytDev: {requestUrl: '接口地址',appid: '小程序appid'},// 小程序2测试环境yytTest: {requestUrl: '接口地址',appid: '小程序appid'},// 小程序2线上环境yytProd: {requestUrl: '接口地址',appid: '小程序appid'}
}

其中变量名 cjnDevcjnTestcjnProd等要跟package.json中的NAME一致,方便后续通过变量名取值。

在根目录下创建vue.config.js

let configUrl = require('./common/env.js');
// 动态修改appid,调试环境时,可以先注释掉
require('./src/modifyManifest.js');
module.exports = {chainWebpack: config => {config.plugin('define').tap(args => {args[0]['process.env.config'] = JSON.stringify(configUrl)return args})}
}

通过定义一个全局的变量process.env.config存储的就是env.js中的全部变量信息,此时就可以直接获取到当前运行所对应的配置信息

// 运行小程序1-联调环境 获得:https://mp.com
le url = process.env.config[process.env.NAME].requestUrl

动态修appid

appid在项目根目录的manifest.json内,动态修改逻辑是使用nodejsfs模块,通过方法readFileSync读取文件,然后跟进当前环境对内容进行修改,最后通过writeFileSync写入到manifest.json

src目录下创建modifyManifest.js划重点:一定得是在src目录下

let configUrl = require('../common/env.js');
const fs = require('fs');
// 读取 manifest.json
const manifestPath = `${process.env.UNI_INPUT_DIR}/manifest.json`
let Manifest = fs.readFileSync(manifestPath, { encoding: 'utf-8' })
/*** 替换 manifest.json 文件内容* @param {String} path 目标元素的键* @param {String} value 目标元素的值*/
function replaceManifest(path, value) {const arr = path.split('.')const len = arr.lengthconst lastItem = arr[len - 1]let i = 0let ManifestArr = Manifest.split(/\n/)for (let index = 0; index < ManifestArr.length; index++) {const item = ManifestArr[index]if (new RegExp(`"${arr[i]}"`).test(item)) ++i;if (i === len) {const hasComma = /,/.test(item)ManifestArr[index] = item.replace(new RegExp(`"${lastItem}"[\\s\\S]*:[\\s\\S]*`), `"${lastItem}": ${typeof value === 'string'? '"'+value+'"' : value}${hasComma ? ',' : ''}`)break;}}Manifest = ManifestArr.join('\n')
}
// 替换appid
const appid = configUrl[process.env.UNI_SCRIPT].appid;
replaceManifest('mp-weixin.appid', appid);
// 文件输出
fs.writeFileSync(manifestPath, Manifest, {"flag": "w"
})

关于环境变量,此时获取不到process.env.NAME,通过打印可以看到process.env.UNI_SCRIPT与NAME的值一致,这也是为什么我们前面强调:‘尽量保证yytProdNAME值保持一致’的原因。

f84c8202403091043466109.png

三、使用方式

1. 本地调试运行:Hbuilder->运行,选择对应的自定义环境执行

2. 上线发布:Hbuilder->发行->自定义发行,选择对应的自定义环境执行

3. 业务开发通过`process.env.config[process.env.NAME]`获取对应环境的变量对象

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1006359.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于CNN的图像超分辨率

单图像超分辨率 (Single image super resolution&#xff0c;SR) 是计算机视觉中的一个经典问题&#xff0c; 其目的是从单个低分辨率图像中恢复高分辨率图像。这个问题本质上是不适定的&#xff0c;因为对于任何给定的低分辨率像素都存在解决方案的多重性。换句话说&#xff0…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:DatePicker)

日期选择器组件&#xff0c;用于根据指定日期范围创建日期滑动选择器。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 DatePicker(options?: DatePickerOptions) 根据指定范…

Github 2024-03-13 开源项目日报 Top10

根据Github Trendings的统计,今日(2024-03-13统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Rust项目2Python项目2非开发语言项目2HTML项目1CSS项目1Dart项目1TypeScript项目1Go项目1JavaScript项目1《Hello 算法》:动画图解、一键运行的…

利用“定时执行专家”软件的25种任务与12种触发器,提升IT系统管理自动化水平

在IT系统管理中&#xff0c;自动化是提高工作效率、减少人为错误的关键。而《定时执行专家》这款软件&#xff0c;以其强大的功能、易用性和毫秒级的执行精度&#xff0c;成为了IT系统管理员的得力助手。今天&#xff0c;我们就来探讨一下如何利用这款软件的25种任务类型和12种…

Node.js入门基础—day01

个人名片&#xff1a; &#x1f60a;作者简介&#xff1a;一名大二在校生 &#x1f921; 个人主页&#xff1a;坠入暮云间x &#x1f43c;座右铭&#xff1a;给自己一个梦想&#xff0c;给世界一个惊喜。 &#x1f385;**学习目标: 坚持每一次的学习打卡 文章目录 初识node.js什…

vivo统一接入网关VUA转发性能优化实践

作者&#xff1a;vivo 互联网服务器团队 - Qiu Xiangcun 本文将探讨如何通过使用Intel QuickAssist Technology&#xff08;QAT&#xff09;来优化VUA的HTTPS转发性能。我们将介绍如何使用QAT通过硬件加速来提高HTTPS转发的性能&#xff0c;并探讨QAT在不同应用场景中的表现。最…

Day32:安全开发-JavaEE应用Servlet路由技术JDBCMybatis数据库生命周期

目录 JavaEE-HTTP-Servlet&路由&周期 JavaEE-数据库-JDBC&Mybatis&库 思维导图 Java知识点&#xff1a; 功能&#xff1a;数据库操作&#xff0c;文件操作&#xff0c;序列化数据&#xff0c;身份验证&#xff0c;框架开发&#xff0c;第三方库使用等. 框架…

数据结构与算法——排序(C语言实现)

✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ &#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1…

探索Java高并发编程之道:理论与实践

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 简介 随着互联网和信息技术的快速发展&#x…

使用Nginx进行负载均衡

什么是负载均衡 Nginx是一个高性能的开源反向代理服务器&#xff0c;也可以用作负载均衡器。通过Nginx的负载均衡功能&#xff0c;可以将流量分发到多台后端服务器上&#xff0c;实现负载均衡&#xff0c;提高系统的性能、可用性和稳定性。 如下图所示&#xff1a; Nginx负…

【JavaScript 漫游】【036】CORS 通信总结

文章简介 CORS 是一个 W3C 标准&#xff0c;全称是“跨域资源共享”&#xff08;Cross-origin resource sharing&#xff09;。它允许浏览器向跨域的服务器&#xff0c;发出 XMLHttpRequest 请求&#xff0c;从而克服了 AJAX 只能同源使用的限制。 本篇文章为【JavaScript 漫…

拼图小游戏制作教程:用HTML5和JavaScript打造经典游戏

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

mysql中的非空间数据导入sqlserver中空间化

以下操作都在Navicat Premium 15软件中操作 1、mysql导出数据 以导出csv为例 不修改导出路径的话默认就是在桌面 设置编码UTF-8 这边还是默认,最好不要修改,如果文本识别符号为空,导入的时候可能字段会错乱 开始即可 2、导入sqlserver数据库中

通过Maven创建Web工程

通过Maven创建Web工程 方式一方式二 方式一 1.先创建一个Maven工程 2.把该Maven模块的pom文件里添加一个war 3.选中该Maven模块 点击项目架构 4.手动添加一个Web架构 方式二 1.也是new一个模块 但是直接配置好Web 2.这里就是我IDEA对Maven的设置 3.第一次创建 可能…

第六篇【传奇开心果系列】Python的自动化办公库技术点案例示例:大学生数据全方位分析挖掘经典案例

传奇开心果博文系列 系列博文目录Python的自动化办公库技术点案例示例系列 博文目录前言一、Pandas库全方位分析挖掘大学生数据能力介绍二、大学生学生成绩数据分析数据挖掘示例代码三、大学生选课数据分析数据挖掘示例代码四、大学生活动参与数据分析数据挖掘示例代码五、大学…

我用Coze给自己的服务号加了一个多功能的GPT服务机器人

我用Coze给自己的服务号加了一个多功能的GPT服务机器人&#xff0c;可以查新闻&#xff0c;交互式回答问题&#xff0c;查快递&#xff0c;画图画&#xff0c;联网回答问题 可以查快递 试用&#xff1a;搜索觉醒AI

Excel判断CD两列在EF两列的列表中是否存在

需求 需要将CD两列的ID和NAME组合起来&#xff0c;查询EF两列的ID和NAME组合起来的列表中是否存在&#xff1f; 比如&#xff0c;判断第二行的“123456ABC”在EF的第二行到第四行中是否存在&#xff0c;若存在则显示Y&#xff0c;不存在则显示N 实现的计算公式 IF(ISNUMBER…

软考72-上午题-【面向对象技术2-UML】-UML中的图3

一、状态图 1-1、状态图的定义 状态图&#xff0c;展现了一个状态机&#xff0c;由&#xff1a;状态、转换、事件和活动组成&#xff0c;是系统的动态视图。 活动(动作) 可以在状态内执行也可以在状态转换(迁移) 时执行。 状态图强调&#xff1a;行为的事件顺序。 1-2、状态图…

4G安卓核心板T310_紫光展锐平台方案

紫光展锐T310应用 DynamlQ架构 12nm 制程工艺&#xff0c;采用 1*Cortex-A753*Cortex-A55处理器&#xff0c;搭载Android11.0操作系统&#xff0c;主频最高达2.0GHz.此外&#xff0c;DynamlQ融入了AI神经网络技术&#xff0c;新增机器学习指令&#xff0c;让其在运算方面的机器…

BigDL-LLM 安装指南——在iGPU集成显卡下使用BigDL-LLM大模型库加速LLM

文章目录 iGPU是什么&#xff1f;一、环境准备1.1 Visual Studio 2022 Community 安装1.2 安装或更新最新版本的GPU驱动程序1.3 安装英特尔oneAPI工具包2024.0版本1.4 安装Anaconda 二、BigDL -LLM 安装2.1 创建虚拟环境2.2 激活虚拟环境2.3 安装bigdl-llm[xpu] 三、运行环境配…