Uniapp - 环境搭建 vscode开发

news2024/10/5 13:58:17

uni-app 基础

创建 uni-app 项目方式

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

  1. 通过 HBuilderX 创建（需安装 HBuilderX 编辑器）

  2. 通过命令行创建（需安装 NodeJS 环境）

HBuilderX 创建 uni-app 项目

创建步骤

1.下载安装 HbuilderX 编辑器

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.通过 HbuilderX 创建 uni-app vue3 项目

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.安装 uni-app vue3 编译器插件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.编译成微信小程序端代码

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5.开启服务端口

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

HBuildeX 和 微信开发者工具 关系

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

::: tip 温馨提示
HBuildeX 和 uni-app 都属于 DCloud 公司的产品。
:::

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内置的常用样式变量

解读 pages.json

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

案例练习

效果预览
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

参考代码

{
  // 页面路由
  "pages": [
    {
      "path": "pages/index/index",
      // 页面样式配置
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/my/my",
      "style": {
        "navigationBarTitleText": "我的"
      }
    }
  ],
  // 全局样式配置
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#27BA9B",
    "backgroundColor": "#F8F8F8"
  },
  // tabBar 配置
  "tabBar": {
    "selectedColor": "#27BA9B",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "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"
      }
    ]
  }
}

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

开发区别

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 等

其他区别补充

  1. 调用接口能力，建议前缀 wx 替换为 uni ，养成好习惯，支持多端开发。
  2. <style> 页面样式不需要写 scoped，小程序是多页面应用，页面样式自动隔离。
  3. 生命周期分三部分：应用生命周期(小程序)，页面生命周期(小程序)，组件生命周期(Vue)

案例练习

主要功能

  1. 滑动轮播图
  2. 点击大图预览

效果预览
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

参考代码

<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',
        },
        {
          id: '4',
          url: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_4.jpg',
        },
        {
          id: '5',
          url: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_5.jpg',
        },
      ],
    }
  },
  methods: {
    onPreviewImage(url) {
      // 大图预览
      uni.previewImage({
        urls: this.pictures.map((v) => v.url),
        current: url,
      })
    },
  },
}
</script>

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

命令行创建 uni-app 项目

优势

通过命令行创建 uni-app 项目，不必依赖 HBuilderX，TypeScript 类型支持友好。

命令行创建 uni-app 项目：

vue3 + ts 版

::: code-group

# 通过 npx 从 github 下载
npx degit dcloudio/uni-preset-vue#vite-ts 项目名称

# 通过 git 从 gitee 克隆下载 (👉备用地址)
git clone -b vite-ts https://gitee.com/dcloud/uni-preset-vue.git

:::

创建其他版本可查看：uni-app 官网

::: danger 常见问题

  • 运行 npx 命令下载失败，请尝试换成手机热点重试
  • 换手机热点依旧失败，请尝试从国内备用地址下载
  • 在 manifest.json 文件添加 小程序 AppID 用于真机预览
  • 运行 npx 命令需依赖 NodeJS 环境，NodeJS 下载地址
  • 运行 git 命令需依赖 Git 环境，Git 下载地址

:::

编译和运行 uni-app 项目

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

::: tip 温馨提示
编译成 H5 端可运行 pnpm dev:h5 通过浏览器预览项目。
:::

用 VS Code 开发 uni-app 项目

为什么选择 VS Code？

  • VS Code 对 TS 类型支持友好，前端开发者主流的编辑器
  • HbuilderX 对 TS 类型支持暂不完善，期待官方完善 👀

用 VS Code 开发配置

  • 👉 前置工作：安装 Vue3 插件，点击查看官方文档
    • 安装 Vue Language Features (Volar) ：Vue3 语法提示插件
    • 安装 TypeScript Vue Plugin (Volar) ：Vue3+TS 插件
    • 工作区禁用 Vue2 的 Vetur 插件(Vue3 插件和 Vue2 冲突)
    • 工作区禁用 @builtin typescript 插件（禁用后开启 Vue3 的 TS 托管模式）
  • 👉 安装 uni-app 开发插件
    • uni-create-view ：快速创建 uni-app 页面
    • uni-helper uni-app ：代码提示
    • uniapp 小程序扩展 ：鼠标悬停查文档
  • 👉 TS 类型校验
    • 安装 类型声明文件 pnpm i -D miniprogram-api-typings @uni-helper/uni-app-types
    • 配置 tsconfig.json
  • 👉 JSON 注释问题
    • 设置文件关联，把 manifest.json 和 pages.json 设置为 jsonc

tsconfig.json 参考

// tsconfig.json
{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    // 类型声明文件
    "types": [
      "@dcloudio/types", // uni-app API 类型
      "miniprogram-api-typings", // 原生微信小程序类型
      "@uni-helper/uni-app-types" // uni-app 组件类型
    ]
  },
  // vue 编译器类型，校验标签类型
  "vueCompilerOptions": {
    // 原配置 `experimentalRuntimeMode` 现调整为 `nativeTags`
    "nativeTags": ["block", "component", "template", "slot"], // [!code ++]
    "experimentalRuntimeMode": "runtime-uni-app" // [!code --]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

工作区设置参考

// .vscode/settings.json
{
  // 在保存时格式化文件
  "editor.formatOnSave": true,
  // 文件格式化配置
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 配置语言的文件关联
  "files.associations": {
    "pages.json": "jsonc", // pages.json 可以写注释
    "manifest.json": "jsonc" // manifest.json 可以写注释
  }
}

::: danger 版本升级

  • 原依赖 @types/wechat-miniprogram 现调整为 miniprogram-api-typings。
  • 原配置 experimentalRuntimeMode 现调整为 nativeTags。

:::

这一步处理很关键，否则 TS 项目无法校验组件属性类型。

开发工具回顾

选择自己习惯的编辑器开发 uni-app 项目即可。

HbuilderX 和 微信开发者工具 关系
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

VS Code 和 微信开发者工具 关系
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

用 VS Code 开发课后练习

使用 VS Code 编辑器写代码，实现 tabBar 案例 + 轮播图案例。

::: tip 温馨提示

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

:::

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

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

相关文章

Kubernetes实战(八)-防止k8s namespace被误删除

Kubernetes实战(八)-防止k8s namespace被误删除

1 背景 运维新同学在预发环境操作删除pod的时候&#xff0c;不知道什么原因把kubectl delete pod命令敲成了kubectl delete ns pre把预发环境删了&#xff0c;几十个模块&#xff0c;将近一个小时才恢复。幸亏是测试环境啊&#xff0c;如果是生产可以可以跑路了。 2 解决方案…
阅读更多...
Thymeleaf生成pdf表格合并单元格描边不显示

Thymeleaf生成pdf表格合并单元格描边不显示

生成pdf后左侧第一列的右描边不显示&#xff0c;但是html显示正常 显示异常时描边的写法 cellpadding“0” cellspacing“0” &#xff0c;td,th描边 .self-table{border:1px solid #000;border-collapse: collapse;width:100%}.self-table th{font-size:12px;border:1px sol…
阅读更多...
关于物联网仪表ADW300 远传电表的详细介绍-安科瑞 蒋静

关于物联网仪表ADW300 远传电表的详细介绍-安科瑞 蒋静

1概述 ADW300无线计量仪表主要用于计量低压网络的三相有功电能&#xff0c;具有体积小、精度高、功能丰富等优点&#xff0c;并且可选通讯方式多&#xff0c;可支持 RS485 通讯和 Lora、NB、4G、wifi 等无线通讯方式&#xff0c;增加了外置互感器的电流采样模式&#xff0c;从而…
阅读更多...
postman实现接口自动化图解步骤，测试用例集，断言，动态参数，全局变量的随笔记录

postman实现接口自动化图解步骤，测试用例集，断言，动态参数，全局变量的随笔记录

实现接口自动化的方式有很多种&#xff0c;requests unittest ddt 的接口自动化框架有些朋友也有接触&#xff0c;但是考虑到很多没有代码基础&#xff0c;且这种框架实现需要的时间周期比较长&#xff0c;但是大多数公司的项目时间并不充裕。 这篇随笔主要就是记录实现效率…
阅读更多...
CentOS系统下配置HTTP服务器的步骤

CentOS系统下配置HTTP服务器的步骤

在CentOS系统下配置HTTP服务器涉及到一系列的步骤。以下是一个基本的步骤概述&#xff0c;帮助你了解如何为CentOS系统配置HTTP服务器。 安装HTTP服务器软件&#xff1a; 首先&#xff0c;你需要在CentOS系统上安装HTTP服务器软件。常见的选择是Apache HTTP服务器。你可以使用…
阅读更多...
SDN随笔

SDN随笔

SDN不支持跨厂商 vxlan有1600万个&#xff0c;随便用 openstack来通过sdn来管理网络 网络架构 openflow很激进&#xff0c;用的很少 华为解决方案 推动网络设备的自动化配发 网络流量与路径优化
阅读更多...
科普小知识-3D 打印是什么？

科普小知识-3D 打印是什么？

3D 打印是什么&#xff1f;作为近年来备受关注的前沿科技&#xff0c;3D 打印技术正在不断改变着制造业、医疗领域、艺术设计等多个领域的面貌。其又被称为增材制造&#xff0c;是一种通过电脑设计&#xff0c;逐层堆叠材料来创建三维物体的技术。 3D 打印的基本原理 3D 打印…
阅读更多...
智能优化算法应用：基于北方苍鹰算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于北方苍鹰算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于北方苍鹰算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于北方苍鹰算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.北方苍鹰算法4.实验参数设定5.算法结果6.参考…
阅读更多...
Qt11.7

Qt11.7

登录窗口的应用场景&#xff0c;实现一个登录窗口界面 头文件&#xff1a; #ifndef AIKUN_H #define AIKUN_H#include <QWidget> #include <QIcon> //图标类 #include <QMovie> //动图类 #include <QLabel> //标签类 #include <QLineEdit> …
阅读更多...
dockers安装rabbitmq

dockers安装rabbitmq

RabbitMQ: easy to use, flexible messaging and streaming — RabbitMQhttps://www.rabbitmq.com/ Downloading and Installing RabbitMQ — RabbitMQ docker run -it --rm --name rabbitmq -p 5672:5672 -p 15672:15672 rabbitmq:3.12-management 之后参照&#xff1a;dock…
阅读更多...
HTTP、HTTPS、SSL协议以及报文讲解

HTTP、HTTPS、SSL协议以及报文讲解

目录 HTTP/HTTPS介绍 HTTP/HTTPS基本信息 HTTP请求与应答报文 HTTP请求报文 HTTP响应报文 SSL协议 SSL单向认证 SSL双向认证 HTTP连接建立与传输步骤 HTTP访问全过程相关报文&#xff08;以访问www.download.cucdccom为例子&#xff09; DNS报文解析 TCP三次握手连…
阅读更多...
智能配电监控系统

智能配电监控系统

智能配电监控系统是针对供配电系统中的变配电环节&#xff0c;利用现代计算机控制技术、通信技术和网络技术等&#xff0c;采用抗干扰能力强的通讯设备及智能电力仪表&#xff0c;经电力监控管理软件组态&#xff0c;实现的系统的监控和管理。依托电易云-智慧电力物联网&#x…
阅读更多...
生成式人工智能笔记-AIGC笔记

生成式人工智能笔记-AIGC笔记

生成式人工智能笔记-AIGC笔记 十多年前&#xff0c;人工智能还只是一个不被人看好的小众领域&#xff0c;但是现在&#xff0c;它却已经成了街头巷尾的热点谈资&#xff0c;几乎任何事情都可以和人工智能联系在一起。 人工智能包括基础层、技术层和应用层。 基础层是人工智能…
阅读更多...
数字营销影响消费者行为的 6 种方式

数字营销影响消费者行为的 6 种方式

如果您正在考虑转向在线市场&#xff0c;那么这个决定就好了&#xff01;没有什么比数字营销更强大的了。但是&#xff0c;在开始之前&#xff0c;请了解数字营销如何影响消费者行为。由于客户是任何企业的基石&#xff0c;因此跟踪消费者行为至关重要。 数据分析在识别潜在客…
阅读更多...
LeetCode力扣每日一题（Java）：20、有效的括号

LeetCode力扣每日一题（Java）：20、有效的括号

一、题目 二、解题思路 1、我的思路 我看到题目之后&#xff0c;想着这可能是力扣里唯一一道我能秒杀的题目了 于是一波操作猛如虎写出了如下代码 public boolean isValid(String s) {char[] c s.toCharArray();for(int i0;i<c.length;i){switch (c[i]){case (:if(c[i]…
阅读更多...
Git 配置文件（.gitignore）

Git 配置文件（.gitignore）

前言 在使用 Git 分布式版本控制系统的时候&#xff0c;有些文件如&#xff1a;数据库的一些配置文件&#xff0c;我们不想让这类文件在远程仓库让 Git 来管理&#xff0c;不想让别人看到&#xff0c;此时就可以自己在 Git 仓库目录下创建 / 在远程仓库创建的时候就配置好 .git…
阅读更多...
【从零开始学习JVM | 第五篇】快速了解运行时数据区

【从零开始学习JVM | 第五篇】快速了解运行时数据区

前言&#xff1a; 当谈论 Java 程序的运行机制时&#xff0c;JVM&#xff08;Java 虚拟机&#xff09;的运行时数据区是一个必不可少的话题。JVM 运行时数据区是 Java 程序在运行过程中分配内存和管理数据的重要区域&#xff0c;它包括了方法区、堆、虚拟机栈、程序计数器和本地…
阅读更多...
TA-Lib学习研究笔记（九）——Pattern Recognition （4）

TA-Lib学习研究笔记（九）——Pattern Recognition （4）

TA-Lib学习研究笔记&#xff08;九&#xff09;——Pattern Recognition &#xff08;4&#xff09; 最全面的形态识别的函数的应用&#xff0c;通过使用A股实际的数据&#xff0c;验证形态识别函数&#xff0c;用K线显示出现标志的形态走势&#xff0c;由于入口参数基本上是o…
阅读更多...
js/jQuery常见操作 之 jQuery操作复选框的常见问题

js/jQuery常见操作 之 jQuery操作复选框的常见问题

js/jQuery常见操作 之 jQuery操作复选框的常见问题 1. js/jQuery的其他一些常见基础操作2. 全选/全不选问题2.1 效果2.2 实现代码2.2.1 简单js实现2.2.2 jQuery实现2.2.2.1 注意语法&#xff08;区别jQuery版本&#xff09;2.2.2.2 完整代码实现 3. jQuery实现点击 行tr 实现ch…
阅读更多...
【GAMES101】三维变换

【GAMES101】三维变换

games101的第四节课讲了三维变换和观察变换&#xff0c;我们这里先记录一下三维变换的知识&#xff0c;后面再讲观察变换 齐次坐标下的三维变换 类似于解决之前二维变换平移的问题&#xff0c;三维变换下用齐次坐标通过增加一个维度来表示&#xff0c;第四个维度为1表示这是个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023