- 目录名称不能为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 项目中配置环境变量主要有如下三种方式：
- vue-config.js
- package.json
- .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
}
}
}
}
}
使用场景：可以使用官方的条件编译文章来源：https://www.toymoban.com/news/detail-545716.html
// 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
第二种方法，利用微信小程序的所处环境做判断：文章来源地址https://www.toymoban.com/news/detail-545716.html
// 获取当前帐号信息
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
到了这里，关于uni-app+vue3+vite+微信小程序开发的问题点的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
