当前位置：首页 > article >正文

升级《在线写python》小程序的分享功能。昨天忘了...

article 2025/1/22 12:12:02

小程序是使用uniapp写的，忘了开启分享功能，导致它现在是这样的。
在这里插入图片描述
挺不方便的，所以需要开启分享权限，
由于我这个没有其他需要隐藏的私密页面，所以事直接全局开启就行

在App.vue文件里的onShow里开启即可。加入如下代码：

uni.getSystemInfo({
				success: res => {
					if (res.uniPlatform === 'mp-weixin') {
						uni.showShareMenu({
							withShareTicket: true,
							menus: ['shareAppMessage', 'shareTimeline']
						});
					}
				}
			});

开启后就是这样的
在这里插入图片描述

App.vue 完整代码如下：

<script>
	export default {
		onLaunch: function() {
			console.log('onLaunch')
		},
		onShow: function() {
			console.log('App Show')
			// 在微信小程序内显示分享按钮
			uni.getSystemInfo({
				success: res => {
					if (res.uniPlatform === 'mp-weixin') {
						uni.showShareMenu({
							withShareTicket: true,
							menus: ['shareAppMessage', 'shareTimeline']
						});
					}
				}
			});
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import "@/uni_modules/uview-plus/index.scss";
	@import "@/static/cxx.scss";
</style>

代码详细解释

由chatgpt编写

这段代码是一个 uniapp 应用的生命周期管理代码，它定义了应用在不同状态下的行为，并且在 onShow 生命周期方法中判断平台并展示分享按钮。具体解释如下：

1. `onLaunch` 方法

onLaunch: function() {
    console.log('onLaunch')
}

作用：该方法会在应用初始化时调用，也就是说，当应用第一次启动时，这个函数会被执行。通常用来做应用初始化配置或者获取一些基础数据。
这里：console.log('onLaunch') 是用来输出日志，表示应用已经启动。

2. `onShow` 方法

onShow: function() {
    console.log('App Show')
    // 在微信小程序内显示分享按钮
    uni.getSystemInfo({
        success: res => {
            if (res.uniPlatform === 'mp-weixin') {
                uni.showShareMenu({
                    withShareTicket: true,
                    menus: ['shareAppMessage', 'shareTimeline']
                });
            }
        }
    });
}

作用：onShow 方法在每次应用被打开（无论是启动还是从后台恢复到前台）时调用。可以用来做一些界面更新、数据加载等操作。
具体功能：
- console.log('App Show')：输出日志表示应用展示。
- 获取系统信息：调用 uni.getSystemInfo 来获取当前设备的系统信息。这个方法是异步的，它的回调返回一个 res 对象，包含了当前设备的各种信息。
- 判断平台：
  - res.uniPlatform === 'mp-weixin' 判断当前平台是否是微信小程序。如果是，就执行微信小程序的特定操作。
- 显示分享按钮：如果是微信小程序，调用 uni.showShareMenu 显示分享按钮，menus 参数指定了显示哪些分享菜单（如分享给好友和朋友圈）。
  - withShareTicket: true 表示开启分享时带上 shareTicket，用于处理一些后续的分享数据。
  - menus: ['shareAppMessage', 'shareTimeline'] 表示显示“分享给朋友”和“分享到朋友圈”按钮。

3. `onHide` 方法

onHide: function() {
    console.log('App Hide')
}

作用：该方法在应用从前台切换到后台时调用。通常用来做一些资源释放或后台处理的操作。
这里：console.log('App Hide') 用来输出日志，表示应用已隐藏（即进入后台）。

4. `style` 部分

<style lang="scss">
    /*每个页面公共css */
    @import "@/uni_modules/uview-plus/index.scss";
    @import "@/static/cxx.scss";
</style>

作用：在 <style> 标签内定义了页面的样式，使用了 scss 预处理语言，可以更灵活地写 CSS 样式。
导入样式：
- @import "@/uni_modules/uview-plus/index.scss";：导入 uview-plus 模块的样式，这个模块通常用于 uniapp 中的 UI 组件库。
- @import "@/static/cxx.scss";：导入一个自定义的样式文件 cxx.scss，它可能包含了全局的自定义样式。