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界面

本文转自枫瑞博客