【微信小程序】-- uni-app 项目创建 & 目录结构讲解(四十九)

简介: 【微信小程序】-- uni-app 项目创建 & 目录结构讲解(四十九)



一、 新建 uni-app 项目

  前面已经介绍了uni-app 的工具 HBuilderX 下载安装过程,以及开发环境是怎么如何配置,其中还学习 sass 插件的安装。接下来就来讲解一下uni-app 项目的创建 & 目录结构讲解。话不多说,让我们原文再续,书接上回吧。

  打开 HBuilderX 工具,这里的版本是 3.7.3,发 找到左上方的选项,文件 -> 新建 -> 项目

  填写项目基本信息,选择 uni-app 项目 --> 填写好项目名称和路径之后 --> 选择 uni-app项目 模板(这里也可以选择默认项目) --> 这里 vue 版本是选择最新版本 --> 可以选择是否上传到 GitCode 代码托管平台 --> 点击创建就完事了。(由于这里使用最新版本的 HBuilderX ,所以创建过程会网上的一些老版本的有区别

  项目创建成功,就能看到该项目的目录结构了,接下来简单学习一下各个结构的作用。

二、 目录结构

  前面创建了一个 uni-app 项目,默认包含如下目录及文件,下面就对一些简单结构做讲解:

┌─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─uni_modules           uni内置模块
├─main.js               Vue初始化入口文件
├─App.vue               应用配置,用来配置小程序的全局样式、生命周期函数等
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息

三、把项目运行到微信开发者工具

1、配置 AppID

  在实际开发过程中,可以把 HBuilderX 创建的项目运行到指定开发者工具上。想要将项目运行到微信开发者工具上,需要对项目里的 manifest.json 进行环境配置,找到微信小程序配置,填写自己的微信小程序的 AppID 即可:

2、配置安装路径

  在 HBuilderX 中,配置 “微信开发者工具” 的安装路径,操作步骤: 工具 --> 设置 --> 运行配置 --> 小程序运行配置,微信开发者工具路径

3、配置服务端口

  在微信开发者工具中,通过 设置 -> 安全设置 面板,开启“微信开发者工具”的服务端口:

4、运行项目

  在 HBuilderX 中,点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具 ,将当前 uni-app 项目编译之后,自动运行到微信开发者工具中,从而方便查看项目效果与调试:

  第一次运行的话,可能会缺很多插件,不过都没关系,都会自动下载并安装的,

  初次运行成功之后的项目效果(会有一下警告):

  如果不想看到这个警告,需要打 HBuilder X 项目里的 App.vue 文件,把里面 console.warn 删除或者注释即可。

当前组件仅支持 uni_modules 目录结构 ,请升级 HBuilderX 到 3.1.0 版本以上!

  如果是使用灰度中的基础库,也会报警告,这时候打开微信开发者工具,工具栏–>详情–>本地设置更改基础库版本。

[基础库] 正在使用灰度中的基础库 2.30.3 进行调试。如有问题,请前往工具栏-详情-本地设置更改基础库版本。


总结

  感谢观看,这里就是uni-app 项目创建 & 目录结构讲解的介绍使用,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。

相关文章
|
12天前
|
存储 小程序 API
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
|
12天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
19 1
|
12天前
|
存储 JavaScript 前端开发
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
|
12天前
|
小程序 开发者
【微信小程序】微信开发者工具 app.json: [“subpackages“][0][“root“] 字段需为目录 已解决
【微信小程序】微信开发者工具 app.json: [“subpackages“][0][“root“] 字段需为目录 已解决
18 0
|
12天前
|
监控 数据可视化 安全
智慧工地SaaS可视化平台源码,PC端+APP端,支持二开,项目使用,微服务+Java++vue+mysql
环境实时数据、动态监测报警,实时监控施工环境状态,有针对性地预防施工过程中的环境污染问题,打造文明生态施工,创造绿色的生态环境。
23 0
智慧工地SaaS可视化平台源码,PC端+APP端,支持二开,项目使用,微服务+Java++vue+mysql
|
12天前
|
移动开发 自然语言处理 小程序
miniprogram-to-uniapp使用指南(各种小程序项目转换为uni-app项目)
miniprogram-to-uniapp使用指南(各种小程序项目转换为uni-app项目)
100 1
|
Web App开发 关系型数据库
pc/app 项目/功能设计
2015-08-11 15:29:59 首先, 提供服务的整个系统包含哪几个设备 用户->[PC浏览器|APP|APP浏览器]->web服务器->[PHP/JAVA组件]->[MySQL/Redis]->[云服务/本地物理集群] 第一功能的使用目标, 是PC还是APP 第二信息交流格式, j...
834 0
|
12天前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
|
12天前
|
API 数据安全/隐私保护 iOS开发
利用uni-app 开发的iOS app 发布到App Store全流程
利用uni-app 开发的iOS app 发布到App Store全流程
116 3
|
12天前
|
Android开发 开发者 UED
个人开发 App 成功上架手机应用市场的关键步骤
个人开发 App 成功上架手机应用市场的关键步骤

热门文章

最新文章