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

vue

微信分享

155 浏览量更新于2023-05-09 收藏 40KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

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

主要介绍了vue项目中实现的微信分享功能,结合实例形式分析了基于vue.js实现的微信分享功能具体定义与使用

方法,需要的朋友可以参考下

本文实例讲述了vue项目中实现的微信分享功能。分享给大家供大家参考，具体如下：

/* 微信分享 */

Vue.prototype.wechatShare = (shareData) => {

let resource = {

title: '随我心愿！',

desc: '体验优质服务',

link: 'https://www.abc.cn/',

img: 'https://www.abc.cn/images/share_logo.jpg'

}

let obj = Object.assign({}, resource, shareData)

let params = {url: window.location.href}

$post('/vue/weixinjiekou', params).then(data => {

// 分享标题等参数

const shareTitle = obj.title

const shareDesc = obj.desc

const shareLink = obj.userShare ? obj.link + data.flag : obj.link

const shareImgUrl = obj.img

const config = {

title: shareTitle, // 分享标题

desc: shareDesc, // 分享描述

link: shareLink, // 分享链接

imgUrl: shareImgUrl, // 分享图标

type: '', // 分享类型,music、video或link，不填默认为link

dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空

success: function () {},

cancel: function () {}

}

wechat.config({

debug: false,

appId: data.appid, // 和获取Ticke的必须一样------必填，公众号的唯一标识

timestamp: data.timestamp, // 必填，生成签名的时间戳

nonceStr: data.noncestr, // 必填，生成签名的随机串

signature: data.signature, // 必填，签名，见附录1

// 需要分享的列表项:发送给朋友，分享到朋友圈，分享到QQ，分享到QQ空间

jsApiList: [

'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo',

'onMenuShareQZone', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice',

'pauseVoice', 'stopVoice', 'onVoicePlayEnd', 'uploadVoice', 'downloadVoice',

'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'translateVoice',

'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu',

'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem',

'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard',

'chooseCard', 'openCard'

]

})

// 处理验证失败的信息

wechat.error(function (res) {

console.log('验证失败返回的信息:', res)

})

// 处理验证成功的信息

wechat.ready(function () {

// 分享给朋友

wechat.onMenuShareAppMessage(config)

// 分享到朋友圈

wechat.onMenuShareTimeline(config)

// 分享到qq

wechat.onMenuShareQZone(config)

// 分享到微博

wechat.onMenuShareWeibo(config)

// 分享到qq空间

wechat.onMenuShareQZone(config)

})

}

微信接口信息

{

"result": {

"appid": "appid",

"noncestr": "随机串",

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

ALCH-WUR

粉丝: 153
资源: 916

会员权益专享

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

vue微信分享插件使用方法详解

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

VueJs单页应用实现微信网页授权及微信分享功能示例

vue3 pc端微信分享

vue实现 微信公众号报警功能

vue3 封装微信分享功能

使用vue怎么实现微信QQ的分享图文分享组件

vue h5调用微信分享

vue 微信公众号分享朋友

用vue2 开发微信小程序分享给朋友和朋友圈的功能 怎么实现

vue - 网站接入微信扫码登录功能详细教程,完整详细流程及完整功能示例源代码(附常

vue3实现微信扫码登录

使用vue怎么实现微信QQ的分享图文分享怎样修改其显示的样式

vue使用微信JS-SDK实现分享功能

vue h5怎么接收微信小程序传递的参数

vue3 + elementplus实现微信气泡窗

springboot加vue实现微信扫码登录

使用uniapp实现微信登录并给出示例代码

用vue编写一个微信授权登录页面

vue判断是微信还是企业微信

会员权益专享

最新资源

vue实现微信公众号报警功能

用vue2 开发微信小程序分享给朋友和朋友圈的功能怎么实现