小兔鲜项目 uniapp （1）

news2025/10/31 22:57:52

目录

项目架构

uni-app小兔鲜儿电商项目架构

 小兔鲜儿电商课程安排

创建uni-app项目

1.通过HBuilderX创建

2.通过命令行创建

pages.json和tabBar案例

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

用VS Code开发uni-app项目

 拉取小兔鲜儿项目模板代码

 基础架构–引入uni-ui组件库

操作步骤

安装类型声明文件 

配置类型声明文件

 基础架构–小程序端Pinia持久化、

持久化存储插件

网页端持久化 API

多端持久化 API

参考代码

 基础架构–uni.request请求封装

基础架构–请求和上传文件拦截器

 基础架构–封装Promise请求函数

项目架构

uni-app小兔鲜儿电商项目架构

 小兔鲜儿电商课程安排

创建uni-app项目

创建uni-app项目

uni-app支持两种方式创建项目：

1.通过HBuilderX创建

 1.1下载安装HbuilderX编辑器

 1.2通过HbuilderX创建uni-app vue3项目

 1.3安装uni-app vue3编译器插件

 1.4编译成微信小程序端代码

 1.5开启服务端口

 小技巧分享：模拟器窗口分离和置顶

两者关系 

2.通过命令行创建

通过命令行创建（不必依赖HBuilderX）

命令行创建uni-app项目：

vue3+ts版:

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

创建其他版本可查看：uni-app 官网icon-default.png?t=N6B9https://uniapp.dcloud.net.cn/quickstart-cli.html 

编译和运行uni-app项目：

         

  1. 安装依赖 pnpm install
  2. 编译成微信小程序 pnpm dev:mp-weixin
  3. 导入微信开发者工具

温馨提示: 在 manifest.json 文件添加小程序 appid 方便真机预览

pages.json和tabBar案例

我们先来认识 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内置的常用样式变量

用于配置页面路由、导航栏、tabBar 等页面类信息 

 

{
	"pages": [ //页面路径及窗口表现
		{
			"path": "pages/index/index", //页面路径
			"style": { //页面样式
				"navigationBarTitleText": "首页" //导航栏的标题文字
			}
		},
		{
			"path": "pages/my/my",
			"style": {
				"navigationBarTitleText": "我的"
			}

		}
	],
	"globalStyle": { //全局页面样式
		"navigationBarTextStyle": "white", //导航栏标题颜色只支持black/white
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#27ba9b", //导航栏背景颜色
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": { //底部tab
		"list": [{ //tab列表
				"pagePath": "pages/index/index", //页面路径
				"text": "首页", //tab的文字
				"iconPath": "static/tabs/home_default.png", //图片路径
				"selectedIconPath": "static/tabs/home_selected.png" //选中图片的路径

			},
			{
				"pagePath": "pages/my/my",
				"text": "我的",
				"iconPath": "static/tabs/user_default.png",
				"selectedIconPath": "static/tabs/user_selected.png"
			},
		]
	},
	"uniIdRouter": {}
}

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

每个页面是一个.vue文件，数据绑定及事件处理同Vue.js规范：

1.属性绑定src="{{ url }}"升级成:src="url"

2.事件绑定bindtap="eventName"升级成@tap="eventName"，支持（）传参

3.支持Vue常用指令v-for、v-if、v-show、v-model等

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

<style></style> 样式不需要写 scoped

生命周期分为三部分：应用生命周期(小程序)，页面生命周期(小程序)，组件生命周期(Vue)

 

<template>
	<!--indicator-dots	是否显示面板指示点  :autoplay	是否自动切换  circular	是否采用衔接滑动，即播放到末尾后重新回到开头-->
	<swiper indicator-dots :autoplay="false" circular>
		<swiper-item class='banner' v-for="item in picurls" :key='item.id'>
			<image :src="item.url" @tap='onImageChange(item.url)' mode=""></image>
		</swiper-item>

	</swiper>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				picurls: [{
					id: 1,
					url: 'https://img0.baidu.com/it/u=3021883569,1259262591&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1691600400&t=923ddedd0e2c4310685b4603e1d3b3c3'
				}, {
					id: 2,
					url: 'https://img0.baidu.com/it/u=3021883569,1259262591&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1691600400&t=923ddedd0e2c4310685b4603e1d3b3c3'
				}, {
					id: 3,
					url: 'https://img0.baidu.com/it/u=3021883569,1259262591&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1691600400&t=923ddedd0e2c4310685b4603e1d3b3c3'
				}, {
					id: 4,
					url: 'https://img0.baidu.com/it/u=3021883569,1259262591&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1691600400&t=923ddedd0e2c4310685b4603e1d3b3c3'
				}, {
					id: 5,
					url: 'https://img0.baidu.com/it/u=3021883569,1259262591&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1691600400&t=923ddedd0e2c4310685b4603e1d3b3c3'
				}]
			}
		},
		onLoad() {

		},
		methods: {
			onImageChange(url) {
				console.log(url);
				uni.previewImage({ //在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。
					urls: this.picurls.map(v => v.url), //需要预览的图片链接列表。2.2.3 起支持云文件ID。	
					current: url //	当前显示图片的链接
				})
			}
		}
	}
</script>

<style>
	.banner,
	.banner image {
		width: 750rpx;
		height: 750rpx;
	}
</style>

用VS Code开发uni-app项目

用VS Code开发uni-app项目

为什么选择VS Code？

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

 

 用 VS Code 开发配置

  • 安装 uni-app 插件
    • uni-create-view ：快速创建 uni-app 页面
    • uni-helper uni-app ：代码提示
    • uniapp 小程序扩展 ：鼠标悬停查文档
  • TS 类型校验
    • 安装类型声明文件 pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types
    • 配置 tsconfig.json
  • JSON 注释问题
    • 设置文件关联，把 manifest.json 和 pages.json 设置为 jsonc
// tsconfig.json
{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types",
+      "@types/wechat-miniprogram",
+      "@uni-helper/uni-app-types"
    ]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

 

 注意：原配置 experimentalRuntimeMode 现无需添加

                                                   

温馨提示：VS Code 可通过快捷键 Ctrl + i 唤起代码提示。 

 拉取小兔鲜儿项目模板代码

拉取小兔鲜儿项目模板代码

项目模板包含：目录结构，项目素材，代码风格。

git clone http://git.itcast.cn/heimaqianduan/erabbit-uni-app-vue3-ts.git
heima-shop

注意事项

  • 在 manifest.json 中添加微信小程序的 appid

 基础架构–引入uni-ui组件库

操作步骤

安装 uni-ui 组件库icon-default.png?t=N6B9https://uniapp.dcloud.net.cn/component/uniui/quickstart.html#npm%E5%AE%89%E8%A3%85

pnpm i @dcloudio/uni-ui

配置自动导入组件

 

// pages.json
{
  // 组件自动导入
  "easycom": {是否开启自动导入
    "autoscan": true,
    "custom": {
      // 提取uni的后缀名替换到$1找到正确文件
      // uni-ui 规则如下配置  // [!code ++]
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" // [!code ++]
    }
  },
  "pages": [
    // …省略
  ]
}

安装类型声明文件 

pnpm i -D @uni-helper/uni-ui-types

配置类型声明文件

// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "@dcloudio/types",
      "@uni-helper/uni-app-types", // [!code ++]
      "@uni-helper/uni-ui-types" // [!code ++]
    ]
  }
}

 基础架构–小程序端Pinia持久化、

说明：项目中 Pinia 用法平时完全一致，主要解决持久化插件兼容性问题。

持久化存储插件

持久化存储插件： pinia-plugin-persistedstateicon-default.png?t=N6B9https://prazdevs.github.io/pinia-plugin-persistedstate/guide/config.html#storage

插件默认使用 localStorage 实现持久化，小程序端不兼容，需要替换持久化 API。

网页端持久化 API

// 网页端API
localStorage.setItem()
localStorage.getItem()

多端持久化 API

// 兼容多端API
uni.setStorageSync()
uni.getStorageSync()

 

参考代码

// stores/modules/member.ts
export const useMemberStore = defineStore(
  'member',
  () => {
    //…省略
  },
  {
    // 配置持久化
    persist: {
      // 调整为兼容多端的API
      storage: {
        setItem(key, value) {
          uni.setStorageSync(key, value) // [!code warning]
        },
        getItem(key) {
          return uni.getStorageSync(key) // [!code warning]
        },
      },
    },
  },
)

 基础架构–uni.request请求封装

基础架构–请求和上传文件拦截器

uniapp 拦截器： uni.addInterceptoricon-default.png?t=N6B9https://uniapp.dcloud.net.cn/api/interceptor.html

接口说明：接口文档icon-default.png?t=N6B9https://www.apifox.cn/apidoc/shared-0e6ee326-d646-41bd-9214-29dbf47648fa/doc-1521513

实现步骤

  1. 基础地址
  2. 超时时间
  3. 请求头标识
  4. 添加 token
// src/utils/http.ts
const httpInterceptor = {
  // 拦截前触发
  invoke(options: UniApp.RequestOptions) {
    // 1. 非 http 开头需拼接地址
    if (!options.url.startsWith('http')) {
      options.url = baseURL + options.url
    }
    // 2. 请求超时
    options.timeout = 10000
    // 3. 添加小程序端请求头标识
    options.header = {
      ...options.header,
      'source-client': 'miniapp',
    }
    // 4. 添加 token 请求头标识
    const memberStore = useMemberStore()
    const token = memberStore.profile?.token
    if (token) {
      options.header.Authorization = token
    }
  },
}

// 拦截 request 请求
uni.addInterceptor('request', httpInterceptor)
// 拦截 uploadFile 文件上传
uni.addInterceptor('uploadFile', httpInterceptor)

 

 

 基础架构–封装Promise请求函数

实现步骤

  1. 返回 Promise 对象
  2. 成功 resolve
    1. 提取数据
    2. 添加泛型
  3. 失败 reject
    1. 401 错误
    2. 其他错误
    3. 网络错误

参考代码

/**
 * 请求函数
 * @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: string
  msg: string
  result: 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.data
          resolve(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)
      },
    })
  })
}

 

 请求函数–请求成功提取数据和设置类型

 基础架构–封装Promise请求函数

请求函数–获取数据失败 

  • uni.request的success回调函数只是表示服务器响应成功，没处理响应状态码，业务中使用不方便
  • axios函数是只有响应状态码是2xx才调用resolve函数，表示获取数据成功，业务中使用更准确 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/847854.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

大模型：突破AI的边界

大模型：突破AI的边界

引言 人工智能&#xff08;AI&#xff09;在过去几年中取得了巨大的进展&#xff0c;其中大模型被认为是取得这些进展的关键因素之一。大模型具有更多的参数、更强的表达能力和更高的预测性能&#xff0c;对自然语言处理、计算机视觉和强化学习等任务产生了深远的影响。本文将探…
阅读更多...
赛码网-Light 100%AC代码（C++）

赛码网-Light 100%AC代码（C++）

———————————————————————————————————— ⏩ 大家好哇&#xff01;我是小光&#xff0c;嵌入式爱好者&#xff0c;一个想要成为系统架构师的大三学生。 ⏩最近在准备秋招&#xff0c;一直在练习编程。 ⏩本篇文章对赛码网的 Light 题目做一个…
阅读更多...
pocky-request网络请求插件

pocky-request网络请求插件

插件下载地址&#xff1a;https://ext.dcloud.net.cn/plugin?id468 插件&#xff1a;https://www.yuque.com/pocky/aaeyux/irx7u0#Oosbz 使用教程&#xff1a; 下载插件main.js中配置&#xff1a; // 导入 import axiosRequest from ./js_sdk/pocky-request/pocky-request…
阅读更多...
Vben框架使用小记

Vben框架使用小记

渲染表格可展开内容&#xff1a; <!-- 这里是一个具名插槽&#xff0c;渲染可展开的内容模板 --><template #expandedRowRender"{ record }">效果图&#xff1a;
阅读更多...
企业举办活动邀请媒体的意义和重要性

企业举办活动邀请媒体的意义和重要性

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 企业举办活动并邀请媒体的意义和重要性是多方面的&#xff0c;主要有以下一些&#xff1a; 1. 品牌曝光与宣传&#xff1a;邀请媒体参与企业活动可以提高企业的品牌曝光度。媒体报道能够…
阅读更多...
PHP实现保质期计算器

PHP实现保质期计算器

1.php实现保质期计算&#xff0c; 保质期日期可选&#xff0c;天 、月、年 2. laravel示例 /*** 保质期计算器* return void*/public function expirationDateCal(){$produce_date $this->request(produce_date); // 生产日期$warranty_date $this->reques…
阅读更多...
2023最新性能测试面试题（带答案）

2023最新性能测试面试题（带答案）

一、性能测试开展过程&#xff1a; 答&#xff1a;第一步&#xff1a;找产品沟通哪些接口需要压测&#xff0c;需要达到什么样的预期值(TPS和响应时间) 第二步&#xff1a;编写测试计划&#xff0c;人员、时间周期、工具 第三步&#xff1a;环境搭建 第四步&#xff1a;造数…
阅读更多...
现在pmp还值得去考试吗？

现在pmp还值得去考试吗？

一&#xff0c;为什么要考PMP&#xff1f; 1. PMP认证在项目管理领域具有极高的认可度&#xff0c;是全球通用的认证&#xff0c;不仅局限于某一行业或地区。目前已有超过43万人参加了PMP考试。 2. PMP持证者的薪资和收入潜力都有明显优势。根据PMI发布的《薪酬力&#xff1a…
阅读更多...
记录一次electron打包提示文件找不到的解决方法

记录一次electron打包提示文件找不到的解决方法

没有配置files选项 files的作用是配置打包到应用程序的构建资源 就是说如果你想使用项目那个目录下的文件 就得通过files配置一下不然就会报错 json文件或者yml文件会报的错 格式是这样的 "files": ["dist-electron", "dist"],electron打包配…
阅读更多...
JAVASE---方法的使用

JAVASE---方法的使用

方法概念及使用 什么是方法(method) 方法就是一个代码片段. 类似于 C 语言中的 "函数"。方法存在的意义(不要背, 重在体会): 1. 是能够模块化的组织代码(当代码规模比较复杂的时候)。 2. 做到代码被重复使用, 一份代码可以在多个位置使用。 3. 让代码更好理解更简单…
阅读更多...
人民日报点赞！十大央媒争相报道，星恒守护民生安全出行二十年

人民日报点赞！十大央媒争相报道，星恒守护民生安全出行二十年

围绕电动自行车锂电池的安全性话题&#xff0c;甚至说争议&#xff0c;在近期有了权威定调。 就在7月底&#xff0c;“民生出行&#xff0c;安全为本——电动自行车锂电安全调研座谈会”在北京人民日报社举行&#xff0c;国家监管部门、行业协会、检验院所的权威领导专家&#…
阅读更多...
kube-prometheus 使用blackbox进行icmp 监控

kube-prometheus 使用blackbox进行icmp 监控

安装kube-prometheus 后默认在monitoring namespace中有创建 blackbox-exporter deployment。但默认没有icmp的module配置&#xff0c;无法执行ping探测。因为即使有icmp module&#xff0c;默认配置也是无法执行ping探测的&#xff08;这篇文章要解决的就是这个问题&#xff0…
阅读更多...
hive编译报错整理

hive编译报错整理

背景 最近在修hive-1.2.0的一个bug&#xff0c;需要修改后重新打包部署到集群&#xff0c;打包的时候报下面的错误&#xff0c;原因很简单&#xff0c;从远程仓库里面已经拉不到这个包了。 org.pentaho:pentaho-aggdesigner-algorithm:jar:5.1.5-jhyde was not found in http…
阅读更多...
【Rust】Rust学习 第六章枚举和模式匹配

【Rust】Rust学习 第六章枚举和模式匹配

本章介绍 枚举&#xff08;enumerations&#xff09;&#xff0c;也被称作 enums。枚举允许你通过列举可能的 成员&#xff08;variants&#xff09; 来定义一个类型。首先&#xff0c;我们会定义并使用一个枚举来展示它是如何连同数据一起编码信息的。接下来&#xff0c;我们会…
阅读更多...
设计模式行为型——观察者模式

设计模式行为型——观察者模式

目录 什么是观察者模式 观察者模式的实现 观察者模式角色 观察者模式类图 观察者模式举例 观察者模式代码实现 观察者模式的特点 优点 缺点 使用场景 注意事项 实际应用 什么是观察者模式 观察者模式&#xff08;Observer Pattern&#xff09;是一种行为型设计模式…
阅读更多...
【css】渐变

【css】渐变

渐变是设置一种颜色或者多种颜色之间的过度变化。 两种渐变类型&#xff1a; 线性渐变&#xff08;向下/向上/向左/向右/对角线&#xff09; 径向渐变&#xff08;由其中心定义&#xff09; 1、线性渐变 语法&#xff1a;background-image: linear-gradient(direction, co…
阅读更多...
【搜索框的匹配功能】

【搜索框的匹配功能】

功能需求&#xff1a; 1. 输入关键字的同时&#xff0c;以下拉列表的形式显示匹配的内容&#xff1b; 2. 点击下拉列表的选项&#xff0c;跳转到对应的新的页面 注意&#xff1a;这里读取data.txt&#xff08;检索的文件对象&#xff09;&#xff0c;会存在跨域的问题&#x…
阅读更多...
【深度学习可视化系列】—— 特征图可视化（支持Vit系列模型的特征图可视化，包含使用Tensorboard对可视化结果进行保存）

【深度学习可视化系列】—— 特征图可视化（支持Vit系列模型的特征图可视化，包含使用Tensorboard对可视化结果进行保存）

【深度学习可视化系列】—— 特征图可视化&#xff08;支持Vit系列模型的特征图可视化&#xff0c;包含使用Tensorboard对可视化结果进行保存&#xff09; import sys import os import torch import cv2 import timm import numpy as np import torch.nn as nn import album…
阅读更多...
Ubuntu 20.04 安装 Stable Diffusionn

Ubuntu 20.04 安装 Stable Diffusionn

步骤 1&#xff1a;安装 wget、git、Python3 和 Python3虚拟环境&#xff08;如果已安装可忽略这步骤&#xff09; sudo apt install wget git python3 python3-venv步骤 2&#xff1a;克隆 SD 项目到本地 git clone https://github.com/AUTOMATIC1111/stable-diffusion-webu…
阅读更多...
亚信科技AntDB数据库与库瀚存储方案完成兼容性互认证，联合方案带来约20%性能提升

亚信科技AntDB数据库与库瀚存储方案完成兼容性互认证，联合方案带来约20%性能提升

近日&#xff0c;亚信科技AntDB数据库与苏州库瀚信息科技有限公司自主研发的RISC-V数据库存储解决方案进行了产品兼容测试。经过双方团队的严格测试&#xff0c;亚信科技AntDB数据库与库瀚数据库存储解决方案完全兼容、运行稳定。除高可用性测试外&#xff0c;双方进一步开展TP…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023