什么是 uniapp 框架

    使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台

官网地址：https://uniapp.dcloud.net.cn/

VScode 插件安装

通过 uni-app 框架创建项目

HBuilderX 可视化方式（只能在 XBuild 中运行）

HBuilderX工具下载 https://www.dcloud.io/hbuilderx.html

vue-cli 命令行方式（可以再 VS code 中运行）

 1### 环境安装
 2# 查看是否安装有@vue/cli
 3vue -V
 4
 5# 设置镜像源
 6npm config set registry https://registry.npmmirror.com
 7
 8# 无则执行命令安装
 9npm install -g @vue/cli
10
11### 安装 Vue3/vite/typescript 项目模板
12npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
13
14### 直接访问官网提供的gitee地址下载
15https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip
16
17
18
19### pmpm下载项目依赖
20# powershell超级管理员运行
21PS C:\WINDOWS\system32> set-ExecutionPolicy RemoteSigned(默认值为“N”): y
22
23# 查看是否安装pnpm
24pnpm -v
25
26# 无则安装
27npm install -g pnpm
28
29# 设置淘宝镜像源
30pnpm config set registry https://registry.npmmirror.com/
31
32# 下载依赖
33pnpm i 
34
35# 运行
36pnpm dev:h5

目录结构

uni-app 项目运行在微信小程序调试

uni-app 框架的生命周期

生命周期函数

• 在项目运行过程中，各个阶段执行的回调函数成为生命周期钩子函数
• 在合适的时机做合适的任务，也就是对应的回调函数执行
• 在之前的 vue 项目中是 vue 实例的生命周期
• uni-app 不止支持 vue 实例的生命周期，还新增了其他的生命周期

uni-app 生命周期分类

• 应用生命周期
• 页面生命周期
• 组件生命周期

应用生命周期

• 官网文档地址
• 应用生命周期仅可在 App.vue 中监听，在页面监听无效
• App.vue 是 uni-app 的主组件，所有页面都是在 App.vue 下进行切换的，是页面入口文件。但 App.vue 本身不是页面，这里不能编写视图元素，也就是没有

页面生命周期

• 官网文档地址
• 支持 vue 标准的生命周期函数，同时新增了很多其他的生命周期函数
• 在 page 目录下配置的页面文件才能生效
• uni-app 会将 pages.json ==> pages 配置项中的第一个页面，作为当前工程的首页（启动页）

组件生命周期

• 官网文档地址
• 与 vue 标准组件的生命周期函数相同
• 没有页面级新增的 onLoad 等生命周期函数

路由配置使用和页面跳转传参

组件式路由跳转传参

组件式路由跳转

1<navigator url="/pages/about/index" open-type="navigate" hover-class="navigator-hover">
2  去个人中心
3</navigator>

路由传参

1### 传递参数
2<navigator url="/pages/mine/index?title=小滴课堂" open-type="navigate" hover-class="navigator-hover">
3  去个人中心
4</navigator>
5
6### 接受参数
7onLoad((option)=>{
8  console.log(option?.title)
9})

函数式路由跳转传参

函数式路由跳转
自动补全的插件：uni-app-snippets

1uni.navigateTo({
2  url: '/pages/index/index'
3})

路由传参

1### 传递参数
2uni.navigateTo({
3  url: '/pages/index/index?title=xdclass.net'
4})
5
6### 接受参数
7onLoad((option)=>{
8  console.log(option?.title)
9})

传参的问题

• url 值有长度限制，太长的字符串会传递失败
• 解决
  • 通过 uniapp 的全局自定义事件
    • 页面通讯
  • 通过全局状态管理库处理
    • pinia
    • vuex

不同路由跳转配置的使用

    pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等。
    它类似微信小程序中 app.json 的页面管理部分。注意定位权限申请等原属于 app.json 的内容，在 uni-app 中是在 manifest 中配置。

配置项列表

配置 2 个一级导航页面（tabBar）

• pages 目录新建 vue 文件
• pages.json 配置 tabBar

 1"tabBar": {
 2  "list": [
 3    {
 4      "pagePath": "pages/index/index",
 5      "text": "首页"
 6    },
 7    {
 8      "pagePath": "pages/mine/index",
 9      "text": "我的"
10    }
11  ]
12}

路由配置分类

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面
  • 字节跳动小程序与飞书小程序不支持

总结

• 一般进行页面的跳转使用 uni.navigateTo
• tabbar 页面的跳转使用 uni.switchTab 或者 uni.reLaunch

 1<view @click="toMinePage">去我的页面</view>
 2<view @click="toTabbarPage">去tabBar页面</view>
 3<view @click="toAllPage">reLaunch可以去任意类型的页面
 4<view @click="back">返回</view>
 5
 6const toMinePage = () => {
 7  uni.navigateTo({url: '/pages/common/index'})
 8}
 9const toTabbarPage = () => {
10  uni.switchTab({url: '/pages/mine/index'})
11}
12const toAllPage = () => {
13  uni.reLaunch({url: '/pages/mine/index'})
14}
15const back = () => { //返回上上级页面
16    uni.navigateBack({ delta: 2 })
17}

详解 uni.navigateTo()

 1### 首页
 2const toMinePage = () => {
 3  uni.navigateTo({
 4    url: '/pages/common/index',
 5    animationType: 'pop-in',
 6    animationDuration: 300,
 7    events: {
 8      //为指定时间添加一个监听器，获取被打开页面传送到当前页面的数据
 9      acceptDataFromOpenedPage: function (data: string) {
10          console.log(data)
11      }
12    },
13    success: function (res){
14      // 通过evenChannel向被打开页面传送数据
15      res.eventChannel.emit('acceptDataFromOpenerPage', {data : '路由成功success回调函数传入的数据'})
16    }
17  })
18}
19
20### common页面
21import { onLoad } from '@dcloudio/uni-app'
22import { getCurrentInstance } from 'vue'  
23
24onLoad(() => {
25    const instance = getCurrentInstance()?.proxy  
26    // @ts-expect-error-error
27    const eventChannel = instance.getOpenerEventChannel()
28    eventChannel.emit('acceptDataFromOpenedPage', { data: '从about页面传回的数据'})
29    eventChannel.on('acceptDataFromOpenerPage', function (data: any){
30        console.log(data)
31    })
32})

getCurrentPages() 使用
获取当前的页面栈，以数组形式按栈的顺序给出，第一个元素为起首页，最后一个元素为当前页面 。

 1# 获取当前页面栈信息
 2onLoad(() => {
 3  const pages = getCurrentPages()
 4  // @ts-expect-error-error
 5  console.log(pages[pages.length - 1].$page);
 6})
 7
 8# 获取起始页栈信息
 9onLoad(() => {
10  const pages = getCurrentPages()
11  // @ts-expect-error-error
12  console.log(pages[0].$page);
13})
14
15# 当前页栈信息
16{
17    "id": 5,
18    "path": "/pages/common/index",
19    "route": "pages/common/index",
20    "fullPath": "/pages/common/index",
21    "options": {},
22    "meta": {
23        "id": 5,
24        "backgroundColor": "#F8F8F8",
25        "navigationBar": {
26            "backgroundColor": "#F8F8F8",
27            "titleText": "普通页面",
28            "type": "default",
29            "titleColor": "#000000",
30            "titleSize": "16px"
31        },
32        "isNVue": false,
33        "route": "pages/common/index",
34        "pullToRefresh": {}
35    },
36    "openType": "navigateTo",
37    "statusBarStyle": "dark"
38}
39
40# 起始页栈信息
41{
42    "id": 4,
43    "path": "/pages/index/index",
44    "route": "pages/index/index",
45    "fullPath": "/pages/index/index",
46    "options": {},
47    "meta": {
48        "id": 4,
49        "backgroundColor": "#F8F8F8",
50        "navigationBar": {
51            "backgroundColor": "#F8F8F8",
52            "titleText": "首页",
53            "type": "default",
54            "titleColor": "#000000",
55            "titleSize": "16px"
56        },
57        "isNVue": false,
58        "isQuit": true,
59        "isEntry": true,
60        "isTabBar": true,
61        "tabBarIndex": 0,
62        "route": "pages/index/index",
63        "pullToRefresh": {}
64    },
65    "openType": "navigateTo",
66    "statusBarStyle": "dark"
67}

uniapp 常用的组件使用

视图容器

基础内容

表单组件（Form）

媒体组件（Media）

uniapp 常用的 API 使用

发起网络请求 uni.request

在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。

1onLoad(() => {
2	//uni.request
3	uni.request({ url: 'https://api-v2.xdclass.net/api/card/v1/list'}).then((res) => {
4	console.log(res)
5	})
6})

OBJECT 参数说明

数据缓存 uni.setStorage

1onLoad(() => {
2    //setStorageSync
3    uni.setStorageSync('token', 'soulboy')
4    console.log(uni.getStorageSync('token'))
5    uni.clearStorageSync()
6    setTimeout(() => {
7        uni.removeStorageSync('token')
8    },5000)
9})

界面 API

第三方 API

项目初始化

  1### 初始化代码
  2# 安装 Vue3/vite/typescript 项目模板
  3npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
  4
  5# 也可以直接访问官网提供的gitee地址下载
  6https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip
  7
  8### Gitee代码仓库管理
  9git init 
 10touch README.md
 11git add README.md
 12git commit -m "first commit"
 13git remote add origin https://gitee.com/wang-chao1990/uniapp-xdclass.git
 14git push -u origin "master"
 15git push -f origin "master"
 16
 17
 18### unocss配置
 19# unocss.config.ts
 20import presetWeapp from 'unocss-preset-weapp'
 21import { defineConfig } from 'unocss'
 22import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer'
 23
 24export default defineConfig({
 25  presets: [
 26    presetWeapp(), // 工具预设
 27  ],
 28  transformers: [
 29    transformerAttributify(), // 支持属性化模式
 30    transformerClass(), // 转换转义类名，支持class写法
 31  ],
 32  shortcuts: [
 33    { center: 'flex items-center justify-center' },
 34    { around: 'flex items-center justify-around' },
 35    { between: 'flex items-center justify-between' },
 36  ]
 37})
 38
 39# main.ts
 40import 'uno.css'
 41
 42# vite.config.ts
 43import { defineConfig } from "vite";
 44import uni from "@dcloudio/vite-plugin-uni";
 45import Unocss from 'unocss/vite'
 46
 47export default defineConfig({
 48  plugins: [uni(),Unocss()],
 49});
 50
 51
 52# 安装插件
 53PS D:\Project\my-vue3-project> pnpm i unocss-preset-weapp unocss
 54
 55
 56### 响应式语法糖和自动引入插件配置
 57# 下载插件
 58pnpm i unplugin-auto-import
 59
 60# vite.config.ts
 61import { defineConfig } from "vite";
 62import uni from "@dcloudio/vite-plugin-uni";
 63import Unocss from 'unocss/vite'
 64import AutoImport from 'unplugin-auto-import/vite'
 65
 66// https://vitejs.dev/config/
 67export default defineConfig({
 68  plugins: [
 69    uni({
 70      vueOptions: {
 71        reactivityTransform: true
 72      }
 73    }),
 74    Unocss(),
 75    AutoImport({
 76      dts: 'src/typings/auto-imports.d.ts',
 77      imports: ['vue', 'uni-app', 'pinia'],
 78      dirs: ['src/composables']
 79    }),
 80  ],
 81});
 82
 83
 84### Pinia状态管理的配置
 85# 安装插件
 86pnpm i pinia@2.0.30 pinia-plugin-persistedstate@3.0.2 -S
 87
 88# 引入Pinia // main.ts
 89import { createSSRApp } from "vue";
 90import App from "./App.vue";
 91import { createPinia } from 'pinia';
 92import { createPersistedState } from 'pinia-plugin-persistedstate';
 93import 'uno.css'
 94
 95# 测试Pinia配置成功与否 引入Pinia和持久缓存的设置
 96const pinia = createPinia().use(
 97  createPersistedState({
 98    storage: {
 99      getItem(key: string) {
100        return uni.getStorageSync(key);
101      },
102      setItem(key: string, value: string) {
103        uni.setStorageSync(key, value);
104      },
105    },
106  })
107);
108
109export function createApp() {
110  const app = createSSRApp(App).use(pinia);
111  return {
112    app,
113  };
114}
115
116# index.vue页面中进行测试 
117const { isLogin} = $(useUser())
118console.log('isLogin:',isLogin)