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

fengrui99

原文转载来自：https://www.frbkw.com/2026/

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


平台差异说明支持：微信小程序，支付宝小程序，百度小程序，头条小程序不支持:5+app , h5我们在官网查看onShareAppMessage 得知他有3个参数 一个是title标题，path页面路径，img分享封面图片，官方代码

[Asm] 纯文本查看 复制代码

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）

[Asm] 纯文本查看 复制代码

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）

[Asm] 纯文本查看 复制代码

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

3.收工
在methods外面写onShareAppMessage，

[Asm] 纯文本查看 复制代码

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
        }
                        
},

qadan

感谢分享

dice1412

支持了 感谢