站点图标 度崩网-几度崩溃

uni-app 微信QQ小程序转发分享配置教程

uni-app 微信QQ小程序转发分享配置教程,首先该教程只对应小程序起作用,在开源“星茫多端小程序”的时候写了一个分享主页和文章详情,优化后打算就脱离出来也做一个小教程

平台差异说明

支持:微信小程序,支付宝小程序,百度小程序,头条小程序

不支持:5+app , h5

我们在官网查看onShareAppMessage 得知他有3个参数 一个是title标题,path页面路径,img分享封面图片,官方代码

export default {
  onShareAppMessage(res) {
    if (res.from === 'button') {// 来自页面内分享按钮
      console.log(res.target)
    }
    return {
      title: '自定义分享标题',
      path: '/pages/test/test?id=123',
      imageUrl:''
    }
  }
}

我们现在开始修改它

1.发起请求

首先我们发起一个文章详情页请求,随后我们要保存下请求的标题(title),文章id(psouid),文章封面(timg)

onLoad() {
	uni.request({
		url: 'https://www.frbkw.com/wp-json/wp/v2/posts/2026',
			success:(res) =>{
				this.title = res.data.title.rendered;
				this.timg = res.data.meta.thumbnail;
				this.psouid = res.data.id;
			}		
		}
	})	
},

2.保存参数

标题(title),文章id(psouid),文章封面(timg)

data() {
	return {
		title:'',
		timg:'',
		psouid:''
	}
},

3.收工

在methods外面写onShareAppMessage,

onShareAppMessage(res) {
	let that = this;
	if (res.from === 'button') {// 来自页面内分享按钮
		console.log(res.target)
	}
	return {
		title: that.title,
		path: '/pages/data/data?id=' + that.psouid,
		imageUrl:that.timg
	}
			
},

整理来说没有太大的技术含量,只是把保存一个参数,在页面转发分享的时候赋值,效果截图,

 

若需要相关案例,请关注 微信公众号“枫瑞博客网” 回复 “uni星茫” 下载开源小程序pages/data/data界面

本文转自枫瑞博客