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

前言

这篇文章主要介绍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.hqwc.cn/news/539540.html

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

相关文章

AJAX 02 案例、Bootstrap框架

AJAX 学习 AJAX 2 综合案例黑马 API01 图书管理Bootstrap 官网Bootstrap 弹框图书管理-渲染列表图书管理-添加图书图书管理-删除图书图书管理 - 编辑图书 02 图片上传03 更换图片04 个人信息设置信息渲染头像修改补充知识点&#xff1a;label扩大表单的范围 AJAX 2 综合案例 黑…

ArrayList 是如何进行扩容的?

典型回答 ArrayList 在添加元素时&#xff0c;会自动进行扩容操作&#xff0c;它的执行步骤如下&#xff1a; 当 ArrayList 的内部数组空间不足以容纳新增的元素时&#xff0c;会触发扩容机制。ArrayList 会创建一个新的更大的数组&#xff0c;通常是当前数组长度的 1.5倍 (可…

Kafka-生产者报错javax.management.InstanceAlreadyExistsException

生产者发送消息到 kafka 中,然后控制台报错 然后根据日志查看 kafka 的源码发现了问题原因 说的是MBean已经注册了,然后报异常了,这样就会导致生产者的kafka注册失败, 原因是项目上生产者没有配置clientId,默认都是空导致的, 多个生产者(项目)注册到kafka集群中的 id 都相同。 …

Maven3.6.3安装与配置,IDEA2022.2.3部署Maven操作步骤

1、先确保安装了Java开发环境&#xff0c;并配置了JAVA_HOME环境变量 WinR ,输入cmd,然后输入命令echo %JAVA_HOME%,查看JDK &#xff0c;接着输入java -version,查看java的版本号 接着系统变量中&#xff0c;配置JAVA_HOME环境变量 2、官网下载MAVEN3.6.3&#xff0c;Maven3.…

【计算机网络】概述 习题

体系结构 练习题 体系结构 真题 时延相关习题 参考公式&#xff1a; 习题1 题解&#xff1a; 发送时延1b 然后通过传播时延传到对面。即1b的发送时延剩下的传播时延 习题1扩展&#xff1a; 将距离修改为20米&#xff0c;其他条件不变。 将距离修改为10米&#xff0c;其他条…

sqllab第二十二关通关笔记

知识点&#xff1a; cookie注入报错注入 直接抓取对应的数据包&#xff0c;发现还是一个cookie注入 参数值被base64加密了 测试这里使用什么手段读取输入 构造payload:uname1 base64加密&#xff1a;MSc 出现了hacker的页面&#xff0c;说明信息错误但是单引号没起作用 使…

Node.js入门基础—day01

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

【Redis】Redis常用命令之Hash

1.hset&#xff1a;设置hash中指定的字段&#xff08;field&#xff09;的值&#xff08;value&#xff09;。 HSET key field value [field value ...]时间复杂度&#xff1a;插⼊⼀组field为O(1),插⼊N组field为O(N)。 返回值&#xff1a;添加的字段的个数。 2.hget&#xf…

爬虫逆向实战(35)-MyToken数据(MD5加盐)

一、数据接口分析 主页地址&#xff1a;MyToken 1、抓包 通过抓包可以发现数据接口是/ticker/currencyranklist 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看“载荷”模块可以发现有一个code参数 请求头是否加密&#xff1f; 无 响应是否加密&#xf…

GPT-4.5 Turbo:意外曝光且可能在六月份推出

国外网络媒体THE DECODER的联合创始人兼出版人Matthias认为&#xff0c;人工智能技术将彻底改变人类和计算机的互动方式。最新消息显示&#xff0c;OpenAI的最新力作GPT-4.5 Turbo已经在网络上意外曝光。首批发现此信息的是Bing和DuckDuck Go等搜索引擎&#xff0c;它们在官方发…

3/14/24数据结构、线性表

目录 数据结构 数据结构三要素 逻辑结构 存储结构 数据运算 时间复杂度 空间复杂度 线性表 线性表定义 静态分配 动态分配 线性表插入 线性表删除 十天的时间学完了C语言督学课程&#xff0c;最后终于是可以投入到408的科目学习当中。关于数据结构和算法的学习很多部…

LeetCode2115. 从给定原材料中找到所有可以做出的菜

拓扑排序 题面 题目链接&#xff1a;2115. 从给定原材料中找到所有可以做出的菜 - 力扣&#xff08;LeetCode&#xff09; 你有 n 道不同菜的信息。给你一个字符串数组 recipes 和一个二维字符串数组 ingredients 。第 i 道菜的名字为 recipes[i] &#xff0c;如果你有它 所有…