每次解决完问题,都想回到过去糊自己一巴掌。。。
官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
1 若JSSDK已配置仍遇到invalid signature错误,一定参考“附录5-常见错误及解决方法”部分有检查步骤可参考,一定要先看再开发!!浪费了多少大好时光,流下悔恨的泪水。。
2 具体需要:
1)设置ip白名单
需要有开发权限 管理员权限 开发>基本配置>白名单>查看 IP白名单 多个IP用回车分隔。
2) 设置域名白名单
- 公众号设置—功能设置—js接口安全域名
- 第3点的txt文件要放到域名下,保证随时可以访问。https://www.xxxx666.com/report/MP_verify_wlPRmQ9ecc76yJF5.txt在浏览器可以访问。
3)1 logo图标需要放到服务器上,随时可以访问。 2 分享的链接必须是location.href.split('#')[0],否则报错invalid signature
vue组件中:
import wxShare from "../wechat/wechat";
setShare() {
let url=location.href.split('#')[0];
//2020年
let imgurl="https://www.xxxx666.com/img/report/logo.png"
const shareInfo = {
title: `“奉上您的2020总结`,
desc: `支撑平台2020年终报告活动开始啦~`,
link: url,
img: imgurl
}
this.wechatShare(shareInfo)
},
//带个人信息的
setSharePer(user) {
let url
if(location.href.indexOf('user')>=0){
url=location.href.split('#')[0];
}else{
url="https://www.zhengqiyezhi666.com/report/#/?user="+user
}
let imgurl="https://www.xxxx666.com/img/report/logo.png"
let shareInfo = {
title: `快来看看我的年度报告吧—`,
desc: `支撑平台2020年终报告活动开始啦~`,
link: url,
img: imgurl
}
this.wechatShare(shareInfo)
},
引用的wechart.js
//weixin-js-sdk应用
//weixin-js-sdk应用
import axios from 'axios'
import {requestSign} from '@/api/api'
const wx = require('weixin-js-sdk')
export default {
methods: {
wechatShare(info) {
const that = this
// 判断苹果手机
let _url = ''
if (window.__wxjs_is_wkwebview === true) {
_url = window.location.href.split('#')[0] || window.location.href
} else {
_url = window.location.href
}
let param={
url:info.link
}
//这里是封装的axios,换成任意请求皆可
requestSign(param).then(res=>{
wx.config({
debug: false,
appId: res.appid, // 必填,公众号的唯一标识
timestamp: res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.noncestr, // 必填,生成签名的随机串
signature: res.shasign, // 必填,签名,见附录1
jsApiList: [
'previewImage',
'hideAllNonBaseMenuItem',
'showMenuItems',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'chooseWXPay',
'updateTimelineShareData'
] // 必填,需要使用的 JS 接口列表,所有JS接口列表见附录2
})
})
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, // 分享图标
})
wx.onMenuShareAppMessage({
title: share_title, // 分享标题
desc: share_desc, // 分享描述
link: share_link, // 分享链接
imgUrl: share_img, // 分享图标
})
wx.updateTimelineShareData({
title: share_title, // 分享标题
desc: share_desc, // 分享描述
link: share_link, // 分享链接
imgUrl: share_img, // 分享图标
})
})
wx.error((res) => {
let b=JSON.stringify(res)
alert(b)
})
},
}
}
版权声明:本文为weixin_42371145原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。