uniapp开发前后端对接踩过的坑

uniapp开发前后端对接踩过的坑

一、表单提交，两种都可以

1、提交表单触发form中 @submit=“formSubmit”

2、点击提交按钮触发button中 @click=“formSubmit”

<view class="user">
			<!--提交表单触发form中 @submit="formSubmit" -->
			<form v-model="userform"  >
				<image :src="imgsrc" class="user-img" v-model="imgsrc" @click="chooseImg"></image>
				<input class="user-name" type="text" v-model="userform.username" placeholder="起一个可爱的名字吧" />
				<button class="user-btn" form-type="submit" @click="formSubmit">Submit</button>
				<!--点击提交按钮触发button中 @click="formSubmit" -->
			</form>
</view>

二、axios的使用

1、安装依赖

npm install axios --save

2、main.js中引入

//引入
import axios from 'axios'
//定义全局变量
Vue.prototype.$axios = axios;

3、main.js设置“小程序适配”

// 在main.js中放入这段自定义适配器的代码，就可以实现uniapp的app和小程序开发中能使用axios进行跨域网络请求，并支持携带cookie
axios.defaults.adapter = function(config) {
	return new Promise((resolve, reject) => {
		// console.log('axios自定义适配器-------------',config)
		var settle = require('axios/lib/core/settle');
		var buildURL = require('axios/lib/helpers/buildURL');
		//当baseURL为undefined时，不让小程序端前缀加上baseURL
		const baseURL = config.baseURL ? config.baseURL : '';
		// console.log('config.baseURL--------------',config.baseURL),
		// console.log('buildURL(config.url, config.params, config.paramsSerializer)',buildURL(config.url, config.params, config.paramsSerializer))
		uni.request({
			method: config.method.toUpperCase(),
			url: baseURL + 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) {
				// console.log("执行完成：", response)
				response = {
					data: response.data,
					status: response.statusCode,
					errMsg: response.errMsg,
					header: response.header,
					config: config
				};

				settle(resolve, reject, response)
			}
		})
	})
}

4、页面中使用

			this.$axios({
						methods: 'get',
						url: this.$api + '/wxuser/register',
						params: {
							'username': this.userform.username
						}
					}).then(res => {
						console.log(res)
						uni.showToast({
							title: '上传成功',
							icon: 'success',
							duration: 800
						});
						
						setTimeout(() => {
							uni.switchTab({
								url: "../details/details",
						
							});
						}, 1000);
					}).catch(err => {
						console.log(err)
					})
				

三、小程序页面跳转

uni-app中定义的跳转方式有4种，此处试过3种

1、uni.navigateTo（待补充）

2、uni.redirectTo（待补充）

3、uni.switchTab （tabBar）

只有第三种成功了，1、2失败原因未找出，猜测是因为要跳转的页面是“tabBar”，所以第三种正好合适。

			setTimeout(() => {
							uni.switchTab({
								url: "../details/details",
						
							});
						}, 1000);

四、前后端数据格式统一（待补充）

还是不懂，只能传单个值