vue3项目如何引入微信sdk接口
安装sdk 在main.js中,将js-sdk挂载到全局,方便使用 新建了一个js文件,wechatSdk.js,用来专门操作js-sdk 在需要使用sdk的vue页面,引入wec…
安装sdk
npm install weixin-js-sdk --save
在main.js中,将js-sdk挂载到全局,方便使用
import {
createApp
} from 'vue'
import wx from "weixin-js-sdk";
const app = createApp(App)
app.config.globalProperties.$wxsdk = wx
新建了一个js文件,wechatSdk.js,用来专门操作js-sdk
import http from '@/utils/request.js'
export const wechatConfig = (tag, share_title, share_desc, share_link, share_cover) => {
var localUrl = window.location.href.split('#')[0];
const cover = share_cover || 'http://ip:port/static/default.jpg'; //默认图片地址
return new Promise((resolve, reject) => {
http.request({
url: 'http://ip:port/getJSSDKSignature',
method: 'GET',
data: {
url: localUrl
},
}).then((res) => {
if (res.code == 200) {
console.log('getJSSDKSignature res', res.data);
let data = res.data
const config = {
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: APPID, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.noncestr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"], // 必填,需要使用的JS接口列表,注意查看官方文档,部分js接口即将废弃,我这里用的是新的
openTagList: ["wx-open-launch-weapp"], // 可选,需要使用的开放标签列表(当前标签用于跳转微信小程序)
};
tag.$wx.config(config); //通过config接口注入权限验证配置
tag.$wx.ready(function () { //通过ready接口处理成功验证
console.log("js-sdk配置成功!");
//分享给朋友
tag.$wx.updateAppMessageShareData({
title: share_title || "默认标题", // 分享标题
desc: share_desc || "默认描述", // 分享描述
link: `${wx_host}#/${share_link}`, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: cover, // 分享后显示的封面图
success: function () {
console.info("分享给朋友");
}, // 设置成功回调
});
//分享到朋友圈
tag.$wx.updateTimelineShareData({
title: share_title || "默认标题", // 分享标题
link: `${wx_host}#/${share_link}`, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: cover, // 分享图标
success: function () {
// 用户点击了分享后执行的回调函数
console.info("分享到朋友圈");
}
})
return resolve(true)
});
tag.$wx.error(function (res) {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
console.info("config信息验证失败");
console.info(res);
return reject(false)
});
}
});
})
}
在需要使用sdk的vue页面,引入wechatSdk.js
import { wechatConfig } from "@/utils/wechatSdk.js";
wechatConfig(
this,
"分享标题",
"分享描述",
"分享链接",
"分享封面(配图)"
).then((res) => {
//自定义回调内容
});
以上这篇vue3项目如何引入微信sdk接口就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持芦苇派。
原创文章,作者:ECHO陈文,如若转载,请注明出处:https://www.luweipai.cn/html/1660701014/