关于微信小程序使用uCharts插件设计图表后在预览时不显示的问题

问题描述:

使用uni-app开发微信小程序界面
仿照uCharts插件给的示例绘制图表
微信开发者工具模拟时能正常显示
真机调试也能正常显示
但预览时无法显示(在预览时打开调试功能就能正常显示)
关于微信小程序使用uCharts插件设计图表后在预览时不显示的问题_第1张图片

上图是我无法显示的情况。
而下图是正常显示的情况。
关于微信小程序使用uCharts插件设计图表后在预览时不显示的问题_第2张图片

解决方法:

  1. 由于获取的数据的url写的是该插件提供的案例中的网址,数据以json的形式保存在这个网站上,所以预览时访问不到。(但是不清楚为什么模拟器和真机调试时可以)

   下面是错误代码

getServerData() {
	uni.request({
		url: 'https://www.ucharts.cn/data.json',
		data:{
		},
		success: function(res) {
			console.log(res.data.data)
			]}]};
		},
		fail: () => {
			_self.tips="网络错误,小程序端请检查合法域名";
		},
	});
}
  1. 要解决访问不到的问题,所以,决定直接把该网站上的数据复制下来保存到本地,直接进行本地访问。操作方法如下:
    1. 新建一个.js的文件,然后把网站上的内容复制下来。格式如下:
    var json = {
    (复制下来的内容)
    }
    module.exports = {
    	data: json
    }
    
    1. 在页面中导入js文件并调用(修改上面的错误代码)。代码如下:
    var jsonData = require('@/static/json/1.js');
    
    getServerData() {
    	var res = jsonData.data;
    	(以下省略,即去掉uni.request())
    }
    
  2. 重新运行下,就能成功显示图表了!

最后,要是遇到的情况和我不一样的话,或者还是解决不了无法显示的情况的话,建议去看看官方文档。这里附个链接。
uCharts官方API

最后的最后,如本文有错误的地方,欢迎指正!!

你可能感兴趣的:(小程序,小程序)