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/

  • 5