UniApp-开发问题汇总
最近做微信小程序，想通过Uniapp来发布，在开发过程中遇到的问题，进行整理
1.页面跳转传参,一般都是字符串类型，传bool类型也会被当做字符串处理
举例：点击页面跳转并传参，跳转页面从onLoad中的option接收参数 isgas
uni.reLaunch({
url: '/pages/center/index?isgas=1'
});
onLoad: function(option) {
this.isgas=(option.isgas=="1"?true:false) ;
this.loadfive(this.seriesname);
},
2.父子组件的数据交互
在之前的博客里简单介绍过父子通信方法：父传子props,子传父$emit
这里再补充一个父调用子组件的方法 $refs
子组件myarcbar中定义了方法：getServerData()
父组件中调用该方法：
子组件引用<myarcbar ref="myarcbar" ></myarcbar>
在uniapp中，和vue不同的是，不需要显式import组件，会自动引用
this.$refs.myarcbar.getServerData();
3.ucharts使用
在线生成工具：https://demo.ucharts.cn/#/
1.导入
（1）Uniapp项目导入，进入插件市场，使用【HBuilder导入插件】
（2）或者将uni_modules目录复制到src目录
2.基本用法
（1）template代码
（2）数据代码：
chartData:{
categories:[],
series:[],
},
已折线图为例：
template代码：
<view class="charts-box">
<qiun-data-charts
type="line"
:chartData="chartData"
background="none"
/>
</view>
填充数据代码：
{
"categories": [
"2016",
"2017",
"2018",
"2019",
"2020",
"2021"
],
"series": [
{
"name": "成交量A",
"data": [
35,
8,
25,
37,
4,
20
]
}
]
}
显示效果：
3.封装
只有静态的图表显然不满足实际场景，对其进行一些封装。可以根据自己实际需要修改的参数，进行自定义封装。主要是能动态加载其数据代码即可，完整示例如下
<template>
<view class="charts-box">
<qiun-data-charts type="arcbar"
:chartData="chartData"
background="none"
:opts="opts" />
</view>
</template>
<script>
export default {
name:"myarcbar",
props:{
testdata:{
type:Object
},
seriesname:{type:String},
seriesdata:{type:Number},
titlename:{type:String}
} ,
data()
{
return {
title: '',
chartData: {
series: [],
},
opts: {}
}
},
created() {
var that=this;
this.title=that.testdata.title;
this.getServerData()
},
methods: {
getServerData() {
this.chartData =
{
"series": [
{
"name": this.seriesname,
"data": this.seriesdata,
"color": "#2fc25b"
}
]
}
this.opts =
{
"type": "arcbar",
"canvasId": "",
"canvas2d": false,
"background": "none",
"animation": true,
"timing": "easeOut",
"duration": 1000,
"color": [
"#1890FF",
"#91CB74",
"#FAC858",
"#EE6666",
"#73C0DE",
"#3CA272",
"#FC8452",
"#9A60B4",
"#ea7ccc"
],
"rotate": false,
"errorReload": true,
"fontSize": 13,
"fontColor": "#666666",
"enableScroll": false,
"touchMoveLimit": 60,
"enableMarkLine": false,
"dataLabel": true,
"dataPointShape": true,
"dataPointShapeType": "solid",
"tapLegend": true,
"title": {
"name": this.titlename,
"fontSize": 15,
"color": "#3CA272",
"offsetX": 0,
"offsetY": 0
},
"subtitle": {
"name": this.seriesname,
"fontSize": 18,
"color": "#666666",
"offsetX": 0,
"offsetY": 0
},
"extra": {
"arcbar": {
"type": "circle",
"width": 6,
"radius": 75,
"backgroundColor": "#E9E9E9",
"startAngle": 0.75,
"endAngle": 0.25,
"gap": 2,
"centerX": 0,
"centerY": 0,
"linearType": "none"
}
}
}
}
},
mounted() {
}
}
</script>
<style lang="scss" scoped>
@mixin flexCenter {
display: flex;
justify-content: center;
align-items: center;
}
.content {
width: 100%;
height: 100%;
background: #fff;
.warnInfo {
width: 100%;
height: 300upx;
background: #132040;
font-size: 30upx;
color: #fff;
.warn_title {
width: 100%;
height: 60upx;
line-height: 60upx;
text-align: left;
background: #182951;
padding: 0 40upx;
box-sizing: border-box;
}
.warn_echart {
width: 100%;
padding: 0 40upx;
box-sizing: border-box;
height: calc(100% - 60upx) !important;
color: #fff;
.charts_box {
width: 100%;
height: 100%;
}
}
}
}
</style>
其中在methods中定义的getServerData用来动态刷新数据
父页面触发点击事件后，调用子组件的getServerData()进行刷新。
最终想达到效果：
以上，遇到的问题还会持续更新。
