有个问题,就是现在的分享,分享出去的是个链接,想要分享出是个卡片的,只能先收藏此H5链接,从收藏里点开H5链接再去分享,此时分享的是个卡片(有个问题是:苹果分享出去不显示图片,安卓没有此问题,所以只能用安卓手机先分享给自己,然后再分享,就是个卡片了)
首先先安装weixin-js-sdk
安装npm install weixin-js-sdk
在untils封装validate.js
/**
* 验证方法集合
*/
/**
* 验证是否在微信环境中
* 2021-06-02 18:13:51
* @author SnowRock
* @returns {boolean}
*/
export function isWeChat() {
return isInNavigator('micromessenger')
}
/**
* 判断浏览器的user-agent信息是否包含字符
* @param vg 字符
* @returns {boolean}
*/
export function isInNavigator(vg) {
if (typeof navigator === 'undefined') {
return false
}
if (typeof vg === 'undefined') {
return false
}
var agent = navigator.userAgent.toLowerCase()
return agent.indexOf(vg.toLowerCase()) > -1
}
安装npm install axios -g
再utils封装share.js
import wx from "weixin-js-sdk"; // 引入微信js-sdk
import { isWeChat } from '@/utils/validate'; // 判断是不是微信内置浏览器
import axios from 'axios'; //接口请求封装
// 微信分享配置
export function wxConfigInit(data) {
console.log(data, '微信分享配置---')
// 微信配置
if (!isWeChat()) {
return
}
let linkUrl = ''
linkUrl = window.location.href
axios.get('https://?share_url=' + linkUrl).then(res => {
if (Number(res.data.code) === 200) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.data.data.app_id, // 必填,企业号的唯一标识,此处填写企业号corpid
timestamp: res.data.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.data.noncestr, // 必填,生成签名的随机串
signature: res.data.data.signature, // 必填,签名,见附录1
jsApiList: [
'updateAppMessageShareData',
'updateTimelineShareData'
], // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
openTagList: ['wx-open-launch-app']
})
wx.ready(function () {
wx.checkJsApi({
jsApiList: [
'updateAppMessageShareData',
'updateTimelineShareData'
],
success: function (res) {
console.log(res, "======")
}
})
wx.updateAppMessageShareData({
// 分享给朋友
title: data.title, // 分享标题
desc: data.desc, // 分享描述
link: linkUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
imgUrl: data.imgUrl, // 分享图标
success: function () {
// 设置成功
console.log('分享给朋友')
}
})
wx.updateTimelineShareData({
// 分享到朋友圈
title:data.title, // 分享标题
desc: data.desc, // 分享描述
link: linkUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: data.imgUrl, // 分享图标
success: function () {
// 设置成功
console.log('分享到朋友圈')
},
cancel: function () {
console.log('updateTimelineShareData取消分享')
}
})
})
// wx.error(function (res) {
// console.log("store配置失败", res);
// // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
// })
}
}).catch(err => {
console.log(err, '错误信息')
})
}
index.vue页面使用
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
mounted() {
this.configShare()
},
methods:{
configShare() {
const shareInfo = {
title: '分享标题', // 分享标题
desc: '分享描述', // 分享描述
link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '分享图标' // 分享图标
}
wxConfigInit(shareInfo)
},
}