uniApp学习过程碰到问题集合

真机模式运行uniApp，利用axios数据请求，会报错，一步一坑，整理整理、防止忘记

一、axios在真机App内使用报错

1、错误一:There is no suitable adapter to dispatch the request

{"message":"There is no suitable adapter to dispatch the request since :\n- adapter xhr is not supported by the environment\n- adapter http is not available in the build\n- adapter fetch is not supported by the environment","name":"AxiosError","stack":"AxiosError: There is no suitable adapter to dispatch the request since :\n- adapter xhr is not supported by the environment\n- adapter http is not available in the build\n- adapter fetch is not supported by the environment\n    at Object.getAdapter (app-service.js:6461:13)\n    at Axios.dispatchRequest (app-service.js:5431:35)","code":"ERR_NOT_SUPPORT","status":null}

此时需要添加一个axios的适配器，网上有两个版本，但copy后总有各种各样问题

版本1：引入axios-adapter-uniapp，我没看到效果

版本2：[email protected]和[email protected]+，说是buildFullPath的区别，以下是网上的代码

// 在main.js中放入这段自定义适配器的代码，就可以实现uniapp的app和小程序开发中能使用axios进行跨域网络请求，并支持携带cookie

axios.defaults.adapter = function(config) {
	 return new Promise((resolve, reject) => {
			var settle = require('axios/lib/core/settle');
			var buildURL = require('axios/lib/helpers/buildURL');
			var buildFullPath = require('axios/lib/core/buildFullPath');
			let fullurl = buildFullPath(config.baseURL,config.url)
			uni.request({
				method: config.method.toUpperCase(),
				url: buildURL(fullurl, config.params, config.paramsSerializer),
				header: config.headers,
				data: config.data,
				dataType: config.dataType,
				responseType: config.responseType,
				sslVerify: config.sslVerify,
				complete:function complete(response){
					response = {
					  data: response.data,
					  status: response.statusCode,
					  errMsg: response.errMsg,
					  header: response.header,
					  config: config
					};
					
				settle(resolve, reject, response);
				}
			})
	    })
}

此代码copy进去后还是会报错，会报错buildFullPath和settle不是一个函数，因为这个里面用的commomJs的引入法，我们项目内应该用import引入,以下是改进的

// 在main.js中放入这段自定义适配器的代码，就可以实现uniapp的app和小程序开发中能使用axios进行跨域网络请求，并支持携带cookie

import buildURL from 'axios/lib/helpers/buildURL.js'
import settle from 'axios/lib/core/settle.js'

axios.defaults.adapter = function(config) {
	 return new Promise((resolve, reject) => {
		//	var settle = require('axios/lib/core/settle');
		//	var buildURL = require('axios/lib/helpers/buildURL');
		//	var buildFullPath = require('axios/lib/core/buildFullPath');
		//	let fullurl = buildFullPath(config.baseURL,config.url)
			uni.request({
				method: config.method.toUpperCase(),
		//		url: buildURL(fullurl, config.params, config.paramsSerializer),
                url: buildURL(config.url, config.params, config.paramsSerializer),
				header: config.headers,
				data: config.data,
				dataType: config.dataType,
				responseType: config.responseType,
				sslVerify: config.sslVerify,
				complete:function complete(response){
					response = {
					  data: response.data,
					  status: response.statusCode,
					  errMsg: response.errMsg,
					  header: response.header,
					  config: config
					};
					
				settle(resolve, reject, response);
				}
			})
	    })
}

2、错误二:request:fail parameter `header`. Expected Object, got AxiosHeaders

解决完上述问题后，接下来会报request:fail parameter `header`. Expected Object, got AxiosHeaders

{"errMsg":"request:fail parameter `header`. Expected Object, got AxiosHeaders ","config":{"transitional":{"silentJSONParsing":true,"forcedJSONParsing":true,"clarifyTimeoutError":false},"adapter":"function() { [native code] }","transformRequest":["function() { [native code] }"],"transformResponse":["function() { [native code] }"],"timeout":5000,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"maxBodyLength":-1,"env":{"FormData":null,"Blob":null},"validateStatus":"function() { [native code] }","headers":{"Accept":"application/json, text/plain, */*","Accept-Language":"zh-CN"},"baseURL":"http://192.168.90.114:8083/de-api","url":"/system/ui/info","method":"get"},"headers":{}}

简单解决方案就是将headers利用JSON格式化一下

header: JSON.parse(JSON.stringify(config.headers))

二、App内获取dom元素

// #ifdef APP
    let query = uni.createSelectorQuery().in(this)
    let iframe = query.select('#iframe')
// #endif

官网介绍地址：uni.createSelectorQuery() | uni-app

三、获取状态栏高度

// #ifdef APP
//获取手机系统信息
const info = uni.getSystemInfoSync();
//设置状态栏高度
this.statusBarHeight = info.statusBarHeight;
// #endif

四、WEB-VIEW使用

// #ifdef H5
    let iframe = '';
	iframe = document.getElementById('iframe');
	iframe.src = url;
	iframe.onload = (e) => {
		uni.hideLoading();
	};
// #endif
// #ifdef MP-WEIXIN
	let query = wx.createSelectorQuery();
	let webview = query.select('#iframe');
	webview.src = url;
	// uni.hideLoading();
// #endif
// #ifdef APP
    var w = plus.webview.create(this.url, 'web_view', {
			    top: uni.getSystemInfoSync().statusBarHeight + 50,
				height: uni.getSystemInfoSync().windowHeight - 50 -uni.getSystemInfoSync().statusBarHeight
			},{
				preload: 'preload webview'
			});
	w.addEventListener('loaded', () => {
		uni.hideLoading();
	},false);
	var currentWebview = this.$mp.page.$getAppWebview();
	currentWebview.append(w);
// #endif

目前小程序端不知道怎么监听webview的加载，app的监听也不是很理想