Vue3 + Ts + Pinia + uni-app 学习笔记_pinia持久化 uniapp+vue3+ts

第一部分

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

• 每个页面是一个 .vue 文件，数据绑定及事件处理同 Vue.js 规范：
  • 1、属性绑定 src=“{ { url }}” 升级成 :src=“url”
  • 2、事件绑定 bind:tap=“eventName” 升级成 @tap=“eventName”。支持（）传参
  • 3、支持 Vue 常用指令 v-for、v-if、v-show、v-model 等

  • 温馨提示：调用接口能力，建议前缀 wx 替换为 uni，养成好习惯，这样支持多端开发。

适合人群

• 已经学过原生小程序，想要进阶 uni-app 技术栈的小伙伴
• 想要一套代码，同时覆盖小程序、H5、App 多端
• 学过 Vue3 + TS 基础，但是苦于没有项目练手的小伙伴
• 想要做小程序毕业设计的小伙伴

uni-app 项目文件结构目录说明

• pages：业务页面文件存放的目录
  • index
    • index.vue：index 页面
• static：存放应用引用的本地静态资源的目录（注意：静态资源只能存放于此文件夹）
• unpackage：非工程代码，一般存放运行或发行的编译结果
• index.html：H5 端页面
• main.js：Vue 初始化入口文件
• App.vue：配置 App 全局样式、监听应用生命周期
• pages.json：配置页面路由、导航栏、tabBar 等页面类信息
• manifest.json：配置 appid、应用名称、logo、版本等打包信息
• uni.scss：uni-app 内置的常用样式变量

入门案例 - pages.json 和 tabBar

• pages.json：文件内容节点说明
  • pages：页面路由及窗口表现，示例代码如下：

  "pages": [{
       
  	"path": "pages/A/A",
  	"style": {
       
  		"navigationBarTitleText": "A"，
  		"navigationStyle": "custom" // 自定义导航
  	}
  
  }, {
       
  	"path": "pages/B/B",
  	"style": {
       
  		"navigationBarTitleText": "B"
  	}
  
  }, {
       
  	"path": "pages/C/C",
  	"style": {
       
  		"navigationBarTitleText": "C"
  	}
  
  }, {
       
  	"path": "pages/D/D",
  	"style": {
       
  		"navigationBarTitleText": "D"
  	}
  
  }],
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34

  • globalstyle：默认窗口表现，示例代码如下：

  "globalStyle": {
       
  	"navigationBarTextStyle": "white",
  	"navigationBarTitleText": "uni-app study project",
  	"navigationBarBackgroundColor": "#1AAA9B",
  	"backgroundColor": "#F8F8F8"
  },
  1
  2
  3
  4
  5
  6
  7

  • tabBar：至少两个菜显示，示例代码如下：

  "tabBar": {
       
  	"color": "#13227a", // tab 上的文字默认颜色
  	"selectedColor": "#d81e06", // tab 上的文字选中时的颜色
  	"list": [{
       
  		"pagePath": "pages/A/A", // 页面路径
  		"text": "A", // 页面标题
  		"iconPath": "./static/img/A.png", // tab 图标默认颜色
  		"selectedIconPath": "static/img/_A.png" // tab 图标选中时的颜色
  	}, {
       
  		"pagePath": "pages/B/B",
  		"text": "B",
  		"iconPath": "./static/img/B.png",
  		"selectedIconPath": "static/img/_B.png"
  	}, {
       
  		"pagePath": "pages/C/C",
  		"text": "C",
  		"iconPath": "./static/img/C.png",
  		"selectedIconPath": "static/img/_C.png"
  	}, {
       
  		"pagePath": "pages/D/D",
  		"text": "D",
  		"iconPath": "./static/img/D.png",
  		"selectedIconPath": "static/img/_D.png"
  	}]
  },
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30

第二部分（重点）

创建 uni-app 项目

• 第一种创建方法：通过 HbuilderX 创建
  • 未做笔记
• 第二种创建方法：通过命令行创建
  • 不需要依赖 Hbuilder 开发工具
  • 官方说明文档地址
  • 或者下载完整空项目
  • 命令如下：

    npx degit dcloudio/uni-preset-vue#vite-ts 项目名称
    1

创建 JavaScript 开发的工程：
npx degit dcloudio/uni-preset-vue#vite（项目名称）
首先创建 uni-app 项目。笔记中通过命令行创建的项目，项目创建后安装依赖，并运行 npm run dev:mp-weixin 打包项目。

VSCode 开发 vue3 + ts + uni-app 项目

为什么选择 VS Code?

• HbuilderX 对 TS 类型支持暂不完善
• VS Code 对 TS 类型支持友好，熟悉的编辑器

配置 VS Code

• 安装 uni-app 插件
  
  
  

配置 vscode-snippets-uniapp

• 下载地址
• 下载后将css&js&vue-html三个文件放到项目根 .vscode 目录下(如果没有请手动创建)，重启vscode就可以拥有和 HBuilderX 一样的代码块。

通过 微信开发者工具 打开项目，项目位置如下图：

安装类型声明文件（TS声明文件）

• 1、微信小程序的类型声明
• 2、uni-app 的类型声明

npm install -D miniprogram-api-typings @uni-helper/uni-app-types
1

• 配置 tsconfig.json 文件

{
   
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
   
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
   
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types",
      "miniprogram-api-typings"
1
2
3
4
5
6
7
8
9
10
11
12
13
14