问题描述:
使用uni-app开发微信小程序界面
仿照uCharts插件给的示例绘制图表
微信开发者工具模拟时能正常显示
真机调试也能正常显示
但预览时无法显示(在预览时打开调试功能就能正常显示)
上图是我无法显示的情况。
而下图是正常显示的情况。
解决方法:
- 由于获取的数据的url写的是该插件提供的案例中的网址,数据以json的形式保存在这个网站上,所以预览时访问不到。(但是不清楚为什么模拟器和真机调试时可以)
下面是错误代码
getServerData() {
uni.request({
url: 'https://www.ucharts.cn/data.json',
data:{
},
success: function(res) {
console.log(res.data.data)
]}]};
},
fail: () => {
_self.tips="网络错误,小程序端请检查合法域名";
},
});
}
- 要解决访问不到的问题,所以,决定直接把该网站上的数据复制下来保存到本地,直接进行本地访问。操作方法如下:
- 新建一个.js的文件,然后把网站上的内容复制下来。格式如下:
var json = { (复制下来的内容) } module.exports = { data: json }
- 在页面中导入js文件并调用(修改上面的错误代码)。代码如下:
var jsonData = require('@/static/json/1.js'); getServerData() { var res = jsonData.data; (以下省略,即去掉uni.request()) }
- 重新运行下,就能成功显示图表了!
最后,要是遇到的情况和我不一样的话,或者还是解决不了无法显示的情况的话,建议去看看官方文档。这里附个链接。
uCharts官方API
最后的最后,如本文有错误的地方,欢迎指正!!