uniapp小程序,根据小程序的环境版本,控制的显页面功能按钮的示隐藏

需求:根据小程序环境控制控制页面某个功能按钮的显示隐藏;

下面是官方文档和功能实现的相关代码:

实现上面需要,用到了uni.getAccountInfoSync():

uni.getAccountInfoSync() 是一个 Uniapp 提供的同步方法,用于获取小程序的帐号信息。它可以获取当前小程序的一些基本信息,例如小程序的 AppId、小程序的类型、小程序的版本号等。

官方文档链接https://uniapp.dcloud.net.cn/api/other/getAccountInfoSync.html#getaccountinfosync

javascript 复制代码
const accountInfo = uni.getAccountInfoSync();
console.log(accountInfo.miniProgram.appId); // 小程序 appId
console.log(accountInfo.plugin.appId); // 插件 appId
console.log(accountInfo.plugin.version); // 插件版本号, 'a.b.c' 这样的形式

在项目中使用示例:

通过v-if控制按钮,或某一功能模块的显示隐藏,注意隐藏和显示后的页面样式

javascript 复制代码
<view class="nav-item" @click="modifyPassWord" v-if="vertifyIsShow">
	<image src="../../static/home/modifyPassWord.png" class="nav-img"></image>
	<text class="nav-text">重置密码</text>
</view>

在页面的onLoad()或者created()方法中,使用uni.getAccountInfoSync() API获取当前小程序环境版本

javascript 复制代码
created() {
	this.vertifyIsShow = false; // 初始化控制按钮隐藏
	const envVersion = uni.getAccountInfoSync().miniProgram.envVersion;
	if (envVersion === 'develop') {
	  // 开发版环境
	  this.vertifyIsShow = true
	} else if (envVersion === 'trial') {
		// 体验版环境
		this.vertifyIsShow = true
	} else if (envVersion === 'release') {
		// 正式版环境
		this.vertifyIsShow = false
	} else {
	  // 无法确定环境
	  this.vertifyIsShow = false
	}
},
相关推荐
不好听6137 小时前
从一行 JSX 到屏幕像素:前端开发者必须懂的浏览器渲染管线
前端
恒拓高科WorkPlus7 小时前
企业级内网即时通讯建设模型:BeeWorks内网IM四层架构
前端
前端小李子8 小时前
前端环境变量裸奔?我用 EnvShield 给它穿了件防弹衣
前端
youtootech8 小时前
HarmonyOS《柚兔学伴》项目实战25-我的页面、Web 嵌入与项目总结
前端·华为·harmonyos
小林ixn9 小时前
从零到一理解 React 父子组件通信:手写一个 Todo 应用带你彻底搞懂单向数据流
前端·javascript·react.js
三声三视9 小时前
uni-app 鸿蒙端传参变成 [object Object]?顺着源码追到 ArkTS router 底层才搞明白
人工智能·ai·uni-app·aigc·ai编程·harmonyos
醇氧10 小时前
CountDownLatch / CyclicBarrier / Semaphore 面试高频问答清单
前端·面试·职场和发展
qetfw12 小时前
MXU:Tauri 2 + React 的 MaaFramework 跨平台 GUI 源码
前端·python·react.js·前端框架·开源项目·效率工具
甲维斯12 小时前
我要开始吹牛逼了!Kimi K3 “宇宙无敌”!
前端·人工智能