uniapp项目之小兔鲜儿小程序商城(一) 项目介绍,技术栈,小程序的基础架构,封装拦截器和请求函数

一.项目介绍和前置内容

该项目是一个B2C电商平台项目

1.重要链接

项目演示: http://erabbit.itheima.net/#/
接口文档:https://www.apifox.cn/apidoc/shared/0e6ee326-d646-41bd-9214-29dbf47648fa
项目代码(从这里开始开发):git clone http://git.itcast.cn/heimaqianduan/erabbit-uni-app-vue3-ts.git

2.技术栈

• vue3.0组合式api
• vue-cli项目脚手架
• axios请求接口
• vue-router单页路由
• vuex状态管理
• vuex-persiststate数据持久化
• normalize.css初始化样式
• @vueuse/core组合api常用工具库
• 算法Power Set
• dayjs日期处理小组件
• validate表单校验

二.创建uniapp项目

两种方式创建uni-app项目:HBuilderX(都是DCloud公司旗下)和命令行

1.使用HBuilderX创建

• 创建项目:HBuilderX:创建项目>uniapp>默认模板>vue3
• 下载插件:工具>插件安装>安装新插件:uni-app(vue3)编译器
  

• 在微信开发者工具中运行项目:运行>微信开发者工具>选择路径
  

• 开启服务端口:前往微信开发者工具>设置>安全服务端口:开启
  

• 分离窗口并固定:开发者工具只做效果展示,只留该效果窗口即可

2.使用命令行创建

vue create -p dcloudio/uni-preset-vue my-uniapp-project

3.如何使用vscode开发uniapp项目?

vscode的优势是对ts类型的支持比较友好,本项目也将使用vscode进行uniapp开发

step1:把项目拉入vscode,开始下相关插件

uni-create-view插件:快速创建uniapp页面或组件
uni-helper插件:uni-app代码提示
uniapp小程序扩展插件:鼠标悬停查文档

step2:ts类型校验

• 安装类型声明文件:pnpm i -D @types/wechat-miniprogram @uri-helper/uni-app-types
• 配置tsconfig.json文件

{
   
   
    ......
    "types": [
      "@dcloudio/types",
      "miniprogram-api-typings",
      "@types/wechat-miniprogram",
      "@uni-helper/uni-app-types",
      "@uni-helper/uni-ui-types"
    ]
  },
  "vueCompilerOptions": {
   
   
    // experimentalRuntimeMode 已废弃，请升级 Vue - Official 插件至最新版本
    "plugins": [
      "@uni-helper/uni-app-types/volar-plugin"
    ]
  },

step3:设置json文件可以允许注释

vscode设置>搜"文件关联">添加:

    项                值
manifest.json        jsonc
pages.json           jsonc

4.pages.json文件的作用是什么?

配置页面的路由,导航栏,tabBar等页面类信息
*有些类似routes数组

5.示例:在项目中实现一个tabbar功能

把图标在pages/static作为静态资源放在该目录下
实现tabBar步骤:

1.pages右键>新建uniapp页面:my
2.pages/pages.json中新增tabBar配置如下:
"tabBar":{
   
   
    "list":[
        {
   
   'pagePath':'pages/index/index','text':'首页','iconPath':"xxx.png",'selectedIconPath':'xxx_selected.png'},
        {
   
   'pagePath':'pages/my/my','text':'我的'}
    ]
}

3.复制图标文件到statics文件夹中,配置图标路径

6.如何在手机上查看当前项目效果?

manifest.json配置AppID,从微信小程序配置复制

7.uniapp和原生小程序开发的区别?

每个页面都是vue文件,数据绑定和事件处理使用vue规范

• 数据绑定:

属性绑定不再需要写成src='{ { url }}',直接写成vue的动态绑定属性:src='url'

• 事件绑定:

之前:bindtap='eventName'
现在:@tap='eventName',并支持传参

• 支持vue常用指令

三. 拉取项目代码(直接从这儿开始)

如何拉取项目代码?

项目并非从零开发,直接拉取项目代码:git clone http://git.itcast.cn/heimaqianduan/erabbit-uni-app-vue3-ts.git

拉取项目代码后需要做什么?

• 在manifest.json中添加微信小程序的appid
• 初始化:pnpm install
• 生成 dist/mp-weixin文件:pnpm dev:mp-weixin
• 微信开发者工具中导入项目mp-weixin

四.小程序的基础架构

小程序的基础架构具体实现分为:构建页面,状态管理和数据交互

1.构建页面

构建界面三个部分分为:安装uni-ui组件库,自动引入组件,配置ts类型

1.1.安装uni-ui组件库

安装命令:npm i @dcloudio/uni-ui

1.2.让uni-ui组件库中的组件实现自动按需导入

// pages.json
{
   
   
  // 组件自动导入
  "easycom": {
   
   
    "autoscan": true,
    "custom": {
   
   
      // uni-ui 规则如下配置  
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" 
    }
  },
  "pages": [
    // …省略
  ]
}

此时可以直接使用uni-ui的相关组件:

<uni-card>
    .....
</uni-card>

1.3.配置TS类型

• step1:安装依赖npm i -D @uni-helper/uni-ui-types
• step2:配置tsconfig.json

确保compilerOptions.types中含有@dcloudio/types和@uni-helper/uni-ui-types,且include包含了对应的vue文件

// tsconfig.json
{
   
   
  "compilerOptions": {
   
   
    // ...
    "types": [
      "@dcloudio/types", // uni-app API 类型
      "miniprogram-api-typings", // 原生微信小程序类型
      "@uni-helper/uni-app-types", // uni-app 组件类型
      "@uni-helper/uni-ui-types" // uni-ui 组件类型  
    ]
  },
  // vue 编译器类型，校验标签类型
  "vueCompilerOptions": {
   
   
    "nativeTags": ["block", "component", "template", "slot"]
  }
}

• step3:重启vscode,成功标志----<uni-card>有了类型声明

2.状态管理(以my页的数据持久化为例)

最终目的是设置小程序端的Pinia持久化

Pinia持久化的方案与之前的写法有些许不同:
以前的持久化主要针对的是网页端的localStorage
而小程序端的持久化针对的是小程序端的api,即:uni.setStorageSync()和getsetStorageSync()

step0:安装持久化存储插件pinia-plugin-persistedstate

安装命令:pnpm i pinia-plugin-persistedstate
(Pinia 用法与 Vue3 项目完全一致，uni-app 项目仅需解决持久化插件兼容性问题。)

step1:在stores/index.ts中准备好pinia相关代码

import {
   
   createPinia} from "pinia"
import persist from 'pinia-plugin-persistedstate'

//创建pinia实例
const pinia = createPinia()
//使用持久化存储插件
pinia.use(persist)
//默认导出,给main.ts使用
export default pinia
//模块统一导出
export * from "/modules/member"

step2:在main.ts中准备好相关代码

import {
   
   createSSRApp}