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

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

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-app 微信QQ小程序转发分享配置教程

 

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

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

分享到 :
相关推荐

mui项目mui源码 收发文列表源码

mui项目mui源码收发文列表源码 基于oa项目-应急系统收发文列表[&h...

MUI联系人源码 MUI获取手机中的联系人项目

MUI联系人源码MUI获取手机中的联系人项目在html5下利用Native.js[&...

UNI-APP视频教程 VUE跨平台开发框架安卓苹果小程序

UNI-APP视频教程VUE跨平台开发框架安卓苹果小程序什么是UNI-Appu[&h...

uni-app 新建本地模拟json数据教程

在开发app中,往往后端对丢我们接口,如果后端没有提供。那么前端都会自己模拟数据,自...

发表评论

邮箱地址不会被公开。 必填项已用*标注