uni-app小程序项目起步

基础架构-使用uni-ui组件库

1. 构建界面

在manifest.json中，修改appid。

1. 安装uni-ui

npm i @dcloudio/uni-ui   或   yarn add @dcloudio/uni-ui

2. 组件自动引入
   配置easycom

// pages.json
{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	
	// 其他内容
	pages:[
		// ...
	]
}

在 template 中使用：

<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>

3. 配置ts类型
   安装：

pnpm i -D @uni-helper/uni-ui-types

tsconfig.json 添加：

！！！！！！！！！！！！报错！！！！！！！！！！！！
初次使用uniapp开发时，遇到view、image等标签报错的问题，原因是Vue组件识别错误。

  // tsconfig.json 中加入配置，将标签视为原始组件
  "vueCompilerOptions": {
    "nativeTags": ["block", "component", "template", "slot"]
  },

若依然报错，将Vue-Official版本降到2.0.12以下并且重启扩展。

2. 状态管理
状态管理 → 持久化

  // member.ts
  // TODO: 持久化
  {
    // 网页端配置
    // persist: true,
    // 小程序端配置
    persist: {
      storage:{
        getItem(key){
          return uni.getStorageSync(key)
        },
        setItem(key, value) {
          uni.setStorageSync(key, value)
        },
      }
    }
  },

3. 数据交互

数据交互 → 请求工具 → 拦截器 | 请求函数

1. 拦截器
   request 请求
   uploadFile 上传文件
   添加拦截器：uni.addInterceptor(STRING, OBJECT)
   删除拦截器：uni.removeInterceptor(STRING)

• 基础地址

const baseURL = 'https://pcapi-xiaotuxian-front-devtest.itheima.net'

• 超时时间

options.timeout = 10000

• 添加请求头标识

    options.header = {
      ...options.header,
      'source-client': 'miniapp',
    }

• 添加token

    const memberStore = useMemberStore()
    const token = memberStore.profile?.token
    if (token) {
      options.header.Authorization = token
    }

utils/http.ts

// 添加拦截器
// 拦截 request 请求
// 拦截 uploadFile 文件上传
import { useMemberStore } from "@/stores"

const baseURL = 'https://pcapi-xiaotuxian-front-devtest.itheima.net'

// 添加拦截器
const httpInterceptor = {
  // 拦截前触发
  invoke(options: UniApp.RequestOptions) {
    // 1. 非 http 开头需拼接地址
    if (!options.url.startsWith('http')) {
      options.url = baseURL + options.url
    }
    // 2. 请求超时，默认 60s
    options.timeout = 10000
    // 3. 添加小程序端请求头标识
    options.header = {
      ...options.header,
      'source-client': 'miniapp',
    }
    // 4. 添加 token 请求头标识
    const memberStore = useMemberStore()
    const token = memberStore.profile?.token
    if (token) {
      options.header.Authorization = token
    }
    console.log(options)
  },
}
uni.addInterceptor('request', httpInterceptor)
uni.addInterceptor('uploadFile', httpInterceptor)

• 请求函数
  （借鉴aioxs）返回Promise

interface Data<T> {
  code: String
  msg: string
  result: T
}
// 2.2 添加类型，支持泛型
export const http = <T>(options: UniApp.RequestOptions) => {
  // 1. 返回 Promise 对象
  return new Promise<Data<T>>((resolve, reject) => {
    uni.request({
      ...options,
      .............................
    })
  })
}

成功

uni.request 的 success 回调函数只是表示服务器响应成功，没处理响应状态码，业务中使用不方便。

axios 函数是只有响应状态码是 2xx 才调用 resolve 函数，表示获取数据成功，业务中使用更准确。

• 提取核心数据（提取res.data）
• 添加类型（支持泛型）

      success(res) {
        if (res.statusCode >= 200 && res.statusCode < 300) {
          // 2.1 提取核心数据 res.data
          resolve(res.data as Data<T>) // 类型断言
        } 

• 401错误 -> 清理用户信息，跳转到登录页

        else if (res.statusCode === 401) {
          // 3.2 401错误
          // 清理用户信息
          const memberStore = useMemberStore()
          memberStore.clearProfile()
          // 跳转到登录页
          uni.navigateTo({ url: '/pages/login/login' })
          reject(res)
        } 

• 其他错误 -> 根据后端错误信息提示

        else {
          // 其他错误 -> 根据后端错误信息提示
          uni.showToast({
            icon: 'none',
            title: (res.data as Data<T>).msg || '请求错误',
          })
          reject(res)
        }

请求失败

• 网络错误 -> 提示用户换网络

      // 响应失败
      fail(err) {
        uni.showToast({
          icon: 'none',
          title: '网络错误',
        })
        reject(err)
      },

黑马小程序项目笔记