Taro小程序分享小结_taro dataset-程序员宅基地

技术标签: 小程序  taro  

在开发小程序的时候遇到自定义分享按钮分享卡片到好友的需求,由于小程序的分享只有在页面js中定义了onShareAppMessage(Object)方法才会出现右上角的分享按钮,所以需要在页面中自定义分享方法。具体见下:

object参数

在这里插入图片描述

onShareAppMessage(Object)事件需要返回一个Object对象对象里面包含要分享的标题,转发的路径,以及自定义图片的路径。完成了这一系列操作就可以愉快的去分享微信小程序的页面了。

在这里插入图片描述

// 在页面中使用
import Taro, {
     Component } from "@tarojs/taro";
import {
     View } from "@tarojs/components";

class index extends Component {
    
  onShareAppMessage() {
    
    return {
    
      title: "自定义标题",
      path: '/page/user?id=123',  // 自定义的分享路径,点击分享的卡片之后会跳转这里定义的路由
      imageUrl: '' // 图片路径
    };
  }
  render(){
    
  	return(
	  <View>微信分享</View>
	)
  }
}
export default index;

自定义分享按钮事件的实现。有时候,在大多数的业务场景下我们需要在页面中点击某个按钮触发分享的事件,此时需要监听用户点击页面内转发按钮(Button 组件 openType=‘share’)就会自动触发onShareAppMessage方法。如果需要在button中携带信息,需要自定义button属性,通过res.target.dataset获取。

// 在页面中使用
import Taro, {
     Component } from "@tarojs/taro";
import {
     View } from "@tarojs/components";

class index extends Component {
    
 onShareAppMessage(res) {
    
    if (res.from === "button") {
    
      const {
    share = {
    }} = res.target.dataset
      return {
    
        title:`自定义分享按钮${
      share.title}`,
        path: `/pages/bill/index`,
        imageUrl: ''
      };
    } else {
    
      return {
    
        title: "右上角分享事件",
        path: `/pages/bill/index`,
        imageUrl: ''
      };
    }
  }
  render(){
    
  	return(
	  <View>
		<Button open-type="share" data-share={
    data} >
           点击分享
         </Button>
	  </View>
	)
  }
}
export default index;

需要注意的是,onShareAppMessage不支持异步调用,如果有需求是先请求接口的数据再分享会因为拿不到数据导致分享信息不正确的错误。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/V_AYA_V/article/details/105297274

智能推荐

SpringBoot项目引入外部jar包_springboot引入外部jar包-程序员宅基地

文章浏览阅读695次。SpringBoot项目引入外部jar包_springboot引入外部jar包

Java系列(面试必备):HashMap和Hashtable的区别!_java hashtable的优缺点-程序员宅基地

文章浏览阅读3.1k次,点赞19次,收藏84次。Java系列(面试必备):HashMap 和 Hashtable 的 6 个区别!前言今天博主将为大家分享:Java系列(面试必备):HashMap 和 Hashtable 的 6 个区别!不喜勿喷,如有异议欢迎讨论!首先推荐结合博主的这篇文章进行阅读===>Java系列(面试必备):简单的hashCode和equals面试题,有好多坑!HashMap 和 Hashtable 是 J..._java hashtable的优缺点

elasticSearch - es报错:exception [type=search_phase_execution_exception, reason=all shards failed]_elasticsearch exception [type=search_phase_executi-程序员宅基地

文章浏览阅读5.7k次。查询语句中,字段类型使用错误,在es中查询字段类型为int,而查询语句中错误地用成了string。_elasticsearch exception [type=search_phase_execution_exception, reason=all s

WIZnet W5300-TOE MQTT 发布和订阅 (micropython)_w5500 mqtt onenet-程序员宅基地

文章浏览阅读113次。这些部分将指导您完成一系列步骤,从配置开发环境到使用 STM32f429zi (nuleo-f429zi) 和 W5300-TOE 运行以太网示例 基本设置请参阅“入门”指南。_w5500 mqtt onenet

day24.|回溯法01-程序员宅基地

文章浏览阅读381次,点赞5次,收藏7次。1.也可以叫做,它是一种搜索的方式。2.回溯是递归的副产品,只要有递归就会有回溯。回溯与递归相辅相成,只要有递归就有回溯。通常递归函数的下面就是回溯的逻辑。3.,如果想让回溯法高效一些,可以加一些剪枝的操作,但也改不了回溯法就是穷举的本质。(暴力查找)5.回溯法解决的问题:(1)组合问题:N个数里面按一定规则找出k个数的集合;(2)切割问题:一个字符串按一定规则有几种切割方式;(3)子集问题:一个N个数的集合里有多少符合条件的子集;(4)排列问题:N个数按一定规则全排列,有几种排列方式;

Esp32-CAM(ESP32带camera)使用说明_esp32 cam说明书-程序员宅基地

文章浏览阅读6.7k次,点赞2次,收藏28次。1、如下图,只需在丝印 VCC GND 处供 3.3V 电源即可启动开发板2、上电后开发板会释放热点。其中SSID: wireless-tagPwd: wireless-tag3、电脑或手机连接此热点后,登录网页 http://192.168.4.1 进入 WEBSERVER 界面。如下图:4、上图中有两个红色框 Get Still 和 Start Stream(Stop Stream)。点击 Get Still,摄像头抓取一张图片,并显示在黑色区域;点击 Start Stream_esp32 cam说明书

随便推点

Java NIO之Selector_java nio selecter-程序员宅基地

文章浏览阅读278次。一、Java NIO 的核心组件Java NIO的核心组件包括:Channel(通道),Buffer(缓冲区),Selector(选择器),其中Channel和Buffer比较好理解 简单来说 NIO是面向通道和缓冲区的,意思就是:数据总是从通道中读到buffer缓冲区内,或者从buffer写入到通道中。二、Java NIO Selector1. Selector简介选择器..._java nio selecter

1. 一键安装oracle11g数据库_linux安装oracle11g数据库-程序员宅基地

文章浏览阅读2.3k次,点赞4次,收藏20次。Oracle数据库在Linux系统上安装步骤比较多,为了方便Oracle数据库的安装,编写了以下脚本,简化了Oracle数据库的安装。_linux安装oracle11g数据库

TCP/IP协议详解-程序员宅基地

文章浏览阅读60次。1、TCP/IP协议栈四层模型 TCP/IP这个协议遵守一个四层的模型概念:应用层、传输层、互联层和网络接口层。 网络接口层 模型的基层是网络接口层。负责数据帧的发送和接收,帧是独立的网络信息传输单元。网络接口层将帧放在网上,或从网上把帧取下来。 互联层 互联协议将数据包封装成internet数据报,并运行必要的路由算法。 这里有四个互联协议: 网际协议IP...

网络安全的隐形守护者——白帽黑客-程序员宅基地

文章浏览阅读2.3k次。提起黑客我们的脑海中总是会浮现那些“啪啪啪”敲键盘,进入别人电脑或是企业服务器的“神秘人”,他们来无影去无踪,但是每次造访总会将所到之处破坏个淋漓尽致,直到拿到自己想要的..._白帽黑客小青

[OpenCV Qt教程] 在Qt图形界面中显示OpenCV图像的OpenGL Widget (第一部分)_qt scene changed-程序员宅基地

文章浏览阅读5.8k次。本文译自:[OPENCV QT TUTORIAL] OPENGL WIDGET TO SHOW OPENCV IMAGES IN A QT GUI (FIRST PART)此教程是关于在Qt图形界面中显示OpenCV图像的问题,还利用了Qt中的OpenGL。_qt scene changed

回溯法解01背包问题(最通俗易懂,附C++代码)_回溯法解决01背包问题-程序员宅基地

文章浏览阅读3.6w次,点赞86次,收藏554次。问题描述:01背包问题是算法中的经典问题,问题描述如下:对于给定的N个物品,第i个物品的重量为Wi,价值为Vi,对于一个最多能装重量C的背包,应该如何选择放入包中的物品,使得包中物品的总价值最大?回溯法简介:回溯法的本质其实就是一种蛮力法,只是通过一定的方法可以使得蛮力法中的一些基本情况可以提前排除从而提高蛮力算法效率,回溯可以理解为排除这些不满足条件的基本情况的过程。回溯法求解0-1背包问题的过程:由于直接描述过程比较抽象,因此直接上例题例题:假设N=3(有三件物品),三个物品的重量为{20_回溯法解决01背包问题