使用uni-app碰到的问题和解决

1、Vue中回调函数获取vue对象

方法

通过变量将Vue实例赋值到另一个变量，回调函数通过另一个变量进行访问Vue实例。

reload(){
     
	console.log('获取当前位置')
	var _this = this;
	uni.getLocation({
     
		type: 'wgs84',
		success: function (res) {
     
		console.log(_this);
		_this.latitude = res.latitude;
		_this.longitude = res.longitude; 
		for (var i = 0; i < _this.covers.length; i++) {
     
				_this.covers[i].latitude = res.latitude;
				_this.covers[i].longitude = res.longitude;
		}
						
	 }
   });	
}

图例

2、获取已经画上去的Map地图对象

方法

使用创建的Map对象的函数来进行返回，通过传入自定义的Map对象的Id，即返回对应的Map对象

<map ref="mapElement" id="mapElement" style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude"  :markers="covers" :show-location="isShow">map>

var mapContext = uni.createMapContext("mapElement");

图例

3、使用uni-app调试单个页面

在做系统应用的时候，我们可能会涉及到多个页面。尤其是需要跳转多次才能到达的页面。这时，我们需要一个指定页面调试配置，可以在真机调试的时候直接打开到我们需要调试的页面。

配置文件信息

在根目录找到pages.json添加如下配置即可

"condition": {
		"current":0, // 表示激活第0项
		"list":[
			{"name":"testuView", // 模式名称，随便起
			 "path":"pages/info/info", // 启动页面
			 "query":"id=1&name=fff" // 传入参数，以&符号作为分隔
			}
		]
	}

图例

4、使用axios的post方法出问题

在尝试使用axios的默认设置请求头axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';发现配置无效，可以尝试使用axios的请求拦截器

axios.interceptors.request.use(
		  config => {
     
		    config.headers["Content-Type"] ="application/x-www-form-urlencoded;charset=UTF-8";
		    return config;
		  },
		  err => Promise.reject(err)
		);

注意事项

如果使用new URLSearchParams()来生成传给后端的参数，其参数的格式如下：

如果只是在axios的第二个参数传入数据：

axios.post(
	'username',
	{
     
		lists:'asdsad',
		password:'123'
	}).then(function(data){
     
		console.log(data);
	})

那么传入的参数会如下：

不难发现，使用不同的方式进行请求参数的格式 也是不一样的。所以后端需要进行相应的处理进行接收（例如添加@RequestBody注解或者是使用@RequestParam注解等等进行处理）