vue3 + ts多端应用

创建uni-app项目

通过Hbuilderx创建

1. 插件安装
2. 在微信开发者工具中记得打开服务端口
3. 新建页面

通过命令行创建

选vscode对ts支持友好，熟悉的编辑器

1. 安装插件

2. ctrl + i 能够唤醒代码提示

3. 安装命令

npx degit dcloudio/uni-preset-vue#vite-ts app

链接地址 4. 安装类型声明文件

pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types

5. vscode 设置进行文件关联

请求和上传文件拦截

// 1.用uni.addInterceptor添加请求拦截request和上传文件拦截uploadFile
uni.addInterceptor('request', httpInterceptor)
uni.addInterceptor('request', httpInterceptor)
// 2。非htttp开头拼接地址
if (!options.url.startsWith('http')) {
    options.url = baseUrl + options.url
}
// 3 添加请求超时
options.timeout = 10000
// 4.添加请求头信息
options.header = {
    'source-client': 'miniapp',
    ...options.header,
}
// 5.添加token 
const store = useToken()
if (token) {
  options.header.Authorization = token
}

自动导入组件

登陆状态

小程序登陆