您的当前位置:首页>全部文章>文章详情

【UniApp】uniapp 微信分享

CrazyPanda发表于:2023-12-13 23:26:11浏览:335次TAG:

前言

       微信分享是uniapp开发中常见的需求,大部分的app或者小程序都会具备微信分享的功能,但微信分享效果并不难实现,因为uniapp本身自带了一个微信分享的api,我们只需要调用微信分享的api即可实现

前置条件

        要完成微信分享首先得打开微信分享的功能,打开manifest.json文件,点击app模块配置,找到微信分享并选中即可

        注意:appid不是必填项,如果appid为空时分享出去的内容来源会显示为HBuilder,如果需要显示的内容来源是自身的app则需自行在各微信平台注册appid,填写注册的appid,打包后生效。

1.jpeg

 分享到聊天界面

<template>
	<view>
		<button @click="share">点我微信分享</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			share() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "https://cn.bing.com/images/search?q=%e5%a5%b6%e8%8c%b6&form=HDRSC2&first=1&tsc=ImageHoverTitle",    // 分享跳转的链接
					title: "微信分享",    // 分享标题
					summary: "微信分享示例",    // 分享内容文字
					imageUrl: "https://tse4-mm.cn.bing.net/th/id/OIP-C.4dMFZeNZTSghjY1RpuOqlgHaLH?w=182&h=273&c=7&r=0&o=5&dpr=1.25&pid=1.7",    //分享封面图片
					success: function(res) {
						// 此处是调起微信分享成功的回调
					},
					fail: function(err) {
						// 此处是调起微信分享失败的回调
					}
				});
			}
		}
	}
</script>
 
<style>
 
</style>

分享到朋友圈

<template>
	<view>
		<button @click="share">点我微信分享</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			share() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 0,
					href: "https://cn.bing.com/images/search?q=%e5%a5%b6%e8%8c%b6&form=HDRSC2&first=1&tsc=ImageHoverTitle",    // 分享跳转的链接
					title: "微信分享",    // 分享标题
					imageUrl: "https://tse4-mm.cn.bing.net/th/id/OIP-C.4dMFZeNZTSghjY1RpuOqlgHaLH?w=182&h=273&c=7&r=0&o=5&dpr=1.25&pid=1.7",    //分享封面图片
					success: function(res) {
						// 此处是调起微信分享成功的回调
					},
					fail: function(err) {
						// 此处是调起微信分享失败的回调
					}
				});
			}
		}
	}
</script>
 
<style>
 
</style>

分享到微信收藏

<template>
	<view>
		<button @click="share">点我微信分享</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			share() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneFavorite",
					type: 0,
					href: "https://cn.bing.com/images/search?q=%e5%a5%b6%e8%8c%b6&form=HDRSC2&first=1&tsc=ImageHoverTitle",    // 分享跳转的链接
					title: "微信分享",    // 分享标题
					imageUrl: "https://tse4-mm.cn.bing.net/th/id/OIP-C.4dMFZeNZTSghjY1RpuOqlgHaLH?w=182&h=273&c=7&r=0&o=5&dpr=1.25&pid=1.7",    //分享封面图片
					success: function(res) {
						// 此处是调起微信分享成功的回调
					},
					fail: function(err) {
						// 此处是调起微信分享失败的回调
					}
				});
			}
		}
	}
</script>
 
<style>
 
</style>

        以上就是微信分享的基本用法了,关于微信分享更多的信息可以前往uniapp 微信分享查看

猜你喜欢

【UniApp】uniapp中如何实现电子签名和合同管理
标题:Uniapp中如何实现电子签名和合同管理引言:随着科技的不断进步,电子签名和合同管理在现代社会中越来越重要。在移动应用开发中,Uniapp作为一个跨平台框架,提供了很多便利的功能和工具,可以帮助开发者实现电子签名和合同管理功能。本文将介绍如何在Uniapp中实现电子签名和合同管理,并提供具体的代码示例。一、电子签名功能的实现准备工作在Uniapp项目中,首先需要引入一个用于电子签名的插件,推荐使用vue-signature-pad插件。该插件可以在HTML中创建一个画布元素,用户
发表于:2023-12-23 浏览:463 TAG:
【UniApp】uniapp数据更新却没有渲染页面怎么办
随着移动互联网的快速发展,移动应用程序也越来越普及,很多企业和开发者都选择使用跨平台开发工具来开发移动应用程序。Uniapp作为当前最热门的跨平台移动应用开发框架之一,因其可一次编写代码,多平台运行的优点而受到开发者的广泛青睐。然而,有时候我们在使用Uniapp进行开发时,会遇到数据更新却没有渲染页面的情况。那么,我们该如何解决这个问题呢?首先,我们需要了解这个问题产生的原因。一般来说,数据更新却没有渲染页面的问题,是由于数据更新后,Vue组件没有自动重新渲染造成的。这是因为Vue的响
发表于:2023-12-25 浏览:366 TAG:
【UniApp】uniapp怎么跳转页面?两种方式介绍
uni-app 是一个基于Vue.js的跨平台开发框架,我们可以用它来开发基于H5、小程序、Android/iOS等多平台的应用程序。其中,页面跳转是一个非常关键的功能,本文将会介绍uni-app中常见的两种页面跳转方式,分别是路由跳转和页面间事件通信。一、路由跳转路由跳转是指在uni-app中通过改变页面url的方式来跳转到不同的页面。uni-app提供了一套路由跳转的API,包括:uni.navigateTo()使用 uni.navigateTo() 可以跳转到应用的非底部导航栏页
发表于:2023-12-16 浏览:335 TAG:
【UniApp】uniapp路由跳转传递与接收参数
Uniapp 是一个基于 Vue.js 的跨平台开发框架,它允许开发者使用一套代码来同时构建 iOS、Android、H5 等多个平台的应用。在 Uniapp 中,路由传参是非常常见的需求,它可以让页面之间进行数据的传递和交互。下面是对 Uniapp 路由传参的详细解析一、传递参数在 Uniapp 中,可以通过两种方式来传递参数:1.通过 URL 参数传递通过在 URL 中添加参数的方式传递数据,可以在目标页面中通过 $route.query 获取传递过来的参数。例如,在 A 页面中跳转到 B
发表于:2023-12-13 浏览:390 TAG:
【UniApp】如何在uniapp中实现图片上传和预览
如何在uniapp中实现图片上传和预览在现代社交网络和电子商务应用中,图片上传和预览功能是非常常见的需求。本文将介绍如何在uniapp中实现图片上传和预览的功能,并给出具体的代码示例。一、图片上传功能的实现在uniapp项目中,首先需要在页面中添加一个图片上传组件,如下所示:&lt;template&gt; &nbsp;&nbsp;&lt;view&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;image&nbsp;v-for=&quot;(item,&nbsp;in
发表于:2023-12-11 浏览:416 TAG:
【Uniapp】uniapp如何传递参数
一、通过URL传递参数URL是一种描述文件在计算机网络中位置的方式。在uniapp中,可以通过URL传递参数。在web开发中,可以通过query string来传递参数。在uniapp中有两种方式来进行URL传参:路由跳转和h5页面跳转:1.路由跳转uniapp中提供了一些路由相关的API,其中,uni.navigateTo和uni.redirectTo这两个API可以在跳转时携带参数。在跳转时,可以将参数以对象的形式传递给URL,并以query string(查询字符串)的形式来表示。如下所示
发表于:2024-03-26 浏览:318 TAG:
【UniApp】uniapp引入iconfont图标及使用方式
🧊 前言本文主要讲述的是在使用uniapp中如何引入iconfont图标,以及两种常用的位置。位置一:App下原生导航栏的按钮使用字体图标。位置二:页面中的任意位置使用iconfont图标。🌺 正文第一步:打开iconfont官网新建项目并添加自己所需要的图标这里是iconfont的网址链接: iconfon官网 新建项目&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;不要勾选彩色,会导致在项目中无法修改字体颜色及样式,本人亲测,找了半天解决办
发表于:2023-12-08 浏览:408 TAG:
【UniApp】利用uniapp实现图片压缩功能
利用uniapp实现图片压缩功能随着手机拍照功能的提升,我们在日常生活中经常会拍摄大量的照片。然而,这些高像素的照片占据了手机的存储空间,使手机变得缓慢且容易存满。为了解决这个问题,我们可以利用uniapp中的相关技术,实现图片压缩功能,将图片压缩至更小的文件大小,保留合适的像素和画质。下面我们将详细介绍在uniapp中如何实现图片压缩功能。步骤一:引入相关插件首先,我们需要在uniapp项目中引入相关的插件。最常用的图片压缩插件是uni-image-compress,它基于image
发表于:2023-12-09 浏览:441 TAG:
【UniApp】如何在uniapp中实现全局状态管理
如何在uniapp中实现全局状态管理,需要具体代码示例引言:在uniapp开发中,全局状态管理是非常重要的一部分,它可以方便地实现数据共享和状态管理,提高开发效率。本文将介绍如何在uniapp中实现全局状态管理,并提供具体的代码示例。一、什么是全局状态管理?全局状态管理是一种用于管理应用程序全局状态的方法。它可以将应用程序的状态存储在一个全局的数据仓库中,并通过触发和监听状态的变化,实现不同组件之间的数据共享和通信。在uniapp中,全局状态管理可以帮助我们解决多个组件之间的数据传递和
发表于:2023-12-11 浏览:438 TAG:
【UniApp】uniapp中弹出层如何遮挡住uniapp中自带的tabbar
在 uniapp 中,如果你想要遮挡住自带的 tabbar,你可以使用 uniapp 自带的弹出层组件来实现。具体来说,你可以使用 uniapp 的 popup 组件来实现弹出层的效果。你可以在 popup 组件中包含你想要显示的内容,然后设置 popup 组件的 mask 属性为 true,这样就可以在弹出层中显示一个半透明的蒙层,来遮挡住底部的 tabbar。示例代码如下:&lt;template&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;viewclass=&amp;quot
发表于:2023-12-13 浏览:337 TAG: