微信小程序学习笔记二：自定义组件和自定义分享功能

最新推荐文章于 2024-06-19 15:23:53 发布
最新推荐文章于 2024-06-19 15:23:53 发布
阅读量532 收藏 1
点赞数
分类专栏： 微信小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24724109/article/details/107291983
版权
本文是微信小程序学习笔记的第二部分，主要介绍如何自定义Component以及实现自定义分享功能。通过配置Component的component属性和在页面json中注册，可以成功创建并引入自定义组件。同时，利用button组件，结合外部容器和样式重置，可以创建出符合需求的分享按钮。
摘要由CSDN通过智能技术生成

5. 自定义Component

  • 使用Componet类编写一个Componet

在这里插入图片描述

  • 配置Component json中的component为true - 表示开启了component模式

在这里插入图片描述

  • 在需要引入页面的json文件中的usingComponent中注册(路径注意要指到.js文件)

在这里插入图片描述

  • 在需要引入的页面中进行引入即可

在这里插入图片描述

6. 使用button实现分享功能

实现思路：

  1. 使用share-btn的外部容器实现一个自己想要的效果
  2. 使用button:not([size=“mini”])对button的默认样式进行重置
  3. 使用绝对定位让该按钮充满整个容器，并用opacity保持透明。露出下面我们自定义的分享按钮
<
最低0.47元/天 解锁文章
月半叫做胖
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序前端自定义分享的实现方法
12-11
背景 目前手上有一个小程序的项目，希望转发时分享消息的界面能够自定义,然而微信小程序只提供设置图片的url和title。 /** * 用户点击右上角分享 */ onShareAppMessage: function() { return { imageUrl:'', title:'' }; } 实现 我们要转发的显示内容多了一点东西:头像，用户名和点赞数。好在这个排版不是很复杂，所以我们思考了一下通过canvas去生成一张图片再return canvas所生成的图片url。 代码如下（其实还要作出一些显示上的优化，具体你们自己去调试）： 先在页面里
微信小程序学习笔记，实战项目，实战学习语法以及困难解决方案
01-20
"B站微信小程序学习"可能是指在哔哩哔哩（B站）上找到的相关视频教程资源，这是一种生动且直观的学习方式，可以帮助开发者通过观看他人实践来加深理解。 总的来说，这份学习笔记和实战项目覆盖了微信小程序开发的...
微信小程序自定义分享(uniapp版)
weixin_48888726的博客
11-08 1225
【代码】微信小程序自定义分享(uniapp版)
uniapp 微信小程序自定义分享图片
最新发布
qq_58340302的博客
06-19 1537
2. 自定义内容：因为onShareAppMessage的imageUrl参数的支持的是本地文件路径、代码包文件路径或者网络图片路径 ，所以这里实现自定义的分享的方法是结合canvas画布。微信小程序用户，点击小程序里商品的分享按钮时，想要不同的商品展示不用的分享内容，比如分享图片上展示商品的图片、价格等信息。画画的时候，要是找不准xy的位置，可以从这三种样式里选一个样式接近的再慢慢修改～先贴上画布的代码，这里画了三种自定义分享的内容，样式在代码下方。setGoodsShareCanvas()方法的样式。
小程序之自定义组件
邱小健的博客
06-24 455
今天说一下关于小程序中的自定义组件。 这里不说太基础的东西，对于基础的用法的话可以直接去小程序官网查询。 传送门：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 一：组件间的数据传递： 页面的数据传递给组件：（下面是一蓝牙组件（bluetooth）作为例子来说明） ...
微信小程序——自定义分享与右上角分享
热门推荐
柠檬酸
06-22 1万+
js onShareAppMessage: function (res) { //可以先看看页面数据都有什么，得到你想要的数据 var shareData = this.data console.log(shareData) if (res.from === 'button') { // 来自页面内转发按钮 return { title: "标题", des......
小程序实现自定义分享微信好友及微信朋友圈
Debug的博客
07-05 1931
表示点击分享的链接要跳转到的页面。表示分享后展示的文本信息。
微信小程序实现的自定义分享功能示例
10-17
主要介绍了微信小程序实现的自定义分享功能,结合实例形式分析了微信小程序自定义分享功能的原理与简单实现技巧,需要的朋友可以参考下
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
01-20
在微信小程序开发中，页面间的跳转和数据传递是核心功能之一。本文将详细讲解如何在微信小程序中通过两种方式实现这一目标：使用`navigator`组件和使用`wx.navigateTo` API。 **方法一：使用navigator组件跳转传参*...
微信小程序代码-云笔记开发.zip
04-22
6. **组件化开发**：微信小程序支持组件化开发，可以将常用的功能封装成自定义组件，提高代码复用性和开发效率。在云笔记应用中，可能会有笔记列表、编辑器、搜索框等组件。 7. **云开发**：微信小程序还提供了云...
微信小程序 - 云笔记源码.zip
05-04
综上所述，"微信小程序 - 云笔记源码.zip"是一个全面的微信小程序开发实例，涵盖了前端开发的基本技术栈，对于学习和理解微信小程序开发流程、实践组件化开发、API调用以及数据管理等方面具有很高的参考价值。
微信小程序自定义对话框
02-21
微信小程序开发——自定义对话框+弹出和隐藏动画，博客地址http://blog.csdn.net/pcaxb/article/details/56276180
微信小程序笔记（黑马程序员）
05-26
7. **组件化开发**：微信小程序支持组件化开发，可以自定义组件复用代码，提高开发效率。理解组件的生命周期、属性、事件处理等概念，有助于构建复杂的应用。 8. **生命周期与性能优化**：每个小程序页面都有其生命...
小程序如何自定义分享内容
不靠谱的作曲家
08-11 695
通过button里的open-type属性里的share参数即自可定义分享按钮< button open-type = " share " > 分享 < button open-type = " share " > 分享 < button open-type = " share " > 分享 分享
微信小程序常用组件分享
sam的博客
04-22 6705
工作中经常会用到如下，分享一下，方便以后复制粘贴，懒得重复造轮子 官方小程序示例 3d轮播图 抽奖9宫格 转盘抽奖 水平垂直居中 序列帧 自定义轮播按钮 活动规则 包含 自定义滚动条 海报生成 包含 不同数据自适应高度生成海报 视频封面 多视频切换 自定义顶部下拉 覆盖在全屏视频上的按钮 权限被拒绝再次授权 ar识别 验证码倒计时 大小屏幕兼容 组件间方法调用 视频全屏显示4种方式 视频无缝衔接 图表下载 底部分享好友 包
自定义微信分享样式
weixin_34082177的博客
11-24 1730
博客地址 Preface 产品希望我们在微信分享出去的链接，有自己的样式，而不是仅仅一个链接。用产品的话来说，你发给客户一个链接，客户敢点么？？？ 听着比较有意思，不过也不能说完全没有道理，毕竟各种各样的诈骗大家也是有所耳闻，经确认，产品想要： 而我们当前分享是： Main 总监给我提示说，微信有 js-sdk ，可以在 js 里设置...
关于微信小程序在组件中使用分享坑
qq_44755705的博客
02-21 468
微信小程序分享功能
微信小程序自定义组件---生成小程序分享海报分享到朋友圈
qq_41756580的博客
01-14 2195
在开发微信小程序的过程中免不了要使用到分享功能，然而现在微信官方还没有开放小程序分享到朋友圈的功能，这时候我们只能使用其他方法分享到朋友圈了。 效果图如下： 组件文件： js文件： // components/rwj-poster/index.js Component({ /** * 组件的属性列表 */ properties: { }, /** ...
微信小程序音频功能实现：录音、播放与波形图
在微信小程序中，实现录制、试听和上传音频的功能是一项常见的需求。本项目选择了`getBackgroundAudioManager`作为核心组件来处理音频操作。`getBackgroundAudioManager`是微信小程序提供的一种API，用于管理后台...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值