jjzjj

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

计算机魔术师 2023-07-13 原文

🤵‍♂️ 个人主页: @计算机魔术师
👨‍💻 作者简介:CSDN内容合伙人,全栈领域优质创作者。

🌐 推荐一款找工作神器网站: 点击跳转牛客网 |笔试题库|面试经验|实习招聘内推|

还没有账户的小伙伴 速速点击链接登录注册把!🎉🎉

该文章收录专栏
✨ 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管理

注:需要安装git文件,安装配置以及入门掌握见(必看文章)
【Git】 安装&配置 常用命令 中文乱码 别名 回退与反回退 gitignore配置 练习题(超详)

  • 项目根目录创建忽略文件.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"


上传成功,刷新一下页面

可以看到代码成功上传!

  ✨谢谢你的阅读,您的点赞和收藏就是我创造的最大动力!✨

有关【小程序项目开发 --- 京东商城】 启航篇之uni-app项目搭建的更多相关文章

  1. ruby - 如何在 buildr 项目中使用 Ruby 代码? - 2

    如何在buildr项目中使用Ruby?我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序,我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/),但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻,因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  2. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0,我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时,我通过运行railss并访问localhost:3000确保该应用程序正常运行以前,我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后,由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0,此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  3. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

  4. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样?我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用,需要1秒才能返回,我有100,000多个页面要访问,所以我试图运行多个线程来解决这个问题。有更好的方法吗?classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  5. ruby-on-rails - 每次我尝试部署时,我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手,我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目,而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  6. ruby-on-rails - 如何重命名或移动 Rails 的 README_FOR_APP - 2

    当我在我的Rails应用程序根目录中运行rakedoc:app时,API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名,以便它在GitHub上正确呈现。更好的是,我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作?是否有某个地方可以查找可以修改的主页文件的名称?还是我必须编写一个新的Rake任务?额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么?为什么不只有一个?

  7. Ruby 从大范围中获取第 n 个项目 - 2

    假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目? 最佳答案 一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做,或者如果你需要避免为前N个元素构建中间数组,你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit

  8. ruby - 使用 postgres.app 在 rvm 下要求 pg 时出错 - 2

    我正在使用Postgres.app在OSX(10.8.3)上。我已经修改了我的PATH,以便应用程序的bin文件夹位于所有其他文件夹之前。Rammy:~phrogz$whichpg_config/Applications/Postgres.app/Contents/MacOS/bin/pg_config我已经安装了rvm并且可以毫无错误地安装pggem,但是当我需要它时我得到一个错误:Rammy:~phrogz$gem-v1.8.25Rammy:~phrogz$geminstallpgFetching:pg-0.15.1.gem(100%)Buildingnativeextension

  9. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  10. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

随机推荐