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://www.ucharts.cn/

在线生成工具：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 {
	         100%;
	        height: 100%;
	        background: #fff;
	 
	        .warnInfo {
	             100%;
	            height: 300upx;
	            background: #132040;
	 
	            font-size: 30upx;
	            color: #fff;
	 
	            .warn_title {
	                 100%;
	                height: 60upx;
	                line-height: 60upx;
	                text-align: left;
	                background: #182951;
	                padding: 0 40upx;
	                box-sizing: border-box;
	            }
	 
	            .warn_echart {
	                 100%;
	                padding: 0 40upx;
	                box-sizing: border-box;
	                height: calc(100% - 60upx) !important;
	                color: #fff;
	 
	                .charts_box {
	                     100%;
	                    height: 100%;
	                }
	            }
	        }
	    }
</style>

其中在methods中定义的getServerData用来动态刷新数据

父页面触发点击事件后，调用子组件的getServerData()进行刷新。

 

最终想达到效果：

 

以上，遇到的问题还会持续更新。