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}`//动态参数
    }
  },
}
相关文章
|
7月前
|
小程序
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
1138 0
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
137 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
74 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
91 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
127 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
127 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的大学生勤工助学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的大学生勤工助学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的在线招聘平台的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线招聘平台的详细设计和实现(源码+lw+部署文档+讲解等)