【新手必看】vue如何使用微信jssdk调用微信,朋友圈分享功能
【该分享共分三部分】
- 微信公众号配置
- Vue框架调用jssdk
- 代码示例分享
一、关于公众号配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填,需要使用的JS接口列表
});
上面是官方示例,在分享前这些配置参数必须保证正确才能分享,下面详细讲解这几个参数
1. appId 这是你注册公众号就会有的,登录进去->开发者中心可查看
2. timestamp 当前时间戳即可
3. nonceStr 随机字符串,由开发者设置传入, 加强安全性(若不填写可能被重放请求) 。随机字符串,不长于32位。推荐使用大小写字母和数字,不同添加请求的nonce须动态生成,若重复将会导致领取失败。
4. signature 将 api_ticket、timestamp、card_id、code、openid、nonce_str的值拼接成一个字符串进行sha1加密
5. jsApiList 就是当前项目所需要的接口列表
上面的signature生成时需要一个api_ticket,这是哪来的呢?
一般这块是需要后端来做,前端人员只需调取接口即可,我们大概说一下。
这里就不得不提到access_token,它是公众号的全局唯一接口调用凭据,公众号调用各接口时都需使用access_token。它的有效期目前为2个小时,需定时刷新,重复获取将导致上次获取的access_token失效。建议公众号开发者使用中控服务器统一获取和刷新access_token,其他业务逻辑服务器所使用的access_token均来自于该中控服务器,不应该各自去刷新,否则容易造成冲突,导致access_token覆盖而影响业务。
1. 首先拿到appId和appSecret去获取access_token 请求URL:https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
2. 再用上面获取的access_token去获取api_tickt 请求URL:https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
还有个需要注意的点就是配置域名(项目页面访问域名和接口域名)时必须是已备案的域名,不要带端口号
二、关于Vue框架调用SDK
首先安装jssdk
npm install weixin-js-sdk --save-dev
然后建一个公共js文件,比如 share.js,在文件中引入
import wx from 'weixin-js-sdk'
三、代码示例分享
import wx from 'weixin-js-sdk';
import $http from '../businessUtils/HTTP'//这里是我封装好的axios请你接口文件 你也可以用ajax
import sha1 from 'sha1'
import { AppId, WxShareApi } from '../constant/Env.js';//我的env配置文件,appId和接口域名WxShareApi都在这里
function getWXConfig(dataObj){
const timeCode = new Date().getTime()
const nonceStr = Math.random().toString(36).substr(2, 15)
const wx_localUrl = location.href.split('#')[0]
$http.post(WxShareApi + "/wechat/getticket",{
time: timeCode,
code : sha1('XXXX' + timeCode) ,//与后端定义好的加密方式
})
.then(function(response){
var signatureText = 'jsapi_ticket=' + response.data.data.ticket + '&noncestr=' + nonceStr + '×tamp=' + timeCode + '&url=' + wx_localUrl;//这里的拼接方式上面有讲,与文档一致即可
wx.config({
debug: false,
appId: AppId, // 必填,公众号的唯一标识
timestamp: timeCode, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: sha1(signatureText),// 必填,签名,sha1加密哈
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填,需要使用的JS接口列表
});
wxshare(dataObj)
})
.catch(function(error){
console.log(error);
});
}
function wxshare(dataObj) {
// console.log('=dataObj==',dataObj)
wx.ready(function () {
var shareData = dataObj;
var sharetitle = shareData.sharetitle||'';
var sharedesc = shareData.sharedesc||'';
var shareimg = shareData.shareimg||'';
var linkUrl = shareData.sharelink||''; // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
wx.checkJsApi({
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
success: function (res) {
// 以键值对的形式返回,可用的api值true,不可用为false
// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
wx.onMenuShareTimeline({
title: sharetitle, // 分享标题
desc: sharedesc, // 分享描述
link: linkUrl,
imgUrl: shareimg,
success: function (data) { // 用户点击了分享后执行的回调函数
// console.log(222222,data)
},
cancel: function () {
// 用户取消分享后执行的回调函数
// console.log(222222,'cancel')
}
});
wx.onMenuShareAppMessage({
title: sharetitle, // 分享标题
desc: sharedesc, // 分享描述
link: linkUrl,
imgUrl: shareimg,
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function (data) { // 用户点击了分享后执行的回调函数
// console.log(33333,data)
},
cancel: function () {
// 用户取消分享后执行的回调函数
// console.log(33333,'cancel')
}
});
});
}
export default getWXConfig
需要分享的地方调取示例,将参数传给封装好的方法即可
var wxData = {
sharetitle: "这里是分享标题",
sharedesc: "这里是分享的描述",
shareimg: "这里是分享图片",
sharelink:"这里是分享链接"
}
getWXConfig(wxData);
}