uniapp 跨端开发

一、创建uniapp项目

1. 项目架构

在这里插入图片描述

2. 初始化项目

在这里插入图片描述

3. pages.json 和 tabBar 案例

在这里插入图片描述

4. uni-app和原生小程序开发区别

在这里插入图片描述

5. 用命令行创建uni-app项目

官网链接：https://uniapp.dcloud.net.cn/quickstart-cli.html#创建uni-app
在这里插入图片描述

在这里插入图片描述

6. 用vscode开发uni-app

在这里插入图片描述

在uni-app中只有manifest.json和pages.json这两个json文件允许写注释，按如下添加后，这两个文件的注释就不报错了

7. 拉取项目模板

小兔鲜儿
在这里插入图片描述
这里填入appid

项目模板中已配置好了下面的第8、第9点

8. 额外：项目基础配置统一代码风格

安装 eslint + prettier

pnpm i -D eslint prettier eslint-plugin-vue @vue/eslint-config-prettier @vue/eslint-config-typescript @rushstack/eslint-patch @vue/tsconfig

新建 .eslintrc.cjs 文件，添加以下 eslint 配置

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')module.exports = {root: true,extends: ['plugin:vue/vue3-essential','eslint:recommended','@vue/eslint-config-typescript','@vue/eslint-config-prettier',],// 小程序全局变量globals: {uni: true,wx: true,WechatMiniprogram: true,getCurrentPages: true,getApp: true,UniApp: true,UniHelper: true,App: true,Page: true,Component: true,AnyObject: true,},parserOptions: {ecmaVersion: 'latest',},rules: {'prettier/prettier': ['warn',{singleQuote: true,semi: false,printWidth: 100,trailingComma: 'all',endOfLine: 'auto',},],'vue/multi-word-component-names': ['off'],'vue/no-setup-props-destructure': ['off'],'vue/no-deprecated-html-element-is': ['off'],'@typescript-eslint/no-unused-vars': ['off'],},
}

配置 package.json

{"script": {// ... 省略 ..."lint": "eslint . --ext .vue,.js,.ts --fix --ignore-path .gitignore"}
}

运行

pnpm lint

::: tip 温馨提示
到此，你已完成 eslint + prettier 的配置。
:::

9. 额外：Git 工作流规范

安装并初始化 husky

::: code-group

pnpm dlx husky-init

npx husky-init

:::

安装 lint-staged

pnpm i -D lint-staged

配置 package.json

{"script": {// ... 省略 ...},"lint-staged": {"*.{vue,ts,js}": ["eslint --fix"]}
}

修改 .husky/pre-commit 文件

npm test   // [!code --]
npm run lint-staged     // [!code ++]

::: tip 温馨提示
到此，你已完成 husky + lint-staged 的配置。
:::

二、基础架构

1. 引入uni-ui

ts类型如果之前已经配置过了则忽略
在这里插入图片描述

2. 小程序端 Pinia 持久化

在这里插入图片描述
配置示例

3. 请求封装

1. 添加请求和上传文件拦截器

在这里插入图片描述

2. 封装promise请求函数

在这里插入图片描述

http.ts 添加 http 请求函数及类型

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. 请求超时, 默认 60soptions.timeout = 10000// 3. 添加小程序端请求头标识options.header = {...options.header,'source-client': 'miniapp',}// 4. 添加 token 请求头标识const memberStore = useMemberStore()const token = memberStore.profile?.tokenif (token) {options.header.Authorization = token}console.log(24, options)},
}
uni.addInterceptor('request', httpInterceptor)
uni.addInterceptor('uploadFile', httpInterceptor)/*** 请求函数* @param  UniApp.RequestOptions* @returns Promise*  1. 返回 Promise 对象*  2. 获取数据成功*    2.1 提取核心数据 res.data*    2.2 添加类型，支持泛型*  3. 获取数据失败*    3.1 401错误  -> 清理用户信息，跳转到登录页*    3.2 其他错误 -> 根据后端错误信息轻提示*    3.3 网络错误 -> 提示用户换网络*/
type Data<T> = {code: stringmsg: stringresult: T
}
// 2.2 添加类型，支持泛型
export const http = <T>(options: UniApp.RequestOptions) => {// 1. 返回 Promise 对象return new Promise<Data<T>>((resolve, reject) => {uni.request({...options,// 响应成功success(res) {// 状态码 2xx， axios 就是这样设计的if (res.statusCode >= 200 && res.statusCode < 300) {// 2.1 提取核心数据 res.dataresolve(res.data as Data<T>)} else if (res.statusCode === 401) {// 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)},})})
}

三、项目首页

1. 自定义导航

在这里插入图片描述
样式适配-预留安全区域

2. 通用轮播图组件

通用组件自动导入
在这里插入图片描述
配置自动导入

添加组件类型声明：目前添加组件声明后没效果
在这里插入图片描述
轮播图指示点：非空断言

轮播图接口数据类型

页面加载的生命周期onLoad需要从@dcloudio/uni-app中引入

3. 首页分类组件

在这里插入图片描述

4. 首页热门推荐组件

在这里插入图片描述

5. 首页猜你喜欢组件

在这里插入图片描述
多处会使用到猜你喜欢组件，所以样式及数据请求都放到组件内部，组件defineExpose暴露出方法供父组件调用

typeof XtxGuess 拿到的是组件的类型，InstanceType拿到的是组件的实例类型

在这里插入图片描述

由于类型PageParams中的page是可选的，下面pageParams.page会报错提示page可能未定义，解决办法是如下加上Required，将可选参数变成必填

在这里插入图片描述

6. 首页下拉刷新

refresher-enabled: 开启自定义下拉刷新，会出现对应的动画；
refresherrefresh 下拉刷新回调
在这里插入图片描述

下拉刷新开始，先重置猜你喜欢组件数据

7. 首页骨架屏

在这里插入图片描述

生成骨架屏，把html和样式抽到PageSkeleton组件，删除原生的注释部分、删除导航部分，只保留滚动部分

四、热门推荐

1. 动态设置热门推荐标题

在这里插入图片描述

2. 获取热门推荐数据

交叉类型: PageParams & { subType?: string }
在这里插入图片描述

3. 热门推荐类型定义

在这里插入图片描述

4. 热门推荐页面渲染和tab交互

在这里插入图片描述

5. 热门推荐分页加载

在这里插入图片描述
分页加载的条件判断
扩展字段；环境变量判断

五、商品分类

1. 商品分类轮播图

在这里插入图片描述

2. 渲染一级分类和Tab交互

在这里插入图片描述

3. 二级分类和商品渲染

在这里插入图片描述

4. 商品分类骨架屏

在这里插入图片描述
把骨架屏样式放到.vue文件的style中，把html和css中的注释删除，解决html中的报红

在这里插入图片描述

六、商品详情

1. 商品详情接口请求

defineProps接收页面传参
在这里插入图片描述

2. 详情页面渲染

在这里插入图片描述

3. 商品详情轮播图渲染

在这里插入图片描述

4. 商品详情弹出层

在这里插入图片描述
弹出层交互
联合类型；用typeof获取类型；子组件给父组件通信

七、登录模块

1. 小程序快捷登录

在这里插入图片描述
获取登录凭证code：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
获取手机号：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html

调用后台登录接口成功示例
在这里插入图片描述
模拟快捷登录

2. 保存登录信息

如果这里不用延时，登录成功的提示就看不见了，因为switchTab()会自动关闭当前页面所有内容并跳转到 tabBar 页面
在这里插入图片描述

3. 会员信息渲染

在这里插入图片描述

4. 会员信息-猜你喜欢部分抽离成组合式函数

并复用到首页
在这里插入图片描述

5. 会员中心-设置页分包和预下载

在这里插入图片描述

6. 会员中心-退出登录

在这里插入图片描述

7. 会员中心-个人信息页

在这里插入图片描述
分包、自定义导航

个人信息页接口请求及数据类型

修改用户头像
uni.chooseMedia 调用拍照/本地相册
uni.uploadFile 上传文件，url为后端接口地址

修改用户昵称
v-model处去掉非空断言，定义profile时改用as 断言
在这里插入图片描述
更新Store信息

直接修改单个属性，不调用setProfile

code 数组的类型和长度都确定了(类型 [string, string, string]，元组)，这里定义fullLocationCode得定义成如下

修改性别

修改生日

在这里插入图片描述

八、地址模块

1. 动态设置标题

在这里插入图片描述
分包规则里置空

2. 新建地址

在这里插入图片描述

3. 地址列表

在onShow页面每次显示的钩子函数中调用(新增返回列表也要请求)
在这里插入图片描述
修改地址-回显
修改-保存地址

4. 地址表单校验

在这里插入图片描述

5. 删除地址

uni-swipe-action 滑动操作组件
在这里插入图片描述

九、SKU模块

1. SKU插件

SKU算法：https://juejin.cn/post/7002746459456176158
在这里插入图片描述

2. 渲染商品信息

在这里插入图片描述

打开弹窗交互-修改按钮模式

枚举按钮模式
在这里插入图片描述

选中值处理

从SKU组件内部获取选中值，绑定到商品信息页
在这里插入图片描述

3. 加入购物车

在这里插入图片描述

十、购物车模块

1. 购物车列表渲染

在这里插入图片描述
uni-swipe-action组件无法渲染，把@dcloudio/uni-ui从1.5.8降级到"@dcloudio/uni-ui": “1.4.23”

2. 删除购物车商品

在这里插入图片描述

3. 修改单品数量

在这里插入图片描述

4. 修改选中状态

在这里插入图片描述

5. 底部结算信息

在这里插入图片描述

6. 两个购物车页面

在这里插入图片描述

十一、订单模块

1. 填写订单-基本信息渲染

在这里插入图片描述

2. 填写订单-收货地址

在这里插入图片描述

3. 填写订单-立即购买

查看页面参数
在这里插入图片描述

4. 填写订单-提交订单

在这里插入图片描述
添加编译模式

十二、订单详情

1. 自定义导航栏交互

获取当前页面栈集合 getCurrentPages()
小程序滚动驱动动画
在页面渲染完成钩子onReady中调用
在这里插入图片描述

2.订单状态渲染

在这里插入图片描述

3. 待付款倒计时

uni-countdown组件
在这里插入图片描述
控制台报错uni-countdown.js被无依赖过滤，导致无法显示该组件，如下设置可解决

4. 订单支付

发起微信支付wx.requestPayment
关闭当前页然后跳转 uni.redirectTo
在这里插入图片描述

5. 订单发货

在这里插入图片描述

6. 确认收货

在这里插入图片描述

7. 订单物流渲染

在这里插入图片描述

8. 删除订单

在这里插入图片描述

十三、订单列表

1. Tabs滑动切换

swiper的current绑定activeIndex
在这里插入图片描述
Tabs传参高亮

2. 订单列表渲染

在这里插入图片描述
订单列表抽成了一个组件，请求列表接口在组件挂载生命周期onMounted中调用

3. 订单列表订单支付

这里更新订单状态，没有刷新接口而是前端查找对应数据修改状态
在这里插入图片描述

十四、项目打包

1.打包上传

在这里插入图片描述

2.网页端 pnpm dev:h5 开发调试

首页轮播图、商品详情图宽高有问题，没有自适应：首页轮播图 :host选择器在h5端不生效，修改如下
在这里插入图片描述
商品详情图宽高有问题，因为图片上的mode="aspectFill"没生效，加上image类：宽高100%

调用微信自有能力的地方都要修改，比如以wx.开头的都加上条件判断 #ifdef MP-WEIXIN #endif