1. 首页首页
  2. 科技前沿科技前沿

2025年【小程序项目开发 --- 京东商城】 启航篇之uni-app项目搭建

科技前沿 • • 阅读 19

【小程序项目开发 --- 京东商城】 启航篇之uni-app项目搭建个人主页 计算机魔术师 作者简介 CSDN 内容合伙人 全栈领域优质创作者 该文章收录专栏 2022 微信小程序京东商城实战 一 uni app 介绍 uni app 官方文档 从官方文档我们也可以看见

大家好，我是讯享网，很高兴认识大家。

在这里插入图片描述
讯享网

该文章收录专栏
✨ 2022微信小程序京东商城实战 ✨

一、uni-app介绍

uni-app官方文档

在这里插入图片描述

从官方文档我们也可以看见，uni-app是使用vue.js开发的前端应有的框架，他的最大好处就是可以跨平台，这对于开发者来说无疑是优秀的。作为本次开发使用uni-app再好不过了

二、HBuilderX安装

我们这里选择官方推荐HBuilderX 作为uni-app的开发编辑器
安装地址
在这里插入图片描述

  • 因为作为开发版本，有很多好用的插件库，所以这里下载alpha版本，下载好打开即可
    在这里插入图片描述

三、scss/sass 插件下载

安装插件scss/sass 编译（便与编写代码,css样式的超集）
插件下载地址
在这里插入图片描述

四、 HBuilderX自定义快捷键

在这里插入图片描述HBuilderX是有自己的一套快捷键的，此时可以设置为常用的vscode,也可以在设置页面设置字体大小，页面风格等。

五、新建项目

在这里插入图片描述

建立好文件如下：
在这里插入图片描述

重要文件解读

🎏components – uni-app组件目录
🎏pages – 存放页面
🎏static – 静态资源，如图像，视频等
🎏App.vue– App的全局配置文件，生命周期函数等（在小程序中相当于把app.js分成了两个文件,关于app的配置，如生命周期等都在app.vue,其他则在main.js
🎏main.js – uni-app的入口文件
🎏 manifest(显示) – 配置应用信息(例如后面配置到小程序)，logo等
🎏 pages.json – 页面的配置，页面路径，tabbar,页面窗口样式，可以看作小程序开发工具项目中的app.json

六、将建立的文件运行到小程序开发工具

在这里插入图片描述

  • 配置微信开发小程序的安装路径就可以直接在其环境运行

在这里插入图片描述

  • 打开小程序开发工具的端口（为了能在开发工具运行）
    在这里插入图片描述
  • 编辑器运行设置
    在这里插入图片描述
    等待一段时间加载好后，他会自动打开小程序开发工具在这里插入图片描述

配置成功，接下来就可以开始我们的项目了（注：在编辑器敲代码，不能再小程序开发工具敲代码)
在这里插入图片描述

发现的很不错的关于原生小程序的uni-app的区别的文章，建议可以先看看

七、git管理

  • 项目根目录创建忽略文件.gitignore，配置如下
/mode_modules /unpackage/dist

讯享网

重点！：

  • 因为node_modules是安装插件包，是没有必要进行管理的,（如果进行管理，那么再安装新的包时候会增加成千上百条修改记录）
  • dist目录则是我们运行小程序环境编译自动生成的文件。小程序开发工具加载的项目就是dist

在这里插入图片描述

但是在git管理中，unpackeage的dist我们是不想跟踪的，但是unpackage我们是要跟踪的，此时unpackage只有一个dist文件，dist文件被忽略那么unpackage也会被忽略，所以我们要在unpackage中放一个占位的文件.gitkeep(没有任何作用，只做占位，让unpackage被git跟踪）
在这里插入图片描述

  • 初始化本地仓库，打开终端，在当前根目录下运行代码

在这里插入图片描述

  • 创建仓库
讯享网git init

在这里插入图片描述

  • 查看当前文件状态
git status

可以看到全部文件都没有加载到缓存区（红色警告）
在这里插入图片描述

  • 加载到缓存区（.是通配符，全部添加）
讯享网git add .

加载成功
在这里插入图片描述

  • 再次查看状态（恭喜，绿码😉）添加成功，
    在这里插入图片描述
  • 加载到仓库 
git commit -m "注释"

在这里插入图片描述
添加成功

  • 查看状态（成功添加）
    在这里插入图片描述

八、Git托管服务（码云gitee）

建议看文章
【Git】 安装&配置 基础命令 中文乱码 别名 回退与反回退 gitignore配置 练习题 Git托管服务（超详）
【Git 托管服务】（附案例：码云gitee托管）超详

8.1 创建仓库

在这里插入图片描述

8.2 上传项目到码云

在这里插入图片描述
连接仓库

  • 关联 (remote 遥远的，这里指远程仓库， origin 起源的，指仓库地址）
讯享网git remote add origin git@gitee.com:你的域名/仓库名.git

在这里插入图片描述

  • 上传（push 推）
git push -u origin "master"

在这里插入图片描述
上传成功，刷新一下页面
在这里插入图片描述
可以看到代码成功上传！

讯享网 ✨谢谢你的阅读，您的点赞和收藏就是我创造的最大动力！✨
小讯
上一篇 2025-03-18 16:17
下一篇 2025-01-17 08:29

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/19546.html