使用vue-cli(vue2.0)项目做微信分享自定义样式的请进(都是踩过的坑啊)
微信自定义分享在客户端(iOS和Android)时用不用后端都行,因为他们可以借助友盟(https://udplus.umeng.com/?spm=a211g2.195839.0.0.6213218930RmEL)登录就可以用了。
进入正题:网页端完成自定义样式需要哪些操作呢?
前端语言 vue
后端 node
必须要有后端支持,前端自己没办法完成微信自定义分享QAQ
前端部分
准备,先看下官方文档(https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842)
这个是必须看的,当然他不能帮住你填坑(ps:我能帮你)但是你要遵循他的规则,微信官方api一直在更新,如果你的分享突然失效了,那么就说明一些方法已经更新了,你要同步他!
第一步,引入js
目前我使用的就是最新版本!
代码
第二步,在src下的assets/js文件夹下新建wx.jsapi.js文件,把分享做成公用方法(这句话是抄来的QAQ)
使用axios来发送请求,参照https://blog.csdn.net/web_xyk/article/details/79933024配置vue-cli项目的axios(这句话也是QAQ)
图片路径不要搞错!
代码
// import axios from 'axios'
import { getWXConfig } from "../../api/api";
export default {
wxShowMenu: function(title,img) {
let pageurl = encodeURIComponent(window.location.href)
// console.log(window.location.href);
getWXConfig(pageurl).then(function(res) {
var getMsg = res.data;
wx.config({
debug: false, //生产环境需要关闭debug模式
appId: getMsg.appId, //appId通过微信服务号后台查看
timestamp: getMsg.timestamp, //生成签名的时间戳
nonceStr: getMsg.nonceStr, //生成签名的随机字符串
signature: getMsg.signature, //签名
jsApiList: [ //需要调用的JS接口列表
'updateAppMessageShareData', //分享给好友
'updateTimelineShareData', //分享到朋友圈
'onMenuShareTimeline',
'onMenuShareAppMessage',
],
});
wx.ready(function() {
wx.checkJsApi({
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline',
'onMenuShareAppMessage',], //分享到朋友圈,
success: function(res) {
}
});
//分享到朋友圈
wx.updateTimelineShareData({
title: title, // 分享标题
desc: "我在真知灼见跟随大咖学金融,赶紧一起加入吧!", //分享描述
link: location.href.split('#')[0], // 分享链接
imgUrl: img // 分享图标
});
//分享给朋友
wx.updateAppMessageShareData({
title: title, // 分享标题
desc: "我在真知灼见跟随大咖学金融,赶紧一起加入吧!", //分享描述
link: location.href.split('#')[0], // 分享链接
imgUrl: img // 分享图标
});
});
})
}
}
这个js很重要,就相当于你封装的方法,嗯这么理解就行!
神坑之一
微信朋友圈里都需要写这四个方法,这很重要!少些一个就会一直报错,打开debug模式会一直弹出方法名:false
上面两个方法
‘updateAppMessageShareData’, //分享给好友
‘updateTimelineShareData’, //分享到朋友圈
你一定觉得我用这两个方法为什么写四个,官方也没让写后两个啊
我告诉你,那是因为官方api给了最新方法,而适配的是旧的方法,就是下面这两个QAQ(苦了这俩哥们了)
’ onMenuShareTimeline’,
‘onMenuShareAppMessage’,
然后里面有个getWXConfig这个方法,这个是自定义的
这个要改成后端给你的接口(就是正常请求,写错了我不背锅)
其中所有参数都让后端返回(ojbk!)
第三部调用,
在main.js里定义全局方法(为了调用方便,不这么写也行,vue很灵活的)
// 微信分享
import WXConfig from './assets/js/wx.jsapi' // 微信分享
Vue.prototype.WXConfig = WXConfig;
在使用页面调用!
this.WXConfig.wxShowMenu("这里写后端不给你返回的字段1","这里写后端不给你返回的字段2");
前端完成!!!!
后端
(我尽量详细写,但是后端和前端不在一个项目,后端是node项目,然后我就不截图了,就发相关代码,机密QAQ)
//微信内分享获取签名
这是在项目的router.js里
这段是路径位置,你们改成自己的路径
router.get('/api/v2/getSignature',controller.api.v2.wxShare.getSign);
这个是方法代码(后端记住,不会请求的代码一定要看文档,微信很变态,)
'use strict';
const Controller = require('../base');
const gzhConfig = require('../../../common/wxGzhConfig');
const crypto = require('crypto');
class WxShareController extends Controller {
constructor(ctx) {
super(ctx)
}
//返回微信分享需要的签名和其他参数
async getSign() {
//当前分享的页面url
let cururl = this.ctx.query.url;
let appid = gzhConfig.appid;
let appsecret = gzhConfig.appsecret;
//获取服务器保存的token
const localinfo = await this.ctx.service.v2.wxSignature.find(1);//id=1 保存access_token的id
let localtoken = localinfo.access_token;//本地token
let localticket = localinfo.jsapi_ticket;//本地ticket
let lastdatetime = localinfo.update_time;//上次更新时间
let nowtime = new Date().getTime();//现在时间
//判断时间差是否在2小时内
let temptime = Number(nowtime) - Number(lastdatetime);
let temp2time = Number(temptime) - 7200000;
//如果票据有效 继续使用
if (localticket != null && localticket != '' && temp2time < 0) {
//生成随机字符串
let noncestr = this.randomString2(16);
//时间戳(单位 秒)
let timestamp = new Date().getTime().toString().substr(0, 10);
//拼接生成签名前的字符串string1
let string1 = "jsapi_ticket=" + localticket + "&noncestr=" + noncestr + "×tamp=" + timestamp + "&url=" + cururl + "";
//对string1进行sha1签名
let sha1 = crypto.createHash('sha1');//sha1算法
sha1.update(string1);
let sign = sha1.digest('hex'); //加密后的值d
let signature = sign;//最后得到的签名
let result = {
appId: appid,
timestamp: timestamp,
nonceStr: noncestr,
signature: signature,
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
}
this.success(result);
return;
}
//票据无效 重新生成票据
else {
//获取access_token
const res1 = await this.ctx.curl('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&', {
method: 'GET',
data: {
appid: appid,
secret: appsecret
},
dataType: 'json',
timeout: 3000
});
if (res1.status == 200) {
//返回的accesstoken
let accesstoken = res1.data.access_token;
//根据accesstoken获取jsapi_ticket
const res2 = await this.ctx.curl('https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi', {
method: 'GET',
data: {
access_token: accesstoken
},
dataType: 'json',
timeout: 3000
});
//返回ticket接口不为空
if (res2.status == 200) {
let jsapiticket = res2.data.ticket;
//保存到数据库
let postdata = {
id: 1,
access_token: accesstoken,
jsapi_ticket: jsapiticket,
create_time: new Date().getTime(),
update_time: new Date().getTime()
}
const savetoken = await this.ctx.service.v2.wxSignature.update(postdata);
//生成随机字符串
let noncestr = this.randomString2(16);
//时间戳(单位 秒)
let timestamp = new Date().getTime().toString().substr(0, 10);
//拼接生成签名前的字符串string1
let string1 = "jsapi_ticket=" + jsapiticket + "&noncestr=" + noncestr + "×tamp=" + timestamp + "&url=" + cururl + "";
//对string1进行sha1签名
let sha1 = crypto.createHash('sha1');//sha1算法
sha1.update(string1);
let sign = sha1.digest('hex'); //加密后的值d
let signature = sign;//最后得到的签名
let result = {
appId: appid,
timestamp: timestamp,
nonceStr: noncestr,
signature: signature,
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
}
this.success(result);
return;
}
else {
this.fail('jsapi_ticket获取错误');
return;
}
}
else {
this.fail('access_token获取错误');
return;
}
}
}
}
module.exports = WxShareController;
会后端的小伙伴们知道怎么请求了吧,文件的位置啊,什么的都自己按照项目对其就OK!
还有一个在ios上分享失败的坑,一定按照我引入的代码引入
下面是注意事项
第一,我使用的是HTTPS 所以我引入的是HTTPS,不是的就去掉s,看上面↑
第二,图片链接要后端返回,大小是32kb以内(微信规定的),链接地址如果项目是HTTPS则所需要的所有图片都要HTTPS并且通过微信的认证,(你的域名也必须通过微信认证,看开始微信api链接)
第三,
不要用这种方法!记住,用这种引入的方法写的项目坑有一万个,放心,我用两天时间没踩完,换这个方法就用半天!!!
解决你的问题请给个赞或者留言支持,谢谢婊贝和猿们!