低代码可视化-按钮open-type开放能力自定义-代码生成器

微信小程序原本确实不直接支持通过点击按钮将内容分享到朋友圈的功能，但微信在后续更新中逐步放开了部分限制，允许特定内容以小程序卡片的形式分享到朋友圈。然而，这一功能仍然需要满足一定的条件，并且需要开发者进行特定的配置。

分享到朋友圈步骤

以下是如何尝试实现微信小程序点击按钮分享到朋友圈的步骤（请注意，这些步骤基于微信小程序的当前规定，未来可能会有所变化）：

  1. 确保小程序已开通分享到朋友圈的权限：
    • 这通常需要小程序已经通过微信官方的审核，并且符合分享到朋友圈的相关要求。
    • 开发者需要在微信公众平台上提交申请，并等待审核结果。
  2. 更新小程序基础库：
    • 确保你的小程序基础库版本支持分享到朋友圈的功能。
  3. 配置页面分享属性：
    • 在小程序的页面配置中，可以设置onShareAppMessage和onShareTimeline两个函数来处理分享事件。
    • onShareAppMessage用于处理分享给好友的逻辑，而onShareTimeline则用于处理分享到朋友圈的逻辑（如果支持的话）。
  4. 实现分享到朋友圈的逻辑：
    • 由于微信小程序没有直接提供“分享到朋友圈”的按钮类型，你需要通过其他方式触发分享，比如自定义一个按钮，并在按钮的点击事件中调用wx.showShareMenu和wx.shareTimeline（如果可用）来显示分享菜单并尝试分享。
    • 然而，需要注意的是，wx.shareTimeline API 在很多情况下并不直接对开发者开放，而是由微信根据小程序的类别、内容质量、用户反馈等因素来决定是否允许使用。
  5. 处理用户分享后的回调：
    • 如果微信允许你的小程序分享到朋友圈，并且用户成功分享了，你可以通过onShareTimelineSuccess和onShareTimelineCancel等回调来处理分享成功或取消的逻辑。
  6. 提交审核并等待结果：
    • 在尝试实现分享到朋友圈的功能后，你需要将小程序提交给微信官方进行审核。
    • 审核通过后，你的小程序才可能具备分享到朋友圈的能力。
  7. 注意用户体验和合规性：
    • 在实现分享功能时，务必考虑用户体验和合规性。
    • 不要滥用分享功能，避免给用户带来不必要的干扰或误导。
  8. 关注微信官方文档和更新：
    • 由于微信小程序的功能和规定可能会随着时间推移而发生变化，建议你定期查看微信官方的文档和更新日志。

需要强调的是，由于微信小程序的分享功能受到微信官方的严格控制和审核，因此并不是所有小程序都能实现分享到朋友圈的功能。如果你的小程序没有通过相关的审核或不符合微信的要求，那么你可能无法直接使用这个功能。

另外，由于微信小程序的更新和变化较快，上述步骤可能需要根据最新的微信官方文档进行调整。因此，在实现这一功能时，请务必参考最新的微信开发者文档和指南。

open-type 有效值

值说明平台差异说明
feedback打开“意见反馈”页面，用户可提交反馈内容并上传日志App、微信小程序、QQ小程序
share触发用户转发微信小程序、百度小程序、支付宝小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序、京东小程序、360小程序
getUserInfo获取用户信息，可以从@getuserinfo回调中获取到用户信息微信小程序、百度小程序、QQ小程序、快手小程序、京东小程序、360小程序
contact打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息微信小程序、百度小程序、快手小程序、抖音小程序
getPhoneNumber获取用户手机号，可以从@getphonenumber回调中获取到用户信息微信小程序、百度小程序、抖音小程序、支付宝小程序、快手小程序、京东小程序。App平台另见一键登陆
launchApp小程序中打开APP，可以通过app-parameter属性设定向APP传的参数微信小程序、QQ小程序、快手小程序、京东小程序
openSetting打开授权设置页微信小程序、QQ小程序、百度小程序、快手小程序、京东小程序、360小程序
chooseAvatar获取用户头像，可以从@chooseavatar回调中获取到头像信息微信小程序2.21.2版本+
agreePrivacyAuthorization用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过 @agreeprivacyauthorization 监听用户同意隐私协议事件。隐私合规开发指南详情可见《小程序隐私协议开发指南》微信小程序2.33.0版本+
uploadDouyinVideo发布抖音视频抖音小程序2.65.0版本+
im跳转到抖音IM客服抖音小程序2.80.0版本+
getAuthorize支持小程序授权支付宝小程序
lifestyle关注生活号支付宝小程序
contactShare分享到通讯录好友支付宝小程序基础库1.11.0版本+
openGroupProfile呼起QQ群资料卡页面，可以通过group-id属性设定需要打开的群资料卡的群号，同时manifest.json中必须配置groupIdListQQ小程序基础库1.4.7版本+
openGuildProfile呼起频道页面，可以通过guild-id属性设定需要打开的频道IDQQ小程序基础库1.46.8版本+
openPublicProfile打开公众号资料卡，可以通过public-id属性设定需要打开的公众号资料卡的号码，同时manifest.json中必须配置publicIdListQQ小程序基础库1.12.0版本+
shareMessageToFriend在自定义开放数据域组件中,向指定好友发起分享据QQ小程序基础库1.17.0版本+
addFriend添加好友， 对方需要通过该小程序进行授权，允许被加好友后才能调用成功用户授权QQ小程序
addColorSign添加彩签，点击后添加状态有用户提示，无回调QQ小程序基础库1.10.0版本+
addGroupApp添加群应用（只有管理员或群主有权操作），添加后给button绑定@addgroupapp事件接收回调数据QQ小程序基础库1.16.0版本+
addToFavorites收藏当前页面，点击按钮后会触发Page.onAddToFavorites方法QQ小程序基础库1.19.0版本+
chooseAddress选择用户收货地址，可以从@chooseaddress回调中获取到用户选择的地址信息百度小程序3.160.3版本+
chooseInvoiceTitle选择用户发票抬头，可以从@chooseinvoicetitle回调中获取到用户选择发票抬头信息百度小程序3.160.3版本+
login登录，可以从@login回调中确认是否登录成功百度小程序3.230.1版本+
subscribe订阅类模板消息，需要用户授权才可发送百度小程序
favorite触发用户收藏快手小程序
watchLater触发用户稍后再看快手小程序
openProfile触发打开用户主页快手小程序

可视化设计支持分享按钮

按钮分享

默认按钮分享，拖动一个按钮组件进设计器，然后在自定义属性增加一个open-type="share"

自定义分享按钮

使用flex布局，先把布局造好，布局里包含图片、标题。然后图层容器类型改为button。生成的代码会强制转换类型。

同样自定义属性也加上

在自定义属性加个open-type="share"。

也可以自定义点击事件加上

生命周期

默认只需要在生命 周期里新建，找到用户点击右上角分享onShareAppMessage即可。里面的方法体支持空。

如果需要更复杂的页面参数 return 一个JSON格式的数据，支持title,path,图片等参数。

if (res.from === 'button') {  // 来自页面内转发按钮  console.log(res.target)  }  return {  title: '小程序标题', // 分享标题  path: '/page/user?id=123', // 分享路径  imageUrl: '/images/share.png', // 分享图标  }

当然可能更复杂是，点击某些功能后 先弹窗，弹窗里再出现分享按钮。

生成代码如下

<template><view class="container container329152"><button open-type="share" class="flex diygw-btn-default flex-wrap diygw-col-6 flex-direction-column items-center flex15-clz"><image src="/static/icon3_ax.png" class="image5-size diygw-image diygw-col-0 image5-clz" mode="widthFix"></image><text class="diygw-text-line1 diygw-col-0 text3-clz"> 分享给朋友 </text></button><button open-type="share" class="diygw-col-24 btn-clz diygw-btn-default">分享到朋友圈</button><view @touchmove.stop.prevent="" v-if="modal" class="diygw-modal bottom-modal" :class="modal" style="z-index: 1000000"><view class="diygw-dialog diygw-dialog-modal"><view><view class="flex diygw-dialog-content"><view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center"><view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex50-clz"><view class="flex flex-wrap diygw-col-24 flex-direction-column flex59-clz"><view class="flex flex-wrap diygw-col-24"><view class="flex flex-wrap diygw-col-6 flex-direction-column items-center"><image src="/static/wcym.png" class="image21-size diygw-image diygw-col-0 image21-clz" mode="widthFix"></image><text class="diygw-text-line1 diygw-col-0 text42-clz"> 发起工单 </text></view><view class="flex flex-wrap diygw-col-6 flex-direction-column items-center"><image src="/static/cb.png" class="image22-size diygw-image diygw-col-0 image22-clz" mode="widthFix"></image><text class="diygw-text-line1 diygw-col-0 text43-clz"> 发起工单 </text></view><view class="flex flex-wrap diygw-col-6 flex-direction-column items-center"><image src="/static/zxxjsbbf.png" class="image23-size diygw-image diygw-col-0 image23-clz" mode="widthFix"></image><text class="diygw-text-line1 diygw-col-0 text44-clz"> 发起工单 </text></view><button open-type="share" class="flex diygw-btn-default flex-wrap diygw-col-6 flex-direction-column items-center"><image src="/static/icon3_ax.png" class="image25-size diygw-image diygw-col-0 image25-clz" mode="widthFix"></image><text class="diygw-text-line1 diygw-col-0 text46-clz"> 分享给朋友 </text></button></view></view></view><text @tap="navigateTo" data-type="closemodal" class="flex icon9 diygw-col-0 icon9-clz diy-icon-roundclose"></text></view></view></view></view></view><view class="clearfix"></view></view>
</template><script>export default {data() {return {//用户全局信息userInfo: {},//页面传参globalOption: {},//自定义全局变量globalData: {},modal: '',showGrids: false};},onShareAppMessage(e) {},onShow() {this.setCurrentPage(this);},onLoad(option) {this.setCurrentPage(this);if (option) {this.setData({globalOption: this.getOption(option)});}this.init();},methods: {async init() {}}};
</script><style lang="scss" scoped>.flex15-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.image5-clz {border-bottom-left-radius: 120rpx;overflow: hidden;border-top-left-radius: 120rpx;border-top-right-radius: 120rpx;border-bottom-right-radius: 120rpx;}.image5-size {height: 96rpx !important;width: 96rpx !important;}.text3-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.btn-clz {background-color: #07c160;padding-top: 20rpx;color: #fff;padding-left: 20rpx;padding-bottom: 20rpx;text-align: center;padding-right: 20rpx;}.modal-clz {z-index: 1000000;}.diygw-dialog-modal {background-color: rgba(255, 255, 255, 0);}.flex50-clz {border: 2rpx solid #f8f8f8;padding-top: 30rpx;border-bottom-left-radius: 20rpx;padding-left: 30rpx;padding-bottom: 50rpx;border-top-right-radius: 20rpx;margin-right: 20rpx;background-color: #ffffff;margin-left: 20rpx;box-shadow: 0rpx 0rpx 40rpx rgba(56, 255, 106, 0.11);overflow: hidden;width: calc(100% - 20rpx - 20rpx) !important;border-top-left-radius: 20rpx;margin-top: 20rpx;border-bottom-right-radius: 20rpx;margin-bottom: 0rpx;padding-right: 30rpx;}.flex59-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.image21-clz {border-bottom-left-radius: 120rpx;overflow: hidden;border-top-left-radius: 120rpx;border-top-right-radius: 120rpx;border-bottom-right-radius: 120rpx;}.image21-size {height: 80rpx !important;width: 80rpx !important;}.text42-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.image22-clz {border-bottom-left-radius: 120rpx;overflow: hidden;border-top-left-radius: 120rpx;border-top-right-radius: 120rpx;border-bottom-right-radius: 120rpx;}.image22-size {height: 80rpx !important;width: 80rpx !important;}.text43-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.image23-clz {border-bottom-left-radius: 120rpx;overflow: hidden;border-top-left-radius: 120rpx;border-top-right-radius: 120rpx;border-bottom-right-radius: 120rpx;}.image23-size {height: 80rpx !important;width: 80rpx !important;}.text44-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.image25-clz {border-bottom-left-radius: 120rpx;overflow: hidden;border-top-left-radius: 120rpx;border-top-right-radius: 120rpx;border-bottom-right-radius: 120rpx;}.image25-size {height: 80rpx !important;width: 80rpx !important;}.text46-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.icon9-clz {background-color: #fdc915;margin-left: 0rpx;border: 8rpx solid #787878;border-bottom-left-radius: 120rpx;overflow: hidden;color: #ffffff;border-top-left-radius: 120rpx;margin-top: -40rpx;border-top-right-radius: 120rpx;border-bottom-right-radius: 120rpx;margin-bottom: 10rpx;margin-right: 0rpx;}.icon9 {font-size: 64rpx;}.container329152 {}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/1541.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

基于springboot乐器视频学习网站设计与实现（源码齐全可用）

基于springboot乐器视频学习网站设计与实现（源码齐全可用）

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。你想解决的问题&#xff0c;今天给大家介绍…
阅读更多...
TypeScript：never 类型的神奇妙用

TypeScript：never 类型的神奇妙用

在 TypeScript 中&#xff0c;never 是一个特殊类型&#xff0c;表示「永不存在的值类型」&#xff0c;通常用于表示不可能发生的情况。它适用于抛出异常、不返回值的函数或处理逻辑上永远不会出现的分支。 以下是它的简单用法和注意事项&#xff1a; 1. never 的用法 1、抛…
阅读更多...
Redis-结构化value对象的类型

Redis-结构化value对象的类型

文章目录 一、Redis的结构化value对象类型的介绍二、Redis的这些结构化value对象类型的通用操作查看指定key的数据类型查看所有的key判断指定key是否存在为已存在的key进行重命名为指定key设置存活时间pexpire与expire 查看指定Key的存活时间为指定key设置成永久存活 三、Redis…
阅读更多...
解密美国 VPS 主机的核心优势与未来发展

解密美国 VPS 主机的核心优势与未来发展

在全球网络需求不断增长的今天&#xff0c;许多企业和开发者都在寻找更灵活、安全、性能优异的主机解决方案。美国 VPS 主机凭借其强大的技术支持和广泛的网络连接&#xff0c;成为国际用户的热门选择。本文将深入探讨美国 VPS 主机的核心优势、其在网络应用上的独特表现&#…
阅读更多...
XSS小游戏【1-13关】

XSS小游戏【1-13关】

第一关 Payload&#xff1a;<script>alert(1)</script> 第二关 Payload&#xff1a;keyword<script>alert(1)</script> 发现没有成功&#xff0c;F12发现需要闭合input 标签 再次输入payload&#xff1a;aaa"><svg οnlοadalert(1)> …
阅读更多...
Spring Boot框架：校园社团信息管理的现代化解决方案

Spring Boot框架：校园社团信息管理的现代化解决方案

3系统分析 3.1可行性分析 通过对本校园社团信息管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本校园社团信息管理系统采用SSM框架&#xff0c;JAVA作…
阅读更多...
uniapp推送配置流程

uniapp推送配置流程

Dcloud Dcloud注册账号 个推 了解即可 注册个推账号 ios配置流程 需配置含有推送的描述文件以及p8证书 配置推送证书 ios证书配置报技术错误&#xff08;参数错误&#xff09; TeamID-苹果开发者账号唯一的ID 安卓需配置多厂商 小米手机需要配置小米厂商 华为手机则需…
阅读更多...
JavaEE初阶---网络原理之TCP篇（二）

JavaEE初阶---网络原理之TCP篇（二）

文章目录 1.断开连接--四次挥手1.1 TCP状态1.2四次挥手的过程1.3time_wait等待1.4三次四次的总结 2.前段时间总结3.滑动窗口---传输效率机制3.1原理分析3.2丢包的处理3.3快速重传 4.流量控制---接收方安全机制4.1流量控制思路4.2剩余空间大小4.3探测包的机制 5.拥塞控制---考虑…
阅读更多...
单细胞数据分析（一）：10X数据生成seurat数据对象

单细胞数据分析（一）：10X数据生成seurat数据对象

文章目录 介绍加载R包数据链接导入数据过滤细胞：移除双重细胞合并所有seurat数据对象输出结果系统信息介绍 在单细胞基因组学研究中，Seurat是一个流行的R包，用于单细胞基因表达数据的分析和探索。以下是如何从10X基因注释数据生成Seurat数据对象，并对该数据进行过滤的步骤…
阅读更多...
了解SQLExpress数据库

了解SQLExpress数据库

SQLExpress&#xff08;Microsoft SQL Server Express&#xff09;是由微软公司开发的一款免费且轻量级的数据库管理系统。以下是关于SQLExpress的详细解释&#xff1a; 一、定义与特点 定义&#xff1a; SQLExpress是Microsoft SQL Server的一个缩减版或基础版&#xff0c;旨在…
阅读更多...
C++ 魔法三钥：解锁高效编程的封装、继承与多态

C++ 魔法三钥：解锁高效编程的封装、继承与多态

快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。 目录 &#x1f4af;前言 &#x1f4af;封装 1.封装概念 2.封装格式 3.封装的原理 4.封装的作用 &#x1f4af;继承 1.继承的概念 2.继承格式 3.继承的…
阅读更多...
开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序中积分使用价值的拓展策略

开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序中积分使用价值的拓展策略

摘要&#xff1a;本文围绕开源 AI 智能名片 2 1 链动模式 S2B2C 商城小程序&#xff0c;深入探讨其积分使用价值的丰富策略。详细分析积分兑换礼品、会员升级、积分抵现等方式在该特定商城小程序环境下的应用特点、存在问题及对用户和商城的影响&#xff0c;旨在为商城的优化运…
阅读更多...
UE4安卓Gradle工程中的libUE4.so的生成原理

UE4安卓Gradle工程中的libUE4.so的生成原理

流程图 流程图放在最前面&#xff0c;下面是讲解。 libUE4.so 问&#xff1a;在UE4安卓开发中&#xff0c;libUE4.so即是符号表&#xff0c;又是引擎代码native&#xff0c;是吗&#xff1f; 答&#xff1a;是的&#xff0c;libUE4.so在UE4安卓开发中既包含符号表&#xff0c;…
阅读更多...
Java线程池的核心内容详解

Java线程池的核心内容详解

文章内容已经收录在《面试进阶之路》&#xff0c;从原理出发&#xff0c;直击面试难点&#xff0c;实现更高维度的降维打击&#xff01; 目录 文章目录 目录Java线程池的核心内容详解线程池的优势什么场景下要用到线程池呢&#xff1f;线程池中重要的参数【掌握】新加入一个任…
阅读更多...
Pandas DataFrame学习

Pandas DataFrame学习

1.DataFrame定义 DataFrame 是 Pandas 中的另一个核心数据结构&#xff0c;用于表示二维表格型数据。DataFrame 是一个表格型的数据结构&#xff0c;它含有一组有序的列&#xff0c;每列可以是不同的值类型&#xff08;数值、字符串、布尔型值&#xff09;。DataFrame 既有行索…
阅读更多...
如何在创建完fb公共主页后添加管理员防止封号？

如何在创建完fb公共主页后添加管理员防止封号？

在创建Facebook公共主页后&#xff0c;及时添加备用管理员是非常重要的。这可以帮助防止由于个人账号被封或其他限制因素导致无法继续管理公共主页的情况。以下是关于如何添加管理员及接受邀请的详细步骤。 Facebook公共主页的角色介绍 在Facebook公共主页上&#xff0c;有五种…
阅读更多...
无人机避障——使用三维PCD点云生成的2D栅格地图PGM做路径规划

无人机避障——使用三维PCD点云生成的2D栅格地图PGM做路径规划

着重介绍通过对三维 PCD 点云进行处理生成 2D 栅格地图 PGM&#xff0c;而后将该 PGM 地图充分运用到无人系统路径规划之中&#xff0c;使得无人机能够依据此规划合理避开飞行路线上可能出现的障碍物。&#xff08;解决如何使用PGM的问题&#xff09; Hybrid A*算法 参考博客…
阅读更多...
YOLOv10改进策略【注意力机制篇】| WACV-2024 D-LKA 可变形的大核注意 针对大尺度、不规则的目标图像

YOLOv10改进策略【注意力机制篇】| WACV-2024 D-LKA 可变形的大核注意 针对大尺度、不规则的目标图像

一、本文介绍 本文记录的是利用D-LKA模块优化YOLOv10的目标检测网络模型。D-LKA 结合了大卷积核的广阔感受野和可变形卷积的灵活性&#xff0c;有效地处理复杂的图像信息。本文将其应用到v11中&#xff0c;并进行二次创新&#xff0c;使网络能够综合多种维度信息&#xff0c;更…
阅读更多...
人工智能中的机器学习和模型评价

人工智能中的机器学习和模型评价

文章目录 1.监督学习1.1线性回归1.2KNN算法1.3支持向量机 2.无监督学习2.1K-means聚类2.2FCA主成分分析 机器学习是人工智能的一个分支&#xff0c;它使计算机系统能够从数据中学习并做出决策&#xff0c;而无需进行明确的编程。它涉及到开发算法和技术&#xff0c;使计算机能够…
阅读更多...
HomeAssistant自定义组件学习-【二】

HomeAssistant自定义组件学习-【二】

#要说的话# 前面把中盛科技的控制器组件写完了。稍稍熟悉了一些HA&#xff0c;现在准备写窗帘控制组件&#xff0c;构想的东西会比较多&#xff0c;估计有些难度&#xff0c;过程会比较长&#xff0c;边写边记录吧&#xff01; #设备和场景环境# 使用的是Novo的电机&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023