uniapp 分享功能-分享给朋友群聊朋友圈效果(整理)

简介: uniapp 分享功能-分享给朋友群聊朋友圈效果(整理)

效果图:

<template>
  <button class="buttonBox posAbsolute" open-type="share">分享按钮</button>
</template>
//放某个接口下面就行
wx.showShareMenu({  
  menus: ['shareAppMessage', 'shareTimeline']
});
//转发给朋友-和methods:同级
onShareAppMessage(res) {
  return {
    title: "分享标题",
    path: "这是打开后的跳转路径", //这是打开后的跳转路径
    imageUrl: "分享图片"
  }
},
//转发朋友圈-和methods:同级
onShareTimeline(res) {
  return {
    title: "分享标题",
    path: "这是打开后的跳转路径", //这是打开后的跳转路径
    imageUrl: "分享图片"
  }
},

<button open-type="share" @share='onShareAppMessage' :data-obj="item">
  <view class="bg" @click="askClick(item)">邀请家人</view>
</button>
methods:{
  onShareAppMessage(e) {
    console.log(e, 'eeeeee')
    if (e.from == 'button') {
      // 点击button按钮分享的
      // do something
    }
    if (e.from == 'menu') {
      // 点击右上角...按钮(三个点按钮)分享的
      // do something
    }
    // 获取按钮传进来的参数 data 中的item值
    let params = e.target.dataset.obj // 获取的为 data 中定义的item值
    console.log(params, 'paramsparams')
    // title: this.itemForm.name,
    // path: "/enter/enterPage/enter?familyId=" + this.itemForm.id, //这是打开后的跳转路径
    // imageUrl: this.itemForm.crest
    return {
      title: params.name,
      path: `/enter/enterPage/enter?familyId=${params.id}`, //动态参数
      imageUrl: params.crest,
      // path: `/pages/login/login?id=123&name=名字` // 固定参数
      // path: `/pages/login/login?id=${this.info.id}&name=${this.name}`//动态参数
    }
  },
}
相关文章
|
6天前
|
小程序
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
78 0
|
6天前
|
小程序
uniapp-微信小程序-上拉和下拉触底刷新
uniapp-微信小程序-上拉和下拉触底刷新
14 0
|
6天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
16 1
|
6天前
|
JavaScript 小程序 前端开发
小程序;vue;uniapp优缺点(各5条)
小程序;vue;uniapp优缺点(各5条)
17 1
|
6天前
|
移动开发 开发框架 小程序
UniApp与微信小程序介绍及区别
UniApp与微信小程序介绍及区别
30 0
|
6天前
|
缓存 小程序
uniapp读取(获取)缓存中的对象值(微信小程序)
uniapp读取(获取)缓存中的对象值(微信小程序)
16 1
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
51 4
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的在线课堂微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的在线课堂微信小程序的详细设计和实现
36 3
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
62 3
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的商品展示的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的商品展示的详细设计和实现
34 3

热门文章

最新文章