vue 使用jssdk分享
背景
在vue中使用jssdk微信分享
weixin-js-sdk mint-ui需要安装npm install weixin-js-sdk mint-ui --save
mixins/wechat.js
//weixin-js-sdk应用
const wx = require('weixin-js-sdk')
import { Toast } from 'mint-ui'
export default {
methods: {
wechatShare(info) {
// 判断苹果手机
let _url = ''
if (window.__wxjs_is_wkwebview === true) {
_url = window.location.href.split('#')[0] || window.location.href
} else {
_url = window.location.href
}
// 访问后台接口获取微信参数
this.$store
.dispatch('GetWxParam', { url: encodeURIComponent(_url) })
.then(res => {
wx.config({
debug: false,
appId: res.data.appId, // 必填,公众号的唯一标识
timestamp: res.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.signature, // 必填,签名,见附录1
jsApiList: [
'previewImage',
'hideAllNonBaseMenuItem',
'showMenuItems',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'chooseWXPay'
] // 必填,需要使用的 JS 接口列表,所有JS接口列表见附录2
})
})
.catch(err => {
console.log(err)
})
wx.ready(() => {
const share_title = info.title
const share_desc = info.desc
const share_link = info.link
const share_img = info.img
wx.showOptionMenu()
wx.onMenuShareTimeline({
title: share_title, // 分享标题
link: share_link, // 分享链接
imgUrl: share_img, // 分享图标
success: function() {
Toast('已成功分享到朋友圈')
},
cancel: function() {
Toast('已取消分享')
}
})
wx.onMenuShareAppMessage({
title: share_title, // 分享标题
desc: share_desc, // 分享描述
link: share_link, // 分享链接
imgUrl: share_img, // 分享图标
success: function() {
Toast('已成功分享给您的朋友')
},
cancel: function() {
Toast('已取消分享')
}
})
})
}
}
}
使用方法
import wxShare from '@/mixins/wechat' //引用
export default {
mixins: [wxShare], //
methods: {
setShare() {
const shareInfo = {
title: `羽绒服低至199元!`,
desc: `7月26日-8月3日,年中限时特惠,售完即止`,
link: window.location.href,
img: '.../logo.jpg'
}
// mixins
this.wechatShare(shareInfo)
},
},
created(){
// 设置
this.setShare()
}
}
来源:https://segmentfault.com/a/1190000015999815
vue 使用jssdk分享的更多相关文章
- vue实现微信分享朋友圈和朋友功能
vue实现微信分享朋友圈和朋友功能 A-A+ haibao 2018-10-25 11 21 6.2 k 百度已收录 前端开发 温馨提示:本文共3536个字,读完预计9分钟. 这两天在开发 ...
- Vue微信自定义分享时安卓系统config:ok,ios系统config:invalid signature签名错误,或者安卓和ios二次分享时均config:ok但是分享无效的解决办法
简述需求:要求指定页面可以进行微信自定义分享(自定义标题,描述,图片,链接),剩下的页面隐藏所有基础接口.二次分享依然可以正常使用,切换至其他页面也可以正常进行自定义分享. 这两天在做微信自定义分享的 ...
- 微信JS-SDK“分享信息设置”API及数字签名生成方法(NodeJS版本)
原文:微信JS-SDK"分享信息设置"API及数字签名生成方法(NodeJS版本) 先上测试地址以示成功: 用微信打开下面地址测试 http://game.4gshu.com/de ...
- 微信jssdk分享链接给好友,图标只能自己看到,对方看不到!
问题描述:调用微信jssdk分享接口时,所有参数均正常的情况下(排除参数错误的情况),分享给好友后,其中的小图标自己看得到,接收到分享的好友看不到小图标! (如上图所示!) 出现上述问题的原因:本人猜 ...
- 微信jssdk分享功能,jssdk成功调用,分享内容自定义失败
前提:调用微信jssdk分享功能,通过微信开发者工具调试,调用正常,无任何报错信息. 问题:调用成功,且开发者工具正常显示,但是通过真机调试,分享出去后,自定义内容失效,为微信自动获取的默认内容!截止 ...
- 微信JSSDK分享朋友圈微信自定义分享接口
服务项目 新手技术咨询 企业技术咨询 定制开发 服务说明 QQ有问必答 QQ.微信.电话 微信开发.php开发,网站开发,系统定制,小程序开发 价格说明 200元/月 1000/月 商议 ...
- 企业微信jssdk分享接口管理系统
服务项目 新手技术咨询 企业技术咨询 定制开发 服务说明 QQ有问必答 QQ.微信.电话 微信开发.php开发,网站开发,系统定制,小程序开发 价格说明 200元/月 1000/月 商议 ...
- 微信JSSDK分享功能详解
本文以微信分享到朋友圈,分享给微信好友为例为参考,进行调用测试,想添加其他的功能,自行查看开发人员文档即可 工欲善其事,必先利其器,好好利用下边的帮助工具,都是腾讯给开发人员的工具 1.微信开发者说明 ...
- jquery jssdk分享报错解决方法
jssdk分享报错解决方法 一般都是参数传错了
随机推荐
- 【前端】DOM操作
1 什么是DOM 全称 Document Object Model 文档对象模型. 一个web页面的展示,是由html标签组合成的一个页面,dom对象实际就是将html标签转换成了一个文档对象.可以通 ...
- 使用VisualStudio 开发Arduino
Arduino IDE界面简洁,整体功能还算完善,相比其他编译器明显的不足就是不能进行硬件调试,再就是没有代码提示功能,文件关系不清晰.头文件打开不方便. VisualStudio作为时下最为流行的W ...
- Arduino库
单总线库: 下载地址 : 链接:https://pan.baidu.com/s/1YSuqrXWuBAxMEUWHy8rckw 提取码:svix 把整个文件夹复制到 Arduino安装目录的 ...
- shiro常见的异常以及处理方法
1.shiro的常见异常 1.1 AuthenticationException 异常是Shiro在登录认证过程中,认证失败需要抛出的异常. AuthenticationException包含以下子 ...
- day03记 angular代码
一.AngularJs AngularJS 是一个 JavaScript 框架.通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. 1.四大特征 MVC模式.模块化.自动化双向数据绑 ...
- mysql分组排序加序号(不用存储过程,就简简单单sql语句哦)
做前端好长时间了,好久没动sql了.在追一个喜欢的女孩,做测试的,有这么个需求求助与本屌丝,机会难得,开始折腾起来,配置mysql,建库,建表.... 一 建表 CREATE TABLE `my_te ...
- UITableView和MJReFresh结合使用问题记录
1. 代码主动调用下拉刷新, [self.tableView.mj_header beginRefreshing]; 调用会走: [MJRefreshNormalHeader headerWithRe ...
- java在文本处理中的相关辅助工具类
1,java分词 package com.bobo.util; import ICTCLAS.I3S.AC.ICTCLAS50; public class Cutwords { public stat ...
- CTO爆料:2019程序员最需要了解的行业前沿技术是什么?
安森,个推CTO 毕业于浙江大学,现全面负责个推技术选型.研发创新.运维管理等工作,已带领团队开发出针对移动互联网.金融风控等行业的多项前沿数据智能解决方案. 曾任MSN中国首席架构师,拥有十余年资深 ...
- RESTful风格编程
参考文档:http://blog.didispace.com/springbootrestfulapi/ https://www.jianshu.com/p/91600da4df95 *)RESTfu ...