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
	}
},
相关推荐
说私域5 分钟前
留量为王,服务制胜:开源链动2+1模式、AI智能名片与S2B2C商城小程序的协同创新路径
人工智能·小程序·开源
小二·6 分钟前
Python Web 开发进阶实战:Flask 项目中的表单验证、错误处理与用户体验优化
前端·python·flask
天荒地老笑话么7 分钟前
IntelliJ IDEA 运行 Tomcat 报错:Please, configure Web Facet first!
java·前端·tomcat·intellij-idea
王五周八7 分钟前
html转化为base64编码的pdf文件
前端·pdf·html
神色自若10 分钟前
vue3 带tabs的后台管理系统,切换tab标签后,共用界面带参数缓存界面状态
前端·vue3
мо仙堡杠把子ご灬10 分钟前
微前端架构实践:避免Vuex模块重复注册的崩溃陷阱
前端
叫我:松哥15 分钟前
基于机器学习的地震风险评估与可视化系统,采用Flask后端与Bootstrap前端,系统集成DBSCAN空间聚类算法与随机森林算法
前端·算法·机器学习·flask·bootstrap·echarts·聚类
呆头鸭L19 分钟前
用vue3+ts+elementPlus+vite搭建electron桌面端应用
前端·vue.js·electron
aPurpleBerry19 分钟前
React Hooks(数据驱动、副作用、状态传递、状态派生)
前端·react.js·前端框架
IT_陈寒20 分钟前
2025年React生态最新趋势:我从Redux迁移到Zustand后性能提升40%的心得
前端·人工智能·后端