总体逻辑
前后端调接口：按请求方法分 GET/POST/PUT/PATCH/DELETE 5 大类；
小程序原生内置：路由、网络、存储、权限、支付、分享等系统 API；
项目代码层面：分基础请求封装、各业务模块 API、TS 类型定义三层。
多端看6-7部分的笔记（项目开发以及后面）--实现多平台业务展示
小程序 /uni-app 内置原生 API（uni.xxx/wx.xxx）
1. 网络 API
uni.request：普通 http 请求
uni.uploadFile：上传文件
uni.downloadFile：下载文件
2. 本地存储 API
uni.setStorageSync/uni.getStorageSync：本地缓存（Pinia 持久化底层就是它）
3. 页面路由 API
uni.navigateTo、uni.switchTab、uni.reLaunch、uni.navigateBack（对应 button open-type）
4. 弹窗交互 API
uni.showToast、uni.showModal、uni.showLoading
5. 设备 / 权限 API
uni.getPhoneNumber、uni.getUserProfile、uni.chooseImage、uni.getLocation
6. 分享、客服、支付 API
uni.share、打开客服会话、uni.requestPayment 支付
页面常用功能
自定义导航栏，轮播图，SKU弹窗，骨架屏--微信小程序(黑马)4-5
表单组件
适配屏幕
javascript
<script setup lang="ts">
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
//定义props
const props = defineProps<{ orderState: number }>()
</script>）二次弹窗uni.showModal
选择图片uni.chooseMedia
uni.uploadFile---上传文件
uni-swipe-action--常用于删除
javascript
<uni-swipe-action> 【外层容器，统一管理所有侧滑项】
<uni-swipe-action-item> 【单条列表侧滑容器】
<!-- 中间：列表正常展示内容 -->
<view>商品/地址/消息内容</view>
<!-- 右侧侧滑按钮（左滑出来） -->
<template #right>
自定义按钮
</template>
<!-- 左侧侧滑按钮（右滑出来，可选） -->
<template #left>
自定义按钮
</template>
</uni-swipe-action-item>
</uni-swipe-action>
初始化
onload 和 onshow onMouted
组件常用功能
button--常用属性 opentype
getPhoneNumber：手机号一键登录
share：分享功能
switchTab：切换底部 tab
navigate：普通内页跳转
back：返回上一页
contact：客服聊天
reLaunch：登录后清空栈跳转首页
javascript
<button open-type="getPhoneNumber" bindgetphonenumber="getPhone">获取手机号登录</button>跳转页面-navigator/button
navigator组件 加url
javascript
<!-- 默认open-type="navigate" -->
<navigator url="/pages/detail/detail?id=100">
进入详情页
</navigator>button的open-type属性：
navigateTo：存页面栈，可返回，不能跳 tab
redirectTo：关闭当前页，跳新页，无返回
switchTab：只切底部 tab，清非 tab 页面
reLaunch：全关页面，重启到目标页
navigateBack：原路返回
input加v-model实现双向绑定
常用属性：
@tap 点击后触发函数
v-if 和v-else表示是否呈现这部分
易错易漏：
引入类型用type
defineProps 只能在 <script setup> 中使用
状态orderstate的修改--影响每笔订单
const XX=ref()--让基础数据具备响应式（最常用）
使得后续的result都是对应的数据；http返回promise所以要async await
javascript
const age = ref<number>(18)
// 修改必须 .value
nickname.value = '小明'
age.value = 20
接口返回的数据格式
带参数的接口
defineProps用于接收父组件给的数据
检查
可以通过 检查-network 查看是否发送成功请求
store（共享数据-常用）
数据全局共享 ：用户信息、登录态、token、购物车、全局配置等，任何页面直接读取，不用父子组件一层层 props 传递。
统一修改数据 所有数据变更逻辑封装在 store 的 actions，一处修改，全页面自动同步更新。
持久化存储 搭配持久化插件，刷新 / 重启小程序后数据不丢失（登录状态、用户信息缓存）。
TypeScript
import { defineStore } from 'pinia'
// 导入你之前定义的用户详情类型
import type { ProfileDetail } from '@/types/profile'
// 定义仓库ID，全局唯一
export const useUserStore = defineStore('user', {
// state：存放全局状态（响应式数据）
state: () => ({
token: '' as string,
// 用户详情，复用你之前的TS类型
profile: null as ProfileDetail | null
}),
// getters：计算属性，派生数据（类似 computed）
getters: {
// 判断是否登录
isLogin: (state) => !!state.token,
// 获取用户昵称
nickname: (state) => state.profile?.nickname || ''
},
// actions：修改state的方法（类似 methods，支持同步/异步）
actions: {
// 1. 保存登录token
setToken(token: string) {
this.token = token
},
// 2. 保存用户个人信息（对应你修改资料接口）
setProfile(data: ProfileDetail) {
this.profile = data
},
// 3. 更新部分用户资料（搭配你截图的 Pick 类型）
updateProfile(params: Pick<ProfileDetail, 'nickname' | 'gender'>) {
if (!this.profile) return
// 合并更新字段
this.profile = { ...this.profile, ...params }
},
// 4. 退出登录，清空所有用户数据
logout() {
this.token = ''
this.profile = null
}
},
// 持久化配置（uni-app/小程序必开，关闭页面数据不丢失）
persist: true
})
javascript
<script setup lang="ts">
import { useUserStore } from '@/stores/user'
// 实例化仓库
const userStore = useUserStore()
// 读取全局数据
console.log(userStore.token)
console.log(userStore.nickname) // getter
// 修改数据，调用actions
const editNickname = () => {
userStore.updateProfile({ nickname: '新名字', gender: 1 })
}
// 退出登录
const loginOut = () => {
userStore.logout()
}
</script>
<template>
<view>{{ userStore.profile?.nickname }}</view>
<button @click="editNickname">修改昵称</button>
</template>Pick作用（偶尔）
Pick<T, K> 是 TS 官方内置泛型工具类型： 作用：从类型 T 中挑选指定的一组键 K，生成一个全新类型
把 Pick 得到的 4 字段类型，合并 后面新增的 3 个可选地址编码字段，最终 ProfileParams 完整包含： 必填：nickname、gender、birthday、profession 可选：provinceCode、cityCode、countyCode