vue 如何调用微信分享_微信小程序如何直接分享到朋友圈？

最新推荐文章于 2024-06-12 11:27:39 发布

weixin_39797758

最新推荐文章于 2024-06-12 11:27:39 发布

阅读量992

点赞数

文章标签： vue 如何调用微信分享

本文链接：https://blog.csdn.net/weixin_39797758/article/details/112208987

版权

近日微信终于公开了小程序分享到朋友圈，下面就分享一下技术上如何将小程序直接分享到朋友圈吧。

官方技术文档如下：

分享到朋友圈（Beta）

从基础库 2.11.3 开始支持
此功能为beta版，暂仅在Android平台支持

可将小程序页面分享到朋友圈。适用于内容型页面的分享，不适用于有较多交互的页面分享。

设置分享状态

小程序页面默认不可被分享到朋友圈，开发者需主动设置“分享到朋友圈”。页面允许被分享到朋友圈，需满足两个条件：

首先，页面需设置允许“发送给朋友”。具体参考 Page.onShareAppMessage 接口文档
满足条件 1 后，页面需设置允许“分享到朋友圈”，同时可自定义标题、分享图等。具体参考 Page.onShareTimeline 接口文档

满足上述两个条件的页面，可被分享到朋友圈。

我们如何做呢？

直接在代码里面加上onShareTimeLine函数，在里面return { title 和 query即可}，这个和分享小程序给别人是类似的。

好了，以上就是简单介绍。小程序问题都可以维信搜一搜：采云。希望可以帮助到您！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_39797758

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue微信分享到朋友圈 vue微信发送给好友

11-30

本文为大家分享了vue微信分享至朋友圈&&分享至朋友代码的封装，供大家参考，具体内容如下 1.新建share.js文件 import {shareSDK} from "../api/common";//分享api import wx from 'weixin-js-sdk' export const shareTitle = '测试'; export const shareUrl = '测试连接'; export const shareImg = '测试图片'; export const shareDesc = '测试详情'; /** *分享 * @param _this * @pa

【uniapp】uniapp+vue3微信小程序实现分享功能

最新发布

TTong_190502的博客

08-08

753

uniapp+vue3做的微信小程序，实现分享功能

参与评论您还未登录，请先登录后发表或查看评论

vue页面分享微信朋友圈

xionghaizhi的博客

02-06

1204

个人博客地址微信官方文档注：1.web的分享只能通过微信右上角自带的三个点分享，只有app才能实现自定义按钮的分享。步骤： 1.安装：npm i -S weixin-js-sdk 2.新建js导入 import wx from ‘weixin-js-sdk’ //微信sdk依赖 3.js文件 import wx from 'weixin-js-sdk' //微信sdk依赖 import axios from 'axios'; // 引用全局 //要用到微信API function get

vue中微信分享好友，朋友圈功能

qq_41742576的博客

07-31

675

title : name , // 分享标题 desc : desc , // 分享描述 link : link , // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl : imgUrl , // 分享图标 success :() => {Toast('发送好友分享模板设置成功') } , fail :(err) => {// 设置失败 Toast('发送好友分享模板设置失败') } }) wx . updateTimelineShareData({

vue实现微信分享朋友圈,发送朋友的示例讲解

08-28

下面小编就为大家分享一篇vue实现微信分享朋友圈,发送朋友的示例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue 如何调用微信分享_vue微信分享的实现(在当前页面分享其他页面)

weixin_39759155的博客

12-19

1829

首先以分享给朋友为例1、先看官方文档wx.onMenuShareAppMessage({title: '', // 分享标题desc: '', // 分享描述link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '', // 分享图标type: '', // 分享类型,music、video或link，不填默认为linkdataUrl: ''...

vue 如何调用微信分享_vue 调用微信分享遇到的问题

weixin_39553156的博客

12-19

482

关于微信分享网上有一堆的教程，就不详细说了，大致如下：1.安装cnpm install weixin-js-sdk --save-dev2.新建一个share.js，与main.js放在同一层级(我只是偷懒，方便调用)import wx from 'weixin-js-sdk'exports.install=function (Vue, options) {Vue.prototype.shareL...

vue 微信分享

毛茸茸的枫哥

07-30

2366

vue 微信分享参考资料微信JS-SDK说明文档前期工作 1.安装微信开发者工具为方便以后开发debug，可以安装微信开发者工具这里会显示微信分享的回调，如有错误可对应解决 2.获取公众号appid和设置IP白名单登录微信公众平台目录：开发&gt;基本配置 3.设置JS接口安全域名此txt文件必须与分享链接目录相对应，例如分享链接是https://...

微信JSSDK接口调用分享到朋友圈实例

04-14

微信JSSDK接口调用分享到朋友圈实例，分享给朋友，给分享的内容添加标题，内容，图片等自定义。利用官方的dll快速简单的代码，内有例子和官网封装好的dll Senparc.Weixin.dll Senparc.Weixin.MP.dll

vue微信分享的实现(在当前页面分享其他页面)

10-17

主要介绍了vue微信分享，在当前页面分享其他页面，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

vue项目中实现的微信分享功能示例

10-17

主要介绍了vue项目中实现的微信分享功能,结合实例形式分析了基于vue.js实现的微信分享功能具体定义与使用方法,需要的朋友可以参考下

vue-h5-分享（分享好友，分享朋友圈）

weixin_54145360的博客

10-27

2045

最近做的一个需求h5分享微信好友，朋友圈，实现过程有几点注意事项，记录下来。

Vue项目中调取微信分享api

Tom__cy的博客

05-16

1680

首先做微信网页都要接入微信sdk；安装sdk npm install weixin-js-sdk --save 引入sdk vue是单页面项目，比如你想要接入微信分享功能，分享功能在每个路由地址都要有，因为每个路由的url是不一样的，就需要在每个路由地址都引入一遍 import wx from 'weixin-js-sdk' 在组建的生命周期creatd()和mounted()里面放代码 ...

微信小程序开发中的微信分享和朋友圈分享设置

吃不胖.

06-12

985

通过分享功能，用户可以将小程序的内容或页面分享给其他用户或分享到朋友圈，从而增加小程序的曝光度和用户的活跃度。在上述代码中，我们可以看到一个新的onShareTimeline函数，用来设置朋友圈分享的标题、路径和封面图。其中，title属性用来设置分享的标题，query属性用来设置分享的路径，imageUrl属性用来设置分享的封面图。其中，title属性用来设置分享的标题，path属性用来设置分享的路径，imageUrl属性用来设置分享的封面图。在朋友圈分享的设置中，需要获取用户的位置信息。

Vue微信自定义分享时安卓系统config:ok，ios系统config:invalid signature签名错误，或者安卓和ios二次分享时均config:ok但是分享无效的解决办法...

weixin_30678821的博客

04-23

645

简述需求：要求指定页面可以进行微信自定义分享(自定义标题，描述，图片，链接)，剩下的页面隐藏所有基础接口。二次分享依然可以正常使用,切换至其他页面也可以正常进行自定义分享。这两天在做微信自定义分享的需求，相信大家都遇到过这问题，就是使用JS-SDK的页面注入配置信息时安卓系统config:ok，ios系统config:invalid signature签名错误。然...

vue h5调用微信分享

12-14

要在Vue H5中调用微信分享，首先需要引入微信官方的JS-SDK库。在Vue项目的index.html文件中，可以在<head>标签内添加如下代码： ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 然后，在Vue组件的created生命周期钩子函数中，使用Vue的axios或者其他网络请求库向后端请求获取微信配置信息。 ```javascript created() { this.fetchWechatConfig(); }, methods: { async fetchWechatConfig() { const response = await axios.get('/api/wechat/config'); // 向后端请求微信配置信息 const { appId, timestamp, nonceStr, signature } = response.data; // 将配置信息存储到全局变量中 this.$store.commit('setWechatConfig', { appId, timestamp, nonceStr, signature }); this.initWechatSDK(); }, initWechatSDK() { const { appId, timestamp, nonceStr, signature } = this.$store.state.wechatConfig; wx.config({ appId, timestamp, nonceStr, signature, jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'], // 配置需要使用的微信API }); // 进行微信SDK的初始化 wx.ready(() => { this.shareToWechat(); }); }, shareToWechat() { const shareData = { title: '分享标题', link: '分享链接', imgUrl: '分享图片链接', desc: '分享描述', }; // 配置分享的具体内容 wx.onMenuShareTimeline(shareData); // 分享到朋友圈 wx.onMenuShareAppMessage(shareData); // 分享给好友 }, }, ``` 上述代码中，我们通过axios库向后端请求了微信配置信息，并将其存储到Vuex的全局状态中。然后，我们使用微信JS-SDK中的`wx.config`方法进行微信验证和初始化配置。一旦初始化成功，`wx.ready`回调函数将会被触发，我们在该函数中调用`shareToWechat`方法来配置分享的具体内容。在`shareData`对象中，我们可以自定义分享的标题、链接、图片和描述等信息，然后使用`wx.onMenuShareTimeline`方法配置分享给朋友圈的内容，使用`wx.onMenuShareAppMessage`方法配置分享给好友的内容。最后，我们可以在Vue组件中调用`shareToWechat`方法来触发微信分享。注意：在实际开发中，需要根据微信的API文档和后端提供的接口来进行相应的调整和配置。以上代码仅为示例，具体实现方式可能会有所不同。