vue3项目如何引入微信sdk接口

安装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接口就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。