UniApp 开发微信小程序教程(一):准备工作和环境搭建,项目结构和配置

文章目录

    • 一、准备工作和环境搭建
      • 1. 安装 HBuilderX
        • 步骤:
      • 2. 注册微信开发者账号
        • 步骤:
      • 3. 创建 UniApp 项目
        • 步骤:
    • 二、项目结构和配置
      • 1. UniApp 项目结构
      • 2. 配置微信小程序
        • 修改 `manifest.json`
        • 修改 `pages.json`
      • 3. 添加首页文件
        • `index.vue` 示例:
        • 4. 图示
    • 三、总结

在这里插入图片描述

🎉欢迎来到 Uniapp 开发微信小程序教程专栏~准备工作和环境搭建,项目结构和配置


  • ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹
  • ✨博客主页:IT·陈寒的博客
  • 🎈该系列文章专栏:Java面试技巧
  • 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习
  • 🍹文章作者技术和水平有限,如果文中出现错误,希望大家能指正🙏
  • 📜 欢迎大家关注! ❤️

欢迎来到《UniApp 微信小程序开发指南》的第一篇文章。在这篇文章中,我们将带领你完成 UniApp 开发环境的搭建,并介绍项目的基本结构和配置。无论你是新手还是有一定开发经验,这篇文章都将帮助你顺利开始 UniApp 开发之旅。
在这里插入图片描述

一、准备工作和环境搭建

1. 安装 HBuilderX

HBuilderX 是由 DCloud 推出的用于开发 UniApp 的强大 IDE。它支持 Vue.js,提供了许多实用的功能,极大地提升开发效率。

步骤:
  1. 下载 HBuilderX
    前往 HBuilderX 下载页面 下载适合你操作系统的安装包。

在这里插入图片描述

  1. 安装 HBuilderX
    根据你的操作系统,运行下载的安装包,并按照提示完成安装。

在这里插入图片描述

2. 注册微信开发者账号

在开发微信小程序之前,你需要一个微信开发者账号。

步骤:
  1. 访问微信公众平台
    前往 微信公众平台,点击右上角的“立即注册”。

在这里插入图片描述

  1. 选择账号类型
    选择“小程序”,并按照提示完成注册流程。

在这里插入图片描述

  1. 获取 AppID
    注册完成后,在“开发设置”页面,你可以找到你的小程序 AppID。这个 AppID 将在项目配置中使用。

在这里插入图片描述

3. 创建 UniApp 项目

使用 HBuilderX 创建一个新的 UniApp 项目,这是我们开发小程序的起点。

步骤:
  1. 打开 HBuilderX
    运行 HBuilderX,点击“文件” -> “新建” -> “项目”。

在这里插入图片描述

  1. 选择项目模板
    在弹出的对话框中,选择“uni-app”项目模板。

在这里插入图片描述

  1. 填写项目信息
    输入项目名称、保存路径等信息,确保“创建为标准uni-app项目”被选中,然后点击“创建”。

二、项目结构和配置

1. UniApp 项目结构

一个标准的 UniApp 项目包含以下主要目录和文件:

|-- 项目根目录|-- components          // 存放自定义组件|-- pages               // 存放各个页面|-- index|-- index.vue   // 首页文件|-- static              // 存放静态资源,如图片、样式等|-- unpackage           // 打包输出目录|-- App.vue             // 应用入口文件|-- main.js             // 应用入口文件|-- manifest.json       // 配置文件|-- pages.json          // 页面配置文件|-- uni.scss            // 通用样式文件

在这里插入图片描述

2. 配置微信小程序

修改 manifest.json

manifest.json 文件包含了应用的全局配置,包括应用名称、版本、图标等。对于微信小程序,我们需要在其中添加 AppID 和其他相关配置。

{"name": "your-app-name","appid": "__UNI__XXXXXXX","versionName": "1.0.0","versionCode": "100","uni-app": {"nvueCompiler": "weex","renderer": "auto","usingComponents": true},"mp-weixin": {"appid": "your-wechat-appid",  // 替换为你的微信小程序 AppID"setting": {"urlCheck": false}}
}

在这里插入图片描述

修改 pages.json

pages.json 文件用于配置页面路径、窗口风格、底部导航等。一个简单的配置示例如下:

在这里插入图片描述

{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "UniApp","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"}
}

3. 添加首页文件

pages/index 目录下,我们已经有了一个 index.vue 文件。你可以在这个文件中添加你的首页内容。

在这里插入图片描述

index.vue 示例:
<template><view class="content"><text class="title">欢迎来到 UniApp 微信小程序开发!</text></view>
</template><script>
export default {data() {return {message: 'Hello UniApp'}}
}
</script><style scoped>
.content {display: flex;align-items: center;justify-content: center;height: 100vh;background-color: #fff;
}
.title {font-size: 20px;color: #333;
}
</style>
4. 图示

运行到浏览器,就可以看到当前首页的效果啦

在这里插入图片描述
就是这个样子:(下一期带大家安装微信开发者工具,小程序开发更便捷)

在这里插入图片描述

三、总结

通过本篇文章,你已经完成了 UniApp 开发环境的搭建,了解了项目的基本结构,并进行了初步的配置。在接下来的文章中,我们将深入探索页面设计、数据管理和接口调用等关键技术,帮助你一步步掌握 UniApp 微信小程序开发的核心技能。

如果你有任何问题或建议,欢迎在评论区留言。让我们一起进入 UniApp 开发的精彩世界!


🧸结尾 ❤️ 感谢您的支持和鼓励! 😊🙏
📜您可能感兴趣的内容:

  • 【Java面试技巧】Java面试八股文 - 掌握面试必备知识(目录篇)
  • 【Java学习路线】2023年完整版Java学习路线图
  • 【AIGC人工智能】Chat GPT是什么,初学者怎么使用Chat GPT,需要注意些什么
  • 【Java实战项目】SpringBoot+SSM实战:打造高效便捷的企业级Java外卖订购系统
  • 【数据结构学习】从零起步:学习数据结构的完整路径

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux rocky9.2系统搭建sqle数据库审核平台

文章目录 前言一、环境准备?二、开始部署前言 关于SQLE SQLE 是由上海爱可生信息技术股份有限公司 开发并开源,支持SQL审核、索引优化、事前审核、事后审核、支持标准化上线流程、原生支持 MySQL 审核且数据库类型可扩展的 SQL 审核工具。 产品特色 支持通过插件的形式扩展…

14-6 小型语言模型在商业应用中的使用指南

人工智能 (AI) 在商业领域的发展使众多工具和技术成为人们关注的焦点&#xff0c;其中之一就是语言模型。这些大小和复杂程度各异的模型为增强业务运营、客户互动和内容生成开辟了新途径。本指南重点介绍小型语言模型、它们的优势、实际用例以及企业如何有效利用它们。 基础知识…

2小时动手学习扩散模型(pytorch版)【入门版】【代码讲解】

2小时动手学习扩散模型&#xff08;pytorch版&#xff09; 课程地址 2小时动手学习扩散模型&#xff08;pytorch版&#xff09; 课程目标 给零基础同学快速了解扩散模型的核心模块&#xff0c;有个整体框架的理解。知道扩散模型的改进和设计的核心模块。 课程特色&#xf…

边缘计算VNC智能盒子如何助力HMI设备实现二次开发?

HMI&#xff08;Human-Machine Interface&#xff09;又称人机界面&#xff0c;是用户与机器之间交互和通信的媒介。今天带你了解智能盒子如何助力HMI设备实现二次开发&#xff1f; HMI设备被广泛应用在工业自动化中&#xff0c;具有显示设备信息&#xff0c;实时监测&#xf…

Dev++软件连接Sqlite

Dev中的C语言使用连接sqlite数据库 1.下载sqlite3.dll和sqlite3.h sqlite3.dll类似于.c文件&#xff0c;封装了函数的原型。 sqlite3.h库文件声明函数。 官网地址下载&#xff1a;sqlite sqlite-amalgamation-3460000.zipsqlite-dll-win-x64-3460000.zip 2.新建c项目 1. …

CSS|05 继承性与优先级

继承性 一、继承性的特点&#xff1a; 1.外层元素身上的样式会被内层元素所继承 2.如果内层元素与外层元素身上的演示相同时&#xff0c;外层元素的样式会被内层元素所覆盖 二、关于继承性的问题 是不是所有样式都能被继承&#xff1f; 答&#xff1a;并不是所有样式能被继承…

Kubernetes 中 ElasticSearch 中的 MinIO 审核日志

无论您是在本地还是在云中&#xff0c;您都希望确保以同构的方式设置工具和流程。无论在何处访问基础结构&#xff0c;您都希望确保用于与各种基础结构进行交互的工具与其他区域相似。 考虑到这一点&#xff0c;在部署您自己的 MinIO 对象存储基础架构时&#xff0c;深入了解您…

PS-抠图

在一个图片中&#xff0c;当你单独用到一个人物&#xff0c;或者物品的时候&#xff0c;你可以选择抠图&#xff0c;单独把这个人物模型给扣下来&#xff0c;不要他的背景&#xff0c;不要其他物品。 在PS中&#xff0c;我们看到一个大熊猫&#xff0c;当我们想用到这个熊猫的…

flutter开发实战-ListWheelScrollView与自定义TimePicker时间选择器

flutter开发实战-ListWheelScrollView与自定义TimePicker 最近在使用时间选择器的时候&#xff0c;需要自定义一个TimePicker效果&#xff0c;当然这里就使用了ListWheelScrollView。ListWheelScrollView与ListView类似&#xff0c;但ListWheelScrollView渲染效果类似滚筒效果…

【数据结构】计数排序等排序

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &#x1f4e2;本文由 JohnKi 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f4e2;未来很长&#…

2024国际数字能源展,推动全球能源产业转型升级和可持续发展

随着全球对能源安全和可持续发展的日益关注&#xff0c;数字能源技术作为推动能源革命的重要力量&#xff0c;正逐步成为国际能源领域的新热点。2023年6月29日至7月2日&#xff0c;深圳会展中心成功举办了全球首个以数字能源为主题的2023国际数字能源展&#xff0c;这一盛会的成…

音视频基础

音视频基础 一、音视频录制原理二、音视频播放原理三、图像表示RGB-YUVV1.图像基础概念1.1 像素1.2 分辨率1.3 位深1.4 帧率1.5 码率1.6 Stride跨距 2.RGB、YUV深入讲解2.1 RGB2.2 YUV2.2.1 YUV采样表示法2.2.2 YUV数据存储 2.3 RGB和YUV的转换(了解)为什么解码出错显示绿屏&am…

stm32cubemx,adc采样的几种方总结,触发获取adc值的方法dma timer trigger中断

stm32cubemx adc采样的几种方总结&#xff0c;触发获取adc值的方法 timer trigger中断 方法1&#xff0c;软件触发方法2&#xff1a;,Timer触发ADC采集通过DMA搬运 触发获取adc值的方法 Regular Conversion launched by software 软件触发 调用函数即可触发ADC转换 Timer X Cap…

STM32 HAL库 外部中断 实现按键控制LED亮灭

目录 1、为什么使用GPIO外部中断控制LED亮灭&#xff1f; 2、NVIC嵌套向量中断控制器 3、EXTI外部中断 4、项目的硬件排线 5、STM32CUBE_MX配置 6、HAL库代码 7、实际效果 1、为什么使用GPIO外部中断控制LED亮灭&#xff1f; 实现LED亮灭控制有很多方式&#xff0c;其中…

前端开源项目Vuejs:让前端开发如虎添翼!

文章目录 引言一、Vue.js的优势二、Vue.js实战技巧三、Vue.js社区与资源结语 引言 在前端开发的世界里&#xff0c;Vue.js凭借其简洁、轻量且功能强大的特性&#xff0c;逐渐崭露头角&#xff0c;成为众多开发者心中的首选框架。 一、Vue.js的优势 Vuejs项目地址 Vue.js之…

什么是GPIO口,GPIO口最简单的input/output

目录 一&#xff0c;什么是GPIO口 二&#xff0c;GPIO内部结构 三&#xff0c;GPIO口工作模式 一&#xff0c;什么是GPIO口 1.GPIO口是通用输入输出端口&#xff08;General-purpose input/output&#xff09;的英文缩写&#xff0c;是所有的微控制器必不可少的外设之一&…

AVI 是什么格式,AVI 格式用什么播放器打开?

AVI 是什么格式&#xff1f;提到 AVI 格式想必大家多数会想到在 DVD 横行的年代&#xff0c;光盘中所包含的媒体视频格式多是以 AVI 格式存储。AVI 是一个非常通用的容器格式&#xff0c;支持多种视频和音频编解码器。这意味着从DVD中提取视频内容时&#xff0c;可以通过转码为…

浅谈交换机

这篇文章和大家分享一下交换机的通信原理 在说交换机前&#xff0c;首先要了解几个网络知识&#xff1a;到现在为止IP地址分为IPv4和IPv6&#xff0c;IPv4是由32位二进制组成&#xff0c;IPv6则由128位二进制组成&#xff0c;计算机的底层代码其实就是二进制 例如&#xff1a;1…

72V转12V非隔离DC/DC电源原理图+PCB源文件

资料下载地址&#xff1a;72V转12V非隔离DCDC电源原理图PCB源文件 电动车所用的非隔离DC/DC电源&#xff0c;采用BUCK电路&#xff0c;运行稳定&#xff0c;为已经在产品中使用的电路 1、原理图 2、PCB

使用Flink CDC实时监控MySQL数据库变更

在现代数据架构中&#xff0c;实时数据处理变得越来越重要。Flink CDC&#xff08;Change Data Capture&#xff09;是一种强大的工具&#xff0c;可以帮助我们实时捕获数据库的变更&#xff0c;并进行处理。本文将介绍如何使用Flink CDC从MySQL数据库中读取变更数据&#xff0…