1.前言
在我写uniapp中,需要用到微信的jssdk和echarts组件,但是我使用的是lime-echart组件和weixin-jsapi库。这两个模块一起使用时会导致图表不显示。
2.解决办法
更换微信jssdk库,使用weixin-js-sdk库。
安装:
npm install weixin-js-sdk
使用:
// commonjs
var wx = require('weixin-js-sdk');
// es module
import wx from 'weixin-js-sdk'
这样可以解决echart图表不显示的问题,但是会wx报错,wx上的属性不存在。
因为我对微信sdk库的接口进行了封装,所以我们需要将wx字面量进行传递。
不知道如何封装或者想要了解的可以点击下面的链接
使用hooks解决微信公众号JSSDK中的wx.ready()和wx.error()问题-uniapp-vue3-vue cli
这里直接展示修改过的hooks代码和使用示例
import wx from "weixin-js-sdk";
export default function useWechatPermissionHooks(jsapi: any) {
const url = window.location.href.split("#")[0];
let isSuccess = false;
let inited = false;
function initWxConfig(Fn: { ready?: Function; error?: Function }) {
// console.log("isSuccess", isSuccess, "inited", inited);
if (inited == true) {
Fn?.ready(wx);
return;
}
uni.showLoading({
title: "加载中",
mask: true,
});
getApp()
.globalData.$http.get("/getJsapiTicket", { url })
.then((res: any) => {
// console.log(res);
wx.config({
debug: false,
appId: res.result.appid,
timestamp: res.result.timestamp,
nonceStr: res.result.noncestr,
signature: res.result.signature,
jsApiList: jsapi,
});
isSuccess = true;
wx.ready(function () {
console.log("ready", isSuccess);
if (isSuccess == false) return;
inited = true;
Fn?.ready(wx);
});
wx.error(function (err) {
isSuccess = false;
console.log("error", isSuccess);
Fn?.error(err, wx);
});
uni.hideLoading();
});
}
return { initWxConfig };
}
import useWechatPermissionHooks from "./hooks/useWechatPermissionHooks";
const { initWxConfig } = useWechatPermissionHooks(["updateAppMessageShareData", "updateTimelineShareData"]);
initWxConfig({
ready: wx => {
const option = {
title: "转发标题",
desc: '123',
link: '',
imgUrl: "",
};
wx.updateAppMessageShareData(option);
wx.updateTimelineShareData(option);
},
error: () => {
uni.showToast({
title: "微信分享授权失败",
duration: 3000,
icon: "none",
});
},
});