uniapp学习笔记 - 翔子的博客

创建项目#

Hbuildx 创建#

命令行创建#

创建项目

1
npx degit dcloudio/uni-preset-vue#vite-ts uniapp-vue3-ts

通过 vscode 打开
Terminal window
```
1
pnpm i
2
# 运行微信项目
3
pnpm run dev:mp-weixin
```
完成后，会生成 dist/dev/mp-weixin 目录
微信开发者工具导入项目

VSCode 开发#

插件#

uni-helper
uni-create-view
uniapp 小程序扩展

ts 类型校验#

安装类型声明文件
配置 tsconfig.json

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

1
// tsconfig.json配置
2
{
3
  "extends": "@vue/tsconfig/tsconfig.json",
4
  "compilerOptions": {
5
    "allowJs": true,
6
    "sourceMap": true,
7
    "baseUrl": ".",
8
    "paths": {
9
      "@/*": ["./src/*"]
10
    },
11
    "lib": ["esnext", "dom"],
12
    "types": ["@dcloudio/types", "miniprogram-api-typings", "@uni-helper/uni-app-types"]
13
  },
14
  "vueCompilerOptions": {
15
    // experimentalRuntimeMode 已废弃，现调整为 nativeTags，请升级 Volar 插件至最新版本
16
    "nativeTags": ["block", "component", "template", "slot"]
17
  },
18
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
19
}

开发准备#

组件库#

uni-ui

配置 easycom 自动导入#

1
// uni-app 3.0.0+ 版本支持，自动注册组件
2
// 详细配置参考：https://uniapp.dcloud.net.cn/uniCloud/uni-config-center?id=easycom
3
"easycom": {
4
  // 是否开启自动扫描
5
  "autoscan": true,
6
  // 以正则方式完成组件的自动导入
7
  "custom": {
8
    // uni-ui 规则如下配置 uni-badge会自动替换为@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue
9
    "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
10
  }
11
},

uni-ui ts 类型说明#

uni-ui-types

pinia 持久化#

pinia-plugin-persistedstate

1
// 小程序持久化
2
{
3
  persist: {
4
    storage: {
5
      getItem(key) {
6
        return uni.getStorageSync(key)
7
      },
8
      setItem(key, value) {
9
        uni.setStorageSync(key, value)
10
      },
11
    },
12
  },
13
},

storage

请求工具#

uni.request

addinterceptor 配置请求拦截器

1
/**
2
 * 添加请求拦截器
3
 */
4

5
import { useMemberStore } from '@/stores'
6

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

9
// 添加拦截器
10
const httpInterceptor = {
11
  // 拦截前触发
12
  invoke(options: UniApp.RequestOptions) {
13
    // 请求地址拼接
14
    if (!options.url.startsWith('http')) {
15
      options.url = baseURL + options.url
16
    }
17
    // 超时时间
18
    options.timeout = 20000
19
    // 添加小程序请求头
20
    options.header = {
21
      ...options.header,
22
      'source-client': 'miniapp',
23
    }
24
    // 添加token请求头
25
    const memberStore = useMemberStore()
26
    const token = memberStore.profile?.token
27
    if (token) {
28
      options.header.Authorization = token
29
    }
30
  },
31
}
32
uni.addInterceptor('request', httpInterceptor)
33
uni.addInterceptor('uploadFile', httpInterceptor)

封装成 promise#

1
type Data<T> = {
2
  code: string
3
  msg: string
4
  data: T
5
}
6
enum StatusCodeEnum {
7
  SUCCESS = 200,
8
  REJECT = 300,
9
  UNAUTHORIZED = 401,
10
  INTERNAL_SERVER_ERROR = 500,
11
}
12
export const http = <T>(options: UniApp.RequestOptions) => {
13
  return new Promise<Data<T>>((resolve, reject) => {
14
    uni.request({
15
      ...options,
16
      success: (res) => {
17
        if (res.statusCode >= StatusCodeEnum.SUCCESS && res.statusCode < StatusCodeEnum.REJECT) {
18
          resolve(res.data as Data<T>)
19
        } else if (res.statusCode === StatusCodeEnum.UNAUTHORIZED) {
20
          // 清空用户信息 跳转登录页
21
          uni.clearStorageSync()
22
          uni.navigateTo({ url: '/pages/login/login' })
23
          reject(res)
24
        } else {
25
          uni.showToast({
26
            title: (res.data as Data<T>).msg || '请求错误',
27
          })
28
          reject(res)
29
        }
30
      },
31
      fail: (err) => {
32
        uni.showToast({
33
          title: '请求错误',
34
        })
35
        reject(err)
36
      },
37
    })
38
  })
39
}

首页#

安全区域设置#

1
// 获取屏幕边界到安全区域距离
2
const { safeAreaInsets } = uni.getSystemInfoSync()

设置顶部安全距离

1
<template>
2
  <view class="navbar" :style="{ paddingTop: safeAreaInsets!.top + 10 + 'px' }">
3
</template>

自定义组件自动引入#

同上 easycom 自动导入

1
// 以 Xtx 开头的组件，在 components 文件夹中查找引入（需要重启服务器）
2
"^Xtx(.*)": "@/components/Xtx$1.vue"

修改后需要重启项目生效

添加组件类型声明#

自动导入的组件缺少类型声明，需要 types 下新建 components.d.ts

1
import XtxSwiper from '@/components/XtxSwiper.vue'
2
import XtxGuess from '@/components/XtxGuess.vue'
3

4
declare module 'vue' {
5
  export interface GlobalComponents {
6
    XtxSwiper: typeof XtxSwiper
7
    XtxGuess: typeof XtxGuess
8
  }
9
}
10

11
// 组件实例类型
12
export type XtxGuessInstance = InstanceType<typeof XtxGuess>
13
export type XtxSwiperInstance = InstanceType<typeof XtxSwiper>

这样其他组件引入就不会报错

开发#

自定义 tabBar#

1
{
2
  "path": "pages/index/index",
3
  "style": {
4
    "navigationBarTitleText": "首页",
5
    "navigationStyle": "custom",
6
    "navigationBarTextStyle": "white"
7
  }
8
},

骨架屏#

微信开发者工具 -> 信息 -> 生成骨架屏

复制代码到 vue 中稍作修改即可

页面参数#

1
// uniapp 获取页面参数
2
const query = defineProps<{
3
  type: string
4
}>()

获取页面参数，例如路由传参

动态设置标题#

1
// 动态设置标题
2
uni.setNavigationBarTitle({ title: xxx })

添加编译模式#

可以每次打开固定路由

小程序快捷登录#

1
wx.login()

获取微信登录信息

1
<button class="button phone" open-type="getPhoneNumber" @getphonenumber="onGetphonenumber">
2
  <text class="icon icon-phone"></text>
3
  手机号快捷登录
4
</button>
5

6
// 获取用户手机号码
7
const onGetphonenumber: UniHelper.ButtonOnGetphonenumber = async (ev) => {
8
  const { encryptedData, iv } = ev.detail
9
  const res = await postLoginWxMinAPI({ code, encryptedData, iv })
10
  loginSuccess(res.result)
11
}

获取登录用户手机号（个人微信小程序账号无法获取）

页面分包和预加载#

通过分包将不经常使用的页面进行拆分，以提高小程序的启动速度。

点击才开始加载，此时就需要对分包进行预加载

音乐

音乐