[uni-app]小兔鲜-01项目起步

news2024/11/15 19:54:36

项目介绍

效果演示

技术架构

创建项目

HBuilderX创建

下载HBuilderX编辑器

HBuilderX/创建项目: 选择模板/选择Vue版本/创建

安装插件: 工具/插件安装/uni-app(Vue3)编译器

vue代码不能直接运行在小程序环境, 编译插件帮助我们进行代码转换

绑定微信开发者工具: 指定微信开发者工具安装目录后, HBX才能启动微信开发者工具

开启服务端口: 微信开发者工具/设置/安全设置/开启服务端口, 开启服务端口后HBX才能启动微信开发者工具

运行项目: 运行/小程序模拟器/微信开发者工具

开发技巧: 模拟器窗口分离/置顶

目录解析

tabbar切换案例

  1. 创建页面: page/右键新建页面

  1. 设置tabbar和窗口表现
// 页面配置文件
{
    // 页面路由和窗口表现, 创建页面自动添加
	"pages": [
		// pages数组中第一项表示应用启动页
		{
			"path": "pages/index/index",
			"style": {
				"navigationStyle": "custom", // 隐藏默认导航
				"navigationBarTextStyle": "white",
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path": "pages/my/my",
			"style": {
				"navigationStyle": "custom",
				"navigationBarTextStyle": "white",
				"navigationBarTitleText": "我的"
			}
		},
	],
    // 全局页面设置
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	// 设置 TabBar, 至少两个
	"tabBar": {
		"color": "#333",
		"selectedColor": "#27ba9b",
		"backgroundColor": "#fff",
		"borderStyle": "white",
		"list": [
			{
				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "static/tabs/home_default.png",
				"selectedIconPath": "static/tabs/home_selected.png"
			},
			{
				"text": "我的",
				"pagePath": "pages/my/my",
				"iconPath": "static/tabs/user_default.png",
				"selectedIconPath": "static/tabs/user_selected.png"
			}
		]
	}
}
  1. 配置应用信息: 配置微信appid后, 才能使用微信开发者工具进行真机预览

uniapp对比原生小程序: 每个页面都是.vue文件, 数据绑定和事件处理遵循 vue 规范就可以了

  1. 属性绑定 src="{{ url }}" 升级为 :src="url"
  2. 事件绑定 bindtap="xxx" 升级为 @tap="xxx" , 支持()传参
  3. 支持Vue常用指令 v-for/v-if/v-show/v-model
  4. 多端开发使用 uni 替换 wx 调用接口能力

实现轮播图效果和大图预览效果

<template>
  <swiper class="banner" indicator-dots circular :autoplay="false">
    <swiper_item v-for="item in pictures" :key="item.id">
      <image @tap="onPreviewImage(item.url)" :src="item.url"></image>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
   data() {
      return {
        // 轮播图数据
        pictures:[
          { id: '1',url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview 1.jpg"},
          { id: '2',url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview 2.jpg"},
          { id: '3',url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview 3.jpg"},
        ]
      } 
   },
  methods: {
    onPreviewImage(url) {
      uni.previewImage({
        urls:this.pictures.map(v=>v.url),
        current:url
      })
    }
  }
}
</scripr>

命令行创建

创建项目

  1. 打开cmd, 执行命令: npx degit dcloudio/uni-preset-vue#vite-ts 自定义项目名称
  2. npx是node自带的包管理工具
  3. 官网链接: uni-app官网创建uni-app
  4. 如果下载失败可以去官网下载, 或者切换网络尝试

运行项目

  1. 项目中src目录下存放的就是uni-app工程代码

  1. 添加appid: 在manifest.json文件配置appid
  2. 安装依赖: pnpm install
  3. 项目编译: pnpm dev:mp-weixin
  4. 项目运行: 把编译后的文件 dist/dev/mp-weixin 导入微信开发者工具

vscode编译器配置: 目前vscode对TS类型支持友好

  1. 插件安装uni-app插件

安装uni-create-view插件

功能: 快速创建页面

安装uni-helper插件

功能: uniapp代码提示, ctrl + i

安装 uniapp小程序扩展 插件

功能: 鼠标悬停查看文档

  1. 配置ts类型校验
  • 作用: 使用uniapp或微信组件时, 如果属性配置错误, 在编码阶段直接爆红, 开发效率更高
  • 依赖安装: pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types
{
  "compilerOptions": {
    ... ...
    "types": [
      "@dcloudio/types",  // 默认的TS类型文件
      "miniprogram-api-typings", //微信小程序组件类型增强文件
      "@uni-helper/uni-app-types", //uniapp组件类型增强文件
    ]
  },
  "vueCompilerOptions": {
    // 配置vue的编辑器模式为uniapp
    // 已废弃，现调整为 nativeTags，请升级 Volar 插件至最新版本
    // experimentalRuntimeMode: "runtime-uni-app",
    "nativeTags": [
      "block",
      "component",
      "template",
      "slot"
    ]
  },
}
  1. 解决json注释问题
  • HBX中, 允许JSON文件中出现注释
  • vscode中, JSON文件默认是严格JSON模式, 把JSON配置文件配置成jsonc模式, 就可以正确识别注释了
  • uniapp中, 只有pages.json和manifest.json文件支持注释, 其他的json文件不要配置

基础架构

模版代码: git clone http://gititcast.cn/heimagianduan/erabbit-uni-app-vue3-ts.git heima-shop

安装依赖: pnpm install

配置appid:

{
    /* 小程序特有相关 */
    "mp-weixin" : {
        "appid" : "wxb161c259ad057faaaa",
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true
    },
}

编译代码: pnpm dev:mp-weixin

运行代码: 微信小程序打开dist/dev/mp-weixin

安装uni-ui组件库, 并配置uni-ui组件的自动按需导入

{
	// 组件自动引入规则
	"easycom": {
		// 开启自动扫描
		"autoscan": true,
		// 以正则方式自定义组件匹配规则
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
		}
	},
	"pages": [
    ... ...
  ],
}
  1. 执行 pnpm i @dcloudio/uni-ui 命令安装组件库
  2. 自动导入原理: 当我们使用uni-cart 组件时, 由于组件名以 uni- 开头, 就会被custom规则匹配到, 把组件的名称提取出来, 然后交给$1变量读取, 拼接后是完整组件地址, 就能被引入到项目中

uni ui是基于JS开发的, 本身没有提供TS类型支持, 第三方社区开源了uni-ui的类型增强文件, 供我们使用

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    ... ...
    "types": [
       // 默认的类型增强文件也是必须的
      "@dcloudio/types",
       // 添加安装的uni-ui类型增强文件
      "@uni-helper/uni-ui-types"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    // 要确保包含使用uni组件的vue文件
    "src/**/*.vue"
  ]
}
  1. 安装命令: pnpm i -D @uni-helper/uni-ui-types
  2. 安装配置完成后需要重启项目, 才能生效

状态管理: 基础代码中已经集成了pinia仓库, 我们只进行持久化配置就可以了

// 定义 Store
export const useMemberStore = defineStore(
  'member',
  () => { },
  // 持久化配置
  {
    // 网页端配置
    // persist: true,
    // 小程序端配置
    persist: {
      storage: {
        setItem(key, value) {
          uni.setStorageSync(key, value)
        },
        getItem(key) {
          return uni.getStorageSync(key)
        },
      },
    },
  },
)
  1. 由于网页端和小程序使用不同的本地存储API, 所以持久化配置的方式略有不同

请求拦截器: 拦截request/uploadFile请求, 配置基地址,超时时间, 请求头表示和token

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, 请求超时(10s)
        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
        }
    },
}

// 添加拦截器
uni.addInterceptor('request', httpInterceptor)
uni.addInterceptor('uploadFile', httpInterceptor)

请求函数: 二次封装uni.request函数, 对返回结果进行promise化

/**
 * 请求函数
 */
// 接口(定义后台返回数据的类型)
interface Data<T> {
    code: string
    msg: string
    result: T
}

export const http = <T>(options: UniApp.RequestOptions) => {
    // 1,返回Promise对象
    return new Promise<Data<T>>((resolve, reject) => {
        uni.request({
            ...options,
            // 响应成功(uni.requres中只要服务器有响应,就执行success回调)
            success(res) {
                if (res.statusCode >= 200 && res.statusCode < 300) {
                    // 2,成功
                    resolve(res.data as Data<T>)
                } else if (res.statusCode === 401) {
                    // 清理用户信息,调整到登录页
                    const memberStore = useMemberStore()
                    memberStore.clearProfile()
                    uni.navigateTo({
                        url: '/pages/login/login',
                    })
                    reject(res)
                } else {
                    // 其他错误
                    uni.showToast({
                        title: (res.data as Data<T>).msg || '请求错误',
                        icon: 'none',
                    })
                    reject(res)
                }
            },
            fail(err) {
                // 3,失败
                uni.showToast({
                    title: '请求失败,换个网络试试',
                    icon: 'none',
                })
                reject(err)
            },
        })
    })
}
  1. uni.request函数的sucess成功回调, 只要服务有响应就会执行, 我们需要对状态码进行更准确的判断
  2. 如果状态码是401就跳转到登录页, 如果是其他错误就展示后台返回的错误信息
  3. 如果网络出现问题, 服务器不会响应, 就会触发fail失败回调, 提示网络错误就行了

首页导航栏

安全区域: 通过 uni.getSystemInfoSync() 方法获取不同机型导航栏的安全距离

准备导航栏组件, 使用导航栏组件

<script setup lang="ts">
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<template>
  <view class="navbar" :style="{ paddingTop: safeAreaInsets!.top + 10 + 'px' }">
    <!-- logo文字 -->
    <view class="logo">
      <image class="logo-image" src="@/static/images/logo.png"></image>
      <text class="logo-text">新鲜 · 亲民 · 快捷</text>
    </view>
    <!-- 搜索条 -->
    <view class="search">
      <text class="icon-search">搜索商品</text>
      <text class="icon-scan"></text>
    </view>
  </view>
</template>

<style lang="scss">
/* 自定义导航条 */
.navbar {
  background-image: url(@/static/images/navigator_bg.png);
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  .logo {
    display: flex;
    align-items: center;
    height: 64rpx;
    padding-left: 30rpx;
    .logo-image {
      width: 166rpx;
      height: 39rpx;
    }
    .logo-text {
      flex: 1;
      line-height: 28rpx;
      color: #fff;
      margin: 2rpx 0 0 20rpx;
      padding-left: 20rpx;
      border-left: 1rpx solid #fff;
      font-size: 26rpx;
    }
  }
  .search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10rpx 0 26rpx;
    height: 64rpx;
    margin: 16rpx 20rpx;
    color: #fff;
    font-size: 28rpx;
    border-radius: 32rpx;
    background-color: rgba(255, 255, 255, 0.5);
  }
  .icon-search {
    &::before {
      margin-right: 10rpx;
    }
  }
  .icon-scan {
    font-size: 30rpx;
    padding: 15rpx;
  }
}
</style>

<script setup lang="ts">
import CustomNavbar from './components/CustomNavbar.vue'
  
</script>

<template>
  <!-- 自定义导航组件 -->
  <CustomNavbar />
</template>

隐藏首页的默认导航栏

{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationStyle": "custom", // 隐藏默认导航
				"navigationBarTextStyle": "white",
				"navigationBarTitleText": "首页"
			}
		},
	],
}

实现效果

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

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

相关文章

Linux 基本指令(二)

Linux 基本指令(二)

目录 1. more指令 2. less指令(重要) 3. head指令 4. tail指令 5. date指令 (1)可以通过选项来指定格式&#xff1a; ​编辑 (2)在设定时间方面 (3)时间戳 6. cal指令 7. find指令 8. grep指令 9. alias指令 10. zip指令与unzip指令 (1). zip指令 (2). unzip指令…
阅读更多...
链表分割-----------lg

链表分割-----------lg

现有一链表的头指针 ListNode* pHead&#xff0c;给一定值x&#xff0c;编写一段代码将所有小于x的结点排在其余结点之前&#xff0c;且不能改变原来的数据顺序&#xff0c;返回重新排列后的链表的头指针。 我们可以假设x为36&#xff0c;则小于36都排在前边&#xff0c;>3…
阅读更多...
桌面便签哪个好用？好用的便签软件推荐？

桌面便签哪个好用？好用的便签软件推荐？

随着信息技术的发展&#xff0c;我们的生活方式也发生了翻天覆地的变化。从纸质笔记本到电子便签&#xff0c;这不仅仅是载体的转换&#xff0c;更是思维习惯的一次革新。在这个数字时代&#xff0c;如何利用科技工具来辅助我们更好地管理时间和信息&#xff0c;成为了值得探讨…
阅读更多...
linux环境oracle11.2.0.4打补丁（p31537677_112040_Linux-x86-64.zip）

linux环境oracle11.2.0.4打补丁（p31537677_112040_Linux-x86-64.zip）

上传补丁及opatch工具 创建目录并上传opatch工具和补丁包 [oraclerhel64 ~]$ mkdir /u01/psu [oraclerhel64 ~]$ cd /u01/psu [oraclerhel64 psu]$ ll total 514572 -rw-r--r-- 1 oracle oinstall 391781147 Sep 23 17:37 p31537677_112040_Linux-x86-64.zip -rw-r--r-- 1 or…
阅读更多...
中电金信 ：基于开放架构的私有云建设实践

中电金信 ：基于开放架构的私有云建设实践

01开放架构私有云诞生背景 随着国产化创新建设的深化&#xff0c;产业侧行业软件持续进行云原生改造&#xff0c;金融机构拥抱云和容器技术&#xff0c;实现数智化转型已是大势所趋。近年&#xff0c;云原生技术以及架构发展速度更是惊人&#xff0c;私有云开始有了新架构、有了…
阅读更多...
idea使用spring initializr快速创建springboot项目

idea使用spring initializr快速创建springboot项目

idea使用spring initializr快速创建springboot项目 1.打开idea&#xff0c;新建项目如图&#xff0c;选择好java版本&#xff0c;我这里是17。2.点击next&#xff0c;首先选择springboot版本&#xff0c;我这里选择3.3.4。勾选springweb&#xff0c;它会帮我们下载关于springmv…
阅读更多...
【高效且应用广泛的排序 —— 快速排序算法】

【高效且应用广泛的排序 —— 快速排序算法】

高效且应用广泛的排序 —— 快速排序算法 快速排序是一种常用的排序算法&#xff0c;主要采用分治的思想。以下是对快速排序算法的详细介绍及代码示例&#xff1a; 快速排序的基本思路是&#xff0c;每次将一个位置上的数据归位&#xff0c;使得该数左边的所有数据都比该数小…
阅读更多...
小程序开发设计-小程序的宿主环境：组件⑦

小程序开发设计-小程序的宿主环境：组件⑦

上一篇文章导航&#xff1a; 小程序开发设计-小程序的宿主环境&#xff1a;宿主环境简介⑥-CSDN博客https://blog.csdn.net/qq_60872637/article/details/142425131?spm1001.2014.3001.5501 注&#xff1a;不同版本选项有所不同&#xff0c;并无大碍。 目录 上一篇文章导航…
阅读更多...
阿里巴巴首页pc端1688店铺招牌店铺装修教程

阿里巴巴首页pc端1688店铺招牌店铺装修教程

1688运营1688批发首页1688装修模板1688店铺怎么装修模板自定义装修代码1688店铺装修模板旺铺装修阿里店铺首页怎么装修1688店铺装修教程视频全屏通栏代码1688店铺装修模板阿里巴巴店铺装修设计 阿里巴巴首页pc端1688店铺招牌店铺装修教程 工具&#xff1a;一秒美工
阅读更多...
英特尔：昔日芯片霸主的命运抉择

英特尔：昔日芯片霸主的命运抉择

英特尔&#xff1a;昔日芯片霸主的命运抉择 简介 英特尔的辉煌与困境 高通的崛起与收购意向 英特尔困境的原因 英特尔的未来走向 简介 据美国《华尔街日报》9月20日报道&#xff0c;芯片巨头高通公司近日就收购事宜与英特尔公司进行了接洽。但目前这只是一个意向&#xff…
阅读更多...
centos7 docker部署nacos

centos7 docker部署nacos

1. 一行代码安装git yum -y install git 2. 下载最新版nacos源码&#xff1a; git clone https://github.com/nacos-group/nacos-docker.git 进入nacos-docker文件 cd nacos-docker 3.docker安装数据库Mysql8 按这个来就行&#xff0c;非常好 Docker安装mysql8-超详细、每…
阅读更多...
828华为云征文｜华为云Flexus云服务器X实例 基于CentOS系统镜像快速部署Laravel开源论坛

828华为云征文｜华为云Flexus云服务器X实例 基于CentOS系统镜像快速部署Laravel开源论坛

最近公司可热闹了&#xff01;大家都在为搭建博客论坛系统忙得不可开交&#xff0c;尤其是在选服务器这件事儿上&#xff0c;那叫一个纠结。 同事 A 说&#xff1a;“咱得选个厉害的服务器&#xff0c;不然这论坛以后卡得跟蜗牛爬似的可咋办&#xff1f;” 同事 B 回应道&#…
阅读更多...
思维商业篇(5)—发展趋势分析

思维商业篇(5)—发展趋势分析

思维商业篇(5)—发展趋势分析 核心理论 巴菲特曾在《滚雪球》一书中提到他的投资之道其实非常简单&#xff0c;可以总结为两句话&#xff1a;找到足够长的雪道&#xff0c;找到足够湿的雪球。 而发展趋势的分析&#xff0c;正好可以借助巴菲特的这个滚雪球理论。 足够长的雪…
阅读更多...
OpenHarmony（鸿蒙南向开发）——小型系统内核（LiteOS-A）【用户态内存调测】

OpenHarmony（鸿蒙南向开发）——小型系统内核（LiteOS-A）【用户态内存调测】

往期知识点记录&#xff1a; 鸿蒙&#xff08;HarmonyOS&#xff09;应用层开发&#xff08;北向&#xff09;知识点汇总 鸿蒙&#xff08;OpenHarmony&#xff09;南向开发保姆级知识点汇总~ 持续更新中…… 基本概念 Debug版本的musl-libc库为用户提供内存泄漏检测、堆内存…
阅读更多...
Unity 设计模式 之 行为型模式 -【状态模式】【观察者模式】【备忘录模式】

Unity 设计模式 之 行为型模式 -【状态模式】【观察者模式】【备忘录模式】

Unity 设计模式 之 行为型模式 -【状态模式】【观察者模式】【备忘录模式】 目录 Unity 设计模式 之 行为型模式 -【状态模式】【观察者模式】【备忘录模式】 一、简单介绍 二、状态模式&#xff08;State Pattern&#xff09; 1、什么时候使用状态模式 2、使用状态模式的…
阅读更多...
Android RecyclerView 实现 GridView ，并实现点击效果及方向位置的显示

Android RecyclerView 实现 GridView ，并实现点击效果及方向位置的显示

效果图 一、引入 implementation com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.30 二、使用步骤 1.Adapter public class UnAdapter extends BaseQuickAdapter<UnBean.ResultBean, BaseViewHolder> {private int selectedPosition RecyclerView.NO_POSITIO…
阅读更多...
苹果电脑系统重磅更新——macOS Sequoia 15 系统 新功能一 览

苹果电脑系统重磅更新——macOS Sequoia 15 系统 新功能一 览

有了 macoS Sequoia&#xff0c;你的工作效率将再次提升&#xff1a;快速调整桌面布局&#xff0c;一目了然地浏览网页重点&#xff0c;还可以通过无线镜像功能操控你的iPhone。 下面就来看看几项出色新功能&#xff0c;还有能够全面发挥这些功能的 App 和游戏。 macOS Sequo…
阅读更多...
探秘 Web Bluetooth API：连接蓝牙设备的新利器

探秘 Web Bluetooth API：连接蓝牙设备的新利器

引言 随着物联网技术的快速发展&#xff0c;蓝牙设备在日常生活中扮演着越来越重要的角色。而在 Web 开发领域&#xff0c;Web Bluetooth API 的出现为我们提供了一种全新的方式来连接和控制蓝牙设备。本文将深入探讨 Web Bluetooth API 的使用方法和原理&#xff0c;帮助开发…
阅读更多...
ElasticSearch的使用、Kibana和ES-Head可视化工具

ElasticSearch的使用、Kibana和ES-Head可视化工具

ElasticSearch的使用、Kibana和ES-Head可视化工具 一、ElasticSearch概述1. ES2.IK分词器3. Kibana4.Head 二、安装1.ES安装2. 配置跨域和IK分词器3.Kibana安装4. Head安装 三、常用操作1. ES结构2. ES操作1. 索引的基本操作-创建索引-查看索引-修改索引-删除索引-特殊查看 2.文…
阅读更多...
git笔记之在多个分支中复用某个分支提交的更改

git笔记之在多个分支中复用某个分支提交的更改

git笔记之在多个分支中复用某个分支提交的更改 code review! 文章目录 git笔记之在多个分支中复用某个分支提交的更改1.实现该功能的 Bash 脚本示例2.这个脚本是否可以处理新添加的文件&#xff1f;3.该脚本使用前&#xff0c;应先使用下述脚本重置本地仓库所有分支与远程保持一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023