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
	}
},
相关推荐
维双云6 分钟前
商城小程序在线收款怎么做:收款链路、订单流转和后台处理怎么接
小程序
Geek_Vison7 分钟前
APP集成了50多个小程序后,如何搭建一个小程序管理平台来管理这些小程序~
小程序·uni-app·apache·mpaas·小程序容器
人无远虑必有近忧!11 分钟前
fetch请求图片报跨域
前端·javascript
谢院柯12 分钟前
解决修改 node_modules 依赖库源码后重复安装问题的几种方案
前端
疯狂打码的少年15 分钟前
【程序语言与编译】NFA转DFA(子集构造法)
前端·笔记
半只小闲鱼16 分钟前
合并多个excel文件到一个文件中
前端·python·数据分析
fobwebs26 分钟前
Chrome谷歌浏览器多开教程,如何在电脑上同时登录多个GMAIL账号
前端·chrome·多开·同时登录多个gmail
万岳科技系统开发27 分钟前
教育培训小程序搭建中的AI题库功能解析
人工智能·小程序
前端 贾公子35 分钟前
小程序蓝牙打印探索与实践 (最终章)
前端·微信小程序·小程序
chushiyunen35 分钟前
vue export default
前端·javascript·vue.js