2022-09-05 uni-app学习笔记(二) uniapp基础内容介绍,uniapp项目文件介绍,初始化相关配置

已于 2023-04-07 16:27:46 修改
阅读量286 收藏 2
点赞数
分类专栏： uni-app 文章标签： uni-app uniapp 前端 小程序 vue
于 2022-09-05 19:14:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rowlet/article/details/126711642
版权
本文介绍了uni-app的功能框架和运行环境，包括真机、浏览器和小程序。详细讲解了初始化配置，如工程目录结构、manifest.json、vue.config.js、pages.json、uni.scss、App.vue和main.js的作用与配置。此外，还阐述了uni-app的开发规范，如资源路径和组件标签的使用建议。
摘要由CSDN通过智能技术生成

文章目录

0.思维导图

在这里插入图片描述

1.uniapp介绍(补充)
uniapp的功能框架

在这里插入图片描述

uniapp的运行环境主要包括:真机运行,浏览器运行,小程序运行
2.初始化相关配置
2.1.工程目录结构

在这里插入图片描述
*注意事项:
static目录下的js文件不会被webpack编译,里面若有es6代码在手机设备上会报错,因为没有经过webpack编译转换就直接运行了
基于同样的原因,scss和less等公共资源不要放在static目录下,而是放在common目录下
在这里插入图片描述

2.2.应用配置manifest.json文件</
最低0.47元/天 解锁文章
前端OnTheRun
关注
专栏目录
uniapp新手必须的知道的坑
zsq199771的博客
06-10 1万+
有学过微信小程序开发和vue的，uniapp开发成本低，但是还是不能忽视了注意事项，别给自己带来麻烦，以下是我从官网上抽取的，希望接下来的开发能够顺利进行，文字有点多，但细看益处多多，go~~~ 开发工具下载标准版，在运行或发行uni-app时，会提示安装uni-app插件 下载App开发版，可开箱即用 如使用cli方式创建项目，可直接下载标准版，因为uni-app编译插件被安装到项目下了。 可以通过 vue-cli 创建 uni-app 项目。 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx
盘点那些神级uniapp插件，总有一款让你事半功倍
wongvio的博客
12-28 6039
自从有了uniapp，各位做小程序，app是不是感觉快起飞了，如果你想快速推出自己的移动端（各平台小程序，安卓、苹果），那么uniapp还是很不错的，至少时间和研发成本可以帮你降低很多很多。所谓天下技术是一家，各位flutter或者react native心态不要急躁，更不要鄙视uniapp下面就给大家推荐几款，我用过的uniapp插件，让你事半功倍，即使你是不会设计，不懂前端的后端同学，也能通过简单的上手，成为一名全栈！！！！
uniapp中引入uView
qq_30306717的博客
11-23 3501
在uniapp中引入uview步骤
uni-app思维导图
zhangxiao1_15的博客
08-17 2303
uni-app思维导图
uniapp从入门到精通（全网保姆式教程）~ 别再说你不会开发小程序了
热门推荐
路漫漫其修远兮，吾将上下而求索
08-20 7万+
为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app约定了如下开发规范：页面文件遵循Vue单文件组件规范组件标签靠近小程序规范，详细见uni-app组件规范接口能力（js api）靠近微信小程序规范，但需将前缀wx替换为uni，详见uni-app接口规范数据绑定及事件处理同Vue.js规范，同时补充了App以及页面的生命周期为兼容多端运行，建议使用flex布局进行开发。
2022-09-04 uni-app学习笔记(一) uniapp介绍,下载,创建并运行一个uniapp项目,uniapp打包步骤,uniapp项目文件介绍
GAARA
09-04 205
1.uniapp介绍 2.如何创建并运行一个uni-app项目? 3.如何在HBuliderX中运行uniapp项目到微信小程序模拟器? step1:配置微信小程序路径 step2:打开微信开发者工具,设置>安全设置>打开服务端口 step3:打开HbuilderX进入项目，运行>运行到小程序模拟器>微信开发者工具 4.如何给uni-app浏览器配置google运行环境 step1:找到自己电脑上的IPv4地址:控制中心>所有控制面板>网络和共享中心>连接>IPv4 step2:创建uniapp项目根目
【uni-app系列】uni-app之快速搭建框架_uniapp项目框架搭建
最新发布
2401_84520271的博客
04-21 1249
分享一套我整理的面试干货，这份文档结合了我多年的面试官经验，站在面试官的角度来告诉你，面试官提的那些问题他最想听到你给他的回答是什么，分享出来帮助那些对前途感到迷茫的朋友。
uni-app的基本使用学习笔记（简记）
m0_66148802的博客
03-10 736
主要讲解学习uni-app的基本使用，详细文档还需要看uni-app官网。
uni-app学习笔记和新闻资讯app项目总结
qq_46336617的博客
06-22 849
随着移动应用开发的快速发展，跨平台开发成为了许多开发者的追求。在我最近的学习中，我有幸接触到了Uni-app这个跨平台应用开发框架，它为我打开了一扇全新的大门。本文将分享我在学习Uni-app的过程中的笔记和项目心得体会。一、uni-app是什么？Uni-app是一个基于Vue.js框架的跨平台应用开发框架，它可以同时开发iOS、Android和Web应用。使用Uni-app，我们只需要编写一套代码，即可在不同平台上运行应用，大大提高了开发效率和降低了维护成本。
uni-app 学习笔记（五）uni-app的各种全局文件
qq_44648936的博客
04-14 3291
一、pages.json页面路由 pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等 它类似微信小程序中app.json的页面管理部分 用代码举例 { "pages": [{ //设置页面路径及窗口表现 "path": "pages/component/index", "style": { "navigationBarTitleText": "组件" } }, { "path": "pages/
Part6-1-2 uniapp
m0_38066007的博客
11-18 1123
目录结构 应用配置 manifest.json manifest.json 是应用的配置文件，用于指定应用的名称、图标、权限等，我们也可以在这里为 Vue 为 H5 设置跨域拦截处理器 编译配置 vue.config.js vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项 全局配置 page.json page.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗.
uni-app项目目录、文件作用介绍 及 开发规范
W1965561714的博客
05-20 4217
一、uni-app 小程序项目目录及文件作用介绍 目录： 1---pages ：所有的页面存放目录 2---static： 静态资源目录，例如图片等 3---uni_modules：是uni-app的插件模块化规范（HBuilderX 3.1.0+支持），通常是对一组js sdk、组件、页面、uniCloud云函数、公共模块等的封装，用于嵌入到uni-app项目中使用，也支持直接封装为项目模板。 4---unpackage 就是打包目录，在这里有各个平台的打包文件 文件： 1---App.
uni-app总结以及插件的使用
linlinaitangtang的博客
11-28 3361
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。uni-app在手，做啥都不愁。即使不跨端，
uniapp的配置文件、入口文件、主组件、页面管理部分
Miller777_的博客
03-25 562
入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex，注意uniapp无法使用vue-router，路由须在pages.json中进行配置。是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。除此之外，应用生命周期仅可在App.vue中监听，在页面监听无效。文件是应用的配置文件，用于指定应用的名称、图标、权限等。配置文件，全局页面路径配置，应用的状态栏、导航条、标题、窗口背景色设置等。
uni-app优秀插件
Liuyilllin的博客
07-20 5915
组件库 ThorUI ColorUI UI界面和组件 轮播图系列 高级轮播图 精致的图片展示组件，自定义面板指示点，可配置性强 大小图轮播，类似手机相册 图片轮播，商品详情图 QSwiper组件 切换动画很强大 一款由自定义元素组成的有过渡动画及背景渐变的swiper、引导页，切分为元素解决了小程序占内存大问题 画廊(ynGallery)组件 类似轮播但不是 通用画廊(ynGallery)组件 流畅的滑动感 类似于猫眼影廊 体验感不错 带缩放的轮播 轮播不能用于H5 uni.createAnimat
uniapp常用的插件，非常强大！
car1887790的专栏
09-14 351
uniapp 常用原生插件大全（2023年最新）_uniapp插件_三杯五岳的博客-CSDN博客
uniapp项目运行
qq_37291053的博客
08-03 839
一、下载HBuilderX开发工具。三、文件－打开文件，运行。
uniapp 常用原生插件大全（2024年最新）
三杯五岳
04-23 1万+
uniapp 常用原生插件大全，包括扫码、图片选择、文件选择、图片编辑、应用通知、应用未读角标、开机自启、sqlite数据库、保活、快捷方式、图片水印、视频压缩、动态修改应用图标等等
uni-app：Vue.js驱动的全能跨平台开发框架
uni-app跨平台前端框架是在当前多端泛滥的时代背景下诞生的，旨在解决开发者面临的挑战，如学习成本增加、适配和维护工作繁重，以及过去跨平台框架在体验和生态方面的不足。uni-app利用Vue.js作为核心，提供了一种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值