uni-app+vue3+vite+微信小程序开发的问题点

IT码农-爱吃辣条

已于 2023-11-17 13:55:27 修改

阅读量1.4k

点赞数 1

分类专栏：小程序前端文章标签： uni-app 微信小程序

于 2022-12-12 09:41:47 首次发布

本文链接：https://blog.csdn.net/qq_24504591/article/details/128282361

版权

前端同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

小程序

4 篇文章 0 订阅

订阅专栏

目录名称不能为api，否则会出现├F10: PM┤ [vite] getaddrinfo ENOTFOUND rivtrust.jz-xxx.xyz，修改为_api；
vue3的全局变量挂载

import {
  createSSRApp
} from 'vue'

const app = createSSRApp(App)
app.config.globalProperties.$interface = $interface

或者

import {
  createSSRApp
} from 'vue'

const app = createSSRApp(App)
// 配置全局变量 页面中使用 inject 接收
app.provide('global', {
  $interface
})

全局变量的引入：

import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
proxy.$interface.wxLogin({
	name: 'william'
})

或者

import { inject } from 'vue'

// 获取全局对象
const global= inject('global')
global.$interface.wxLogin({
	name: 'william'
})

axios在微信小程序上使用的问题：
安装模块

npm i -S axios

出现adapter is not a function的解决方法

TypeError: adapter is not a function

需要axios自定义适配器配置

import settle from "axios/lib/core/settle"
import buildURL from "axios/lib/helpers/buildURL"
/* 格式化路径 */
const URLFormat = function(baseURL, url) {
	return url.startsWith("http") ? url : baseURL
}
/* axios适配器配置 */
const adapter = function(config) {
	return new Promise((resolve, reject) => {
		uni.request({
			method: config.method.toUpperCase(),
			url: buildURL(URLFormat(config.baseURL, 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);
			}
		})
	})
}

export default adapter;

整体代码request.js：

import axios from 'axios'
import statusCode from './statusCode'
import adapter from "./_adapter.js"

// 创建axios实例
const service = axios.create({
	// axios中请求配置有baseURL选项，表示请求URL公共部分
	baseURL: process.env.VUE_APP_BASE_URL,
	// 超时（毫秒）
	timeout: 10000
})
service.defaults.adapter = adapter;
service.defaults.retry = 5; // 设置请求次数
service.defaults.retryDelay = 1000; // 重新请求时间间隔

// request拦截器
service.interceptors.request.use(config => {
	console.log("axios请求拦截器", config)
	config.headers['x-requested-width'] = 'XMLHttpRequest';
	config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
	// 'application/json;charset=utf-8'
	// 是否需要设置 token
	const isToken = config.Authorization === undefined || config.Authorization
	if (isToken) {
		const cookie = uni.getStorageSync('Authorization');
		// 让每个请求携带自定义token 请根据实际情况自行修改
		config.headers['Authorization'] = config.headers.Authorization || cookie;
	}
	config.params = {
		...config.params,
		_t: +new Date()
	}

	return config
}, error => {
	console.log(error)
	Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
		console.log("axios响应拦截器", res)
		// 未设置状态码则默认成功状态
		const code = res.data.code || 200
		// 获取错误信息
		const msg = statusCode[code] || res.data.msg || statusCode['default']
		// 二进制数据则直接返回
		if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
			return res.data
		}
		if (code === 401) {
			return Promise.reject('（401）：请求要求身份验证。对于需要登录的网页，服务器可能返回此响应')
		} else if (code === 500) {
			uni.showToast({
				title: msg,
				duration: 2000
			});
			return Promise.reject(new Error(msg))
		} else if (code !== 200) {
			uni.showToast({
				title: msg,
				duration: 2000
			});
			return Promise.reject('error')
		} else {
			return res.data
		}
	},
	error => {
		console.log('err' + error)
		let {
			message
		} = error
		if (message == 'Network Error') {
			message = '后端接口连接异常'
		} else if (message.includes('timeout')) {
			message = '系统接口请求超时'
		} else if (message.includes('Request failed with status code')) {
			message = '系统接口' + message.substr(message.length - 3) + '异常'
		}
		uni.showToast({
			title: message,
			duration: 2000,
			icon: 'error'
		});
		return Promise.reject(error)
	}
)

export default service

uni-app多环境配置

uni-app 项目中配置环境变量主要有如下三种方式：
1. vue-config.js
2. package.json
3. .env
在文件package.json设置以下内容
如果项目跟目录下没有这个文件的话，可以执行 npm init -y生成该文件
注意：package.json文件内不能有注释，否则配置无效，会编译失败

{
   ......
   "uni-app": {
		"scripts": {
			"h5dev": {
				"title": "h5开发版",
				"browser": "chrome",
				"env": {
					"UNI_PLATFORM": "h5",
					"VUE_APP_BASE_URL": "http://127.0.0.1:h5dev/",
					"MY_TEST": "dev-variable"
				},
				"define": {
					"H5-DEV_DEV": true
				}
			},
			"h5test": {
				"title": "h5测试版",
				"browser": "chrome",
				"env": {
					"UNI_PLATFORM": "h5",
					"VUE_APP_BASE_URL": "http://127.0.0.1:h5test/",
					"MY_TEST": "test-variable"
				},
				"define": {
					"H5-TEST": true
				}
			},
			"h5prod": {
				"title": "h5生产版",
				"browser": "chrome",
				"env": {
					"UNI_PLATFORM": "h5",
					"VUE_APP_BASE_URL": "http://127.0.0.1:h5prod/"
				},
				"define": {
					"H5-PROD": true
				}
			},
			"mp-weixin-dev": {
				"title": "微信开发版",
				"env": {
					"UNI_PLATFORM": "mp-weixin",
					"VUE_APP_BASE_URL": "http://127.0.0.1:mp-weixin-dev/"
				},
				"define": {
					"MP-WEIXIN-DEV": true
				}
			},
			"mp-weixin-test": {
				"title": "微信测试版",
				"env": {
					"UNI_PLATFORM": "mp-weixin",
					"VUE_APP_BASE_URL": "http://127.0.0.1:mp-weixin-test/"
				},
				"define": {
					"MP-WEIXIN-TEST": true
				}
			},
			"mp-weixin-prod": {
				"title": "微信生产版",
				"env": {
					"UNI_PLATFORM": "mp-weixin",
					"VUE_APP_BASE_URL": "http://127.0.0.1:mp-weixin-prod/"
				},
				"define": {
					"MP-WEIXIN-PROD": true
				}
			}
		}
	}
}

使用场景：可以使用官方的条件编译

// Vue3 非H5端，应直接访问 process.env.* 获取环境变量，不支持访问 process
// #ifdef H5-DEV
console.log('H5 开发环境', process.env, process.env.VUE_APP_BASE_URL)
// #endif
// #ifdef H5-TEST
console.log('H5 测试环境')
// #endif
// #ifdef MP-WEIXIN-DEV
console.log('微信小程序 开发环境', process.env.VUE_APP_BASE_URL)
// #endif
// #ifdef MP-WEIXIN-TEST
// 自定义微信测试环境下编译代码，其他环境下不会有这部分代码
console.log('微信小程序 测试环境')
// #endif

第二种方法，利用微信小程序的所处环境做判断：

// 获取当前帐号信息
const getBaseApi = (version = '', suffix = '') => {
	// 获取当前帐号信息
	const accountInfo = wx.getAccountInfoSync();
	let env = ""
	const baseApi = {
		// 开发版
		develop: "https://xxxxxxxx/sys",
		// 体验版
		trial: "https://xxxxxxxx/sys",
		// 正式版
		release: "https://xxxxxxxx/quotation"
	};
	// 当手机处于低版本的情况下,直接将地址写成开发版的
	let envVersion = accountInfo.miniProgram.envVersion
	if (!envVersion) {
		env = baseApi.release
	} else {
		env = version ? baseApi[version] : baseApi[envVersion];
	}
	return env + suffix;
}

export default getBaseApi