Uniapp - 环境搭建 vscode开发

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 唤起代码提示。

:::

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Demystifying DeFi MEV Activities in Flashbots Bundle

Demystifying DeFi MEV Activities in Flashbots Bundle

目录 笔记后续的研究方向摘要引言贡献 Demystifying DeFi MEV Activities in Flashbots Bundle CCS 2023 笔记 本文介绍了对 Flashbots 捆绑包中的去中心化金融 &#xff08;DeFi&#xff09; 矿工可提取价值 &#xff08;MEV&#xff09; 活动的研究。作者开发了ActLifter&am…
阅读更多...
SiC SBD/超结MOS在工业电源上的应用-REASUNOS瑞森半导体

SiC SBD/超结MOS在工业电源上的应用-REASUNOS瑞森半导体

一、前言 工业电源是指用于工业及相关领域中的电子设备与设施的电源系统&#xff0c;其重要性体现在为各类工业设备提供稳定的电力保障&#xff0c;维护设备正常运行&#xff0c;故需具有稳定可靠、高效节能、安全耐用等特点。 常见的工业电源类型包括&#xff1a;交流电源、…
阅读更多...
优优聚：美团外卖，领跑外卖市场，打造全新就餐体验

优优聚：美团外卖，领跑外卖市场，打造全新就餐体验

随着互联网的快速发展&#xff0c;外卖行业逐渐崛起&#xff0c;成为了人们日常生活中不可或缺的一部分。作为中国最大的外卖平台之一&#xff0c;美团外卖凭借其卓越的服务和不断创新的精神&#xff0c;成为了市场的领导者。本文将详细分析美团外卖的发展现状以及其未来的发展…
阅读更多...
使用cmake构建的工程的编译方法

使用cmake构建的工程的编译方法

1、克隆项目工程 2、进入到工程目录 3、执行 mkdir build && cd build 4、执行 cmake .. 5、执行 make 执行以上步骤即可完成对cmake编写的工程进行编译 &#xff0c;后面只需执行你的编译结果即可 $ git clone 你想要克隆的代码路径 $ cd 代码文件夹 $ mkdir bu…
阅读更多...
年入百万的知识付费网站如何搭建：如何以低成本实现高转化？

年入百万的知识付费网站如何搭建：如何以低成本实现高转化？

我有才知识付费平台 一、引言 随着知识经济的崛起&#xff0c;越来越多的知识提供者希望搭建自己的知识付费平台。然而&#xff0c;对于新手来说&#xff0c;如何以低成本、高效率地实现这一目标&#xff0c;同时满足自身需求并提高客户转化率&#xff0c;是一大挑战。本文将…
阅读更多...
服务器GPU占用，kill -9 PID 用不了，解决办法

服务器GPU占用，kill -9 PID 用不了，解决办法

PID&#xff08;progress ID 进程ID&#xff09; 上图为占用情况&#xff0c;使用下面的指令都不管用 kill -9 PID kill -15 PID # 加入sudo 还是不行 # 等等网上的 chatgpt 提供的其他办法&#xff0c;一圈试了下来还是不管用最后解决办法 首先用下面的指令查看进程的树结构…
阅读更多...
Linux基础命令-期末复习

Linux基础命令-期末复习

目录 一、Linux文件和目录 1.mkdir创建目录 2.ls列出目录 3.pwd显示当前所在目录 4.cd切换目录 5.rmdir删除空的目录 6.rm删除文件或目录 7.touch创建文件 8.cp复制文件或目录 1.把文件从该目录复制到下一级目录中去 2.把文件从该目录复制到上一级目录中去 3.把文件…
阅读更多...
第十四章 ： Spring Boot 整合spring-session,使用redis共享

第十四章 ： Spring Boot 整合spring-session,使用redis共享

第十四章 &#xff1a; Spring Boot 整合spring-session,使用redis共享 前沿 本文重点讲述&#xff1a;spring boot工程中使用spring-session机制进行安全认证&#xff0c;并且通过redis存储session&#xff0c;满足集群部署、分布式系统的session共享。 基于SPringBoot 2.3.2…
阅读更多...
大数据讲课笔记1.2 Linux用户操作

大数据讲课笔记1.2 Linux用户操作

文章目录 零、学习目标一、导入新课二、新课讲解&#xff08;一&#xff09;用户账号管理1、用户与用户组文件2、用户账号管理工作 &#xff08;二&#xff09;用户操作1、切换用户&#xff08;1&#xff09;语法格式&#xff08;2&#xff09;切换到普通用户&#xff08;3&…
阅读更多...
HarmonyOS4.0从零开始的开发教程11给您的应用添加弹窗

HarmonyOS4.0从零开始的开发教程11给您的应用添加弹窗

HarmonyOS&#xff08;十&#xff09;给您的应用添加弹窗 概述 在我们日常使用应用的时候&#xff0c;可能会进行一些敏感的操作&#xff0c;比如删除联系人&#xff0c;这时候我们给应用添加弹窗来提示用户是否需要执行该操作&#xff0c;如下图所示&#xff1a; 弹窗是一种…
阅读更多...
mysql面试题——日志

mysql面试题——日志

一&#xff1a;为什么需要REDO日志 缓冲池可以帮助我们消除CPU和磁盘之间的鸿沟&#xff0c;checkpoint机制可以保证数据的最终落盘&#xff0c;然而由于checkpoint 并不是每次变更的时候就触发 的&#xff0c;而是master线程隔一段时间去处理的。所以最坏的情况就是事务提交后…
阅读更多...
GLAB | CCNA+HCIA=融合课-最新开课通知

GLAB | CCNA+HCIA=融合课-最新开课通知

敲重点! 12月17日 CCNAHCIA 周日开课啦&#xff01; CCNA&#xff08;Cisco Certified Network Associate&#xff09;认证是Cisco售后工程师认证体系的入门认证&#xff0c;也是Cisco各项认证中级别最低的技术认证通过CCNA认证可证明你已掌握网络的基本知识&#xff0c;并能…
阅读更多...
DL Homework 9

DL Homework 9

目录 1 知识总结 1.1 给网络增加短期的记忆能力 1.2 有外部输入的非线性自回归模型 1.3 循环神经网络 2.1 简单循环神经网络 2.1.1 循环神经网络的通用近似定理 2.1.2 图灵完备 3.1 序列到类别 3.2 同步的序列到序列模式 3.3 异步的序列到序列模式 2.Homework 1. 实现SRN &am…
阅读更多...
JavaScript ＜关于逆向RSA非对称加密算法的案例(附原代码)＞--案例(五)

JavaScript ＜关于逆向RSA非对称加密算法的案例(附原代码)＞--案例(五)

前言: 趁热打铁,标记一下RSA的算法逆向...第二篇会有详解(本篇重在过程) 正文: 废话不说,直接分析步骤图: 到了这里,可以看到在登录的时候,需要验证码(本篇不教反验证码) 下面是正题--->逆他的pwd(密码) 总结: 问题:怎么确定一个密文数据是基于什么算法做出来的呢? 答:…
阅读更多...
【MYSQL】单表查询

【MYSQL】单表查询

查询语法&#xff1a; select 字段&#xff08;*表示全字段&#xff09; from 数据表 【where 条件表达式】 【group by 分组字段【having 分组条件表达式】】 【order by 排序字段【asc | desc】】 例子&#xff1a; 教职工表Teacher(Tno, TName, age, sal, mgr, DNo)&#…
阅读更多...
智能优化算法应用：基于多元宇宙算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于多元宇宙算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于多元宇宙算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于多元宇宙算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.多元宇宙算法4.实验参数设定5.算法结果6.…
阅读更多...
匿名内部类 - ( 零基础学java )

匿名内部类 - ( 零基础学java )

Java-匿名内部类 我们先分析匿名内部类的结构,然后逐一解释,最后以下罗列的问题都会在下面的内容中一一得到解答 : 匿名内部类到底是什么? 我们为什么要学习匿名内部类 ? 匿名内部类都有怎样的作用 ? 匿名内部类应用的场景又有哪些 ? 匿名内部类是否有缺陷? 让我们…
阅读更多...
基于SSM的教师上课系统

基于SSM的教师上课系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…
阅读更多...
基于以太坊的智能合约开发Solidity（基础篇）

基于以太坊的智能合约开发Solidity（基础篇）

参考教程&#xff1a;基于以太坊的智能合约开发教程【Solidity】_哔哩哔哩_bilibili 1、第一个程序——Helloworld&#xff1a; //声明版本号&#xff08;程序中的版本号要和编译器版本号一致&#xff09; pragma solidity ^0.5.17; //合约 contract HelloWorld {//合约属性变…
阅读更多...
一些AG10K FPGA 调试的建议-Douglas

一些AG10K FPGA 调试的建议-Douglas

PLL AGM FPGA 在配置成功时&#xff0c;PLL 已经完成锁定&#xff0c;lock 信号已经变高&#xff1b;如果原设计中用 lock 信号输出实现系统 reset 的复位功能&#xff0c;就不能正确完成上电复位&#xff1b;同时&#xff0c;为了保证 PLL 相移的稳定&#xff0c;我们需要在 P…
阅读更多...
最新文章

Copyright @ 2022~2023