【UniApp】uniapp 微信分享
CrazyPanda发表于:2023-12-13 23:26:11浏览:335次
前言
微信分享是uniapp开发中常见的需求,大部分的app或者小程序都会具备微信分享的功能,但微信分享效果并不难实现,因为uniapp本身自带了一个微信分享的api,我们只需要调用微信分享的api即可实现
前置条件
要完成微信分享首先得打开微信分享的功能,打开manifest.json文件,点击app模块配置,找到微信分享并选中即可
注意:appid不是必填项,如果appid为空时分享出去的内容来源会显示为HBuilder,如果需要显示的内容来源是自身的app则需自行在各微信平台注册appid,填写注册的appid,打包后生效。
分享到聊天界面
<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中创建一个画布元素,用户
- 【UniApp】uniapp数据更新却没有渲染页面怎么办
- 随着移动互联网的快速发展,移动应用程序也越来越普及,很多企业和开发者都选择使用跨平台开发工具来开发移动应用程序。Uniapp作为当前最热门的跨平台移动应用开发框架之一,因其可一次编写代码,多平台运行的优点而受到开发者的广泛青睐。然而,有时候我们在使用Uniapp进行开发时,会遇到数据更新却没有渲染页面的情况。那么,我们该如何解决这个问题呢?首先,我们需要了解这个问题产生的原因。一般来说,数据更新却没有渲染页面的问题,是由于数据更新后,Vue组件没有自动重新渲染造成的。这是因为Vue的响
- 【UniApp】uniapp怎么跳转页面?两种方式介绍
- uni-app 是一个基于Vue.js的跨平台开发框架,我们可以用它来开发基于H5、小程序、Android/iOS等多平台的应用程序。其中,页面跳转是一个非常关键的功能,本文将会介绍uni-app中常见的两种页面跳转方式,分别是路由跳转和页面间事件通信。一、路由跳转路由跳转是指在uni-app中通过改变页面url的方式来跳转到不同的页面。uni-app提供了一套路由跳转的API,包括:uni.navigateTo()使用 uni.navigateTo() 可以跳转到应用的非底部导航栏页
- 【UniApp】uniapp路由跳转传递与接收参数
- Uniapp 是一个基于 Vue.js 的跨平台开发框架,它允许开发者使用一套代码来同时构建 iOS、Android、H5 等多个平台的应用。在 Uniapp 中,路由传参是非常常见的需求,它可以让页面之间进行数据的传递和交互。下面是对 Uniapp 路由传参的详细解析一、传递参数在 Uniapp 中,可以通过两种方式来传递参数:1.通过 URL 参数传递通过在 URL 中添加参数的方式传递数据,可以在目标页面中通过 $route.query 获取传递过来的参数。例如,在 A 页面中跳转到 B
- 【UniApp】如何在uniapp中实现图片上传和预览
- 如何在uniapp中实现图片上传和预览在现代社交网络和电子商务应用中,图片上传和预览功能是非常常见的需求。本文将介绍如何在uniapp中实现图片上传和预览的功能,并给出具体的代码示例。一、图片上传功能的实现在uniapp项目中,首先需要在页面中添加一个图片上传组件,如下所示:<template> <view> <image v-for="(item, in
- 【Uniapp】uniapp如何传递参数
- 一、通过URL传递参数URL是一种描述文件在计算机网络中位置的方式。在uniapp中,可以通过URL传递参数。在web开发中,可以通过query string来传递参数。在uniapp中有两种方式来进行URL传参:路由跳转和h5页面跳转:1.路由跳转uniapp中提供了一些路由相关的API,其中,uni.navigateTo和uni.redirectTo这两个API可以在跳转时携带参数。在跳转时,可以将参数以对象的形式传递给URL,并以query string(查询字符串)的形式来表示。如下所示
- 【UniApp】uniapp引入iconfont图标及使用方式
- 🧊 前言本文主要讲述的是在使用uniapp中如何引入iconfont图标,以及两种常用的位置。位置一:App下原生导航栏的按钮使用字体图标。位置二:页面中的任意位置使用iconfont图标。🌺 正文第一步:打开iconfont官网新建项目并添加自己所需要的图标这里是iconfont的网址链接: iconfon官网 新建项目 不要勾选彩色,会导致在项目中无法修改字体颜色及样式,本人亲测,找了半天解决办
- 【UniApp】利用uniapp实现图片压缩功能
- 利用uniapp实现图片压缩功能随着手机拍照功能的提升,我们在日常生活中经常会拍摄大量的照片。然而,这些高像素的照片占据了手机的存储空间,使手机变得缓慢且容易存满。为了解决这个问题,我们可以利用uniapp中的相关技术,实现图片压缩功能,将图片压缩至更小的文件大小,保留合适的像素和画质。下面我们将详细介绍在uniapp中如何实现图片压缩功能。步骤一:引入相关插件首先,我们需要在uniapp项目中引入相关的插件。最常用的图片压缩插件是uni-image-compress,它基于image
栏目分类全部>
推荐文章
- 【UniApp】利用uniapp实现图表展示功能
- 【JavaScript】如何从 JavaScript 数组中删除重复元素?
- 【PHP】ThinkPHP 资源路由的简单使用,restfull风格API
- 【PHP】interface接口、abstract抽象类、trait转载合并
- 【Go】Go语言工程结构详述
- 【PHP】php魔术常量、超全局变量和魔术方法汇总
- 【AntDesignPro】Ant Design Pro学习记录—ModalForm的使用(二)
- 【Python】深度剖析len函数的意义与用法
- 【Redis】redis除了做缓存还能做什么
- 【Python】如何用Python编写SVM算法