uniapp-微信小程序实现分享给好友功能且动态页面

        uniapp 全局设置分享朋友及分享到朋友圈功能,在我们没有配置微信的分享时候,微信小程序的时候可用看到,分享链接和这两个都是置灰的,如果我们想要让别人可以分享或者复制链接分享我们的小程序的话,就想要自己开发和配置。

接下来分享全局实现的步骤(不需要在每个页面单独配置):

        这里我们实现的是分享当前页面的功能,如果想实现所有页面都是分享同一个页面,可用把path写死就好了

步骤一

        我们先在pages目录下创建一个minix (混入)目录,然后创建一个js文件

步骤二

        在js文件中编写如下代码

index.js

export default {
	data() {
    return {
      title: '分享的标题',
	  path: ''
    }
  },
  created() {
    //#ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// 尝试通过 uni.getCurrentPages 获取当前页面栈,然后获取栈顶页面的路由信息
		const pages = getCurrentPages();
		if (pages.length > 0) {
		  const currentPage = pages[pages.length - 1];
		  this.path = currentPage.route;
		}
		
		//#endif
  },
     //2.配置分享好友
	onShareAppMessage(res) {
		return {
			title: this.title,
			path: this.path
		}
	},
    //2.配置分享到朋友圈
	onShareTimeline(res) {
		return {
			title: this.title,
			path: this.path
		}
	}
}

步骤三

接下来,我们就需要在 main.js 中 使用 Vue 的 mixin() 方法全局混入就可以了

import myMixin from './pages/minix/index.js'
app.mixin(myMixin)

### UniApp微信小程序实现分享功能好友UniApp中开发微信小程序实现分享链接给朋友的功能是一项常见的需求。以下是关于如何在UniApp实现这一功能的具体方法。 #### 配置微信小程序分享功能实现微信小程序中的分享功能,需先在`pages.json`文件中设置页面路径以及定义默认的分享参数[^1]: ```json { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" }, "share": { "title": "这是一个分享标题", "path": "/pages/index/index?query=abc", "imageUrl": "https://example.com/share-image.png" } } ``` 上述代码设置了该页面的默认分享标题、路径和图片URL。 #### 使用onShareAppMessage事件处理函数 为了动态调整每次分享的内容,在页面逻辑部分可以通过`onShareAppMessage`事件来捕获用户的点击行为,并返回自定义的数据结构[^2]: ```javascript export default { data() { return {}; }, methods: {}, onShareAppMessage(res) { if (res.from === 'button') { // 来源于按钮触发 console.log('来自页面内转发按钮'); } else { // 来源于右上角菜单或其他方式 console.log('来自右上角菜单'); } return { title: '推荐给你一个好东西', path: '/pages/detail/detail?id=123', // 动态拼接id参数 imageUrl: 'https://example.com/custom-share-image.jpg' }; } }; ``` 此段脚本允许开发者根据不同场景设定不同的分享文案与跳转地址。 #### 手机号一键登录扩展说明 虽然题目主要讨论的是分享功能,但值得一提的是,如果希望进一步增强用户体验,还可以结合手机号一键登录功能一起设计。例如当新用户通过好友分享进入应用时自动弹出授权框提示其完成注册流程等操作[^3]。 ### 注意事项 - `onShareAppMessage`仅能在真机环境下生效,请勿依赖模拟器测试。 - 如果需要传递复杂数据,则建议采用加密形式编码到url query string里再解密读取。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值