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

问题描述:

使用uni-app开发微信小程序界面
仿照uCharts插件给的示例绘制图表
微信开发者工具模拟时能正常显示
真机调试也能正常显示
但预览时无法显示(在预览时打开调试功能就能正常显示)
在这里插入图片描述

上图是我无法显示的情况。
而下图是正常显示的情况。
在这里插入图片描述

解决方法:

  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

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值