2022-09-04 uni-app学习笔记(一) uniapp介绍,下载,创建并运行一个uniapp项目,uniapp打包步骤,uniapp项目文件介绍

uni-app学习：创建、运行、打包及文件介绍
原创 已于 2023-04-07 16:23:32 修改 · 343 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #编辑器 #HBuilderX #前端

于 2022-09-04 21:45:12 首次发布
本文详细介绍了uni-app的介绍、创建和运行uni-app项目的方法，包括在HBuilderX中运行到微信小程序模拟器的步骤。同时，讲解了如何配置uni-app在浏览器中使用Google运行环境，以及uni-app的打包过程。最后，文章概述了uni-app项目文件的常见结构和用途。

文章目录

1.uniapp介绍

  • uniapp是一个使用vuejs来开发所有前端应用的框架,

  • 它的特点是开发者编写一套代码,就可以发布到ios,Android,web响应式以及小程序,快应用等等多个平台

  • uniapp属于DCloud公司(HBuilderX编辑器),有较为丰富的周边生态(即插件),提供成熟的组件

  • 支持less,scss,typescript

2.如何创建并运行一个uni-app项目?
  • 先下载一个HBuilderX然后打开
  • 创建uni-app:文件>新建>项目(CTRL+N)>uni-app项目
    在这里插入图片描述
  • 运行uni-app项目:选择运行环境(浏览器,手机,小程序,终端等)
    在这里插入图片描述
  • 运行结果:(谷歌浏览器)
    在这里插入图片描述
3.如何在HBuliderX中运行uniapp项目到微信小程序模拟器?

在这里插入图片描述

step1:配置微信小程序路径

运行=>运行到小程序模拟器=>运行设置=>找到小程序运行配置下的微信开发者工具路径进行配置
在这里插入图片描述
找到微信开发者工具的安装位置,粘贴上去

最低0.47元/天 解锁文章
2022-09-05 uni-app学习笔记(二) uniapp基础内容介绍,uniapp项目文件介绍,初始化相关配置
GAARA
09-05 389
pages.json 文件:对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。 manifest.json 文件:应用的配置文件，用于指定应用的名称、图标、权限等。 App.vue:根组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。 main.js:项目入口文件，主要作用是初始化vue实例并使用需要的插件。 uni.scss文件的:整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一
【uni-app系列】uni-app之快速搭建框架_uniapp项目框架搭建
2401_84520271的博客
04-21 1588
分享一套我整理的面试干货，这份文档结合了我多年的面试官经验，站在面试官的角度来告诉你，面试官提的那些问题他最想听到你给他的回答是什么，分享出来帮助那些对前途感到迷茫的朋友。
uni-app开发前准备
cherry459的博客
09-30 2095
1、下载HBuilderX开发工具 https://www.dcloud.io/ 2、下载安装node http://nodejs.cn/download/ 3、进入项目中安装npm依赖（这些操作要进入开发的项目目录下） npm install //运行npm install可根据package.json的配置自动安装所有依赖包 npm uninstall //卸载依赖，...
uniapp如何创建一个安卓app项目，并制作自定义调试基座，并成功运行
qq_68155756的博客
04-24 3667
1.新建项目；2.选择uniapp默认模板，vue版本2或3都可以；3.点击创建完之后需要创建自定义调试基座；4.关键的来了，更改成这两个配置再点打包：；6. 会出来一个弹框，不要管，点继续打包；7.之后的打包过程也可能很慢，或几分钟、或几十分钟，我有次等了一个多小时，这取决于你打包的同一时间有多少人同时再排队打包，去刷会儿抖音吧...... 8.等到出来这个提示就ok了：；9.然后掏出你的数据线链接你的手机，注意，一定要点用于文件传输！并且要用好点的数据线，拼多多几块钱一根的不灵，一定要打开手机的开发
uni-app(创建项目、运行、打包)
life
09-18 1330
目录   一、下载HBuilderX 二、打开HBuilderX，创建项目 三、创建完成​ 四、运行  五、打包  一、下载HBuilderX 下载地址：https://www.dcloud.io/hbuilderx.html 安装：   二、打开HBuilderX，创建项目   三、创建完成 ┌─compone...
uniapp项目运行
qq_37291053的博客
08-03 1047
一、下载HBuilderX开发工具。三、文件－打开文件，运行。
跨平台应用开发进阶(六) ：uni-app实现原生插件集成_uniapp 添加了原生插件
2401_84435768的博客
04-27 1451
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》知识点，做到心中有数，也可以用来自查及完善知识体系。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
跨平台应用开发进阶(三十四) ：uni-app 应用 Universal Link 实现 iOS 微信分享_uniapp universal links(1)
2401_84446513的博客
05-04 1004
三套“算法宝典”开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法刷题LeetCode中文版（为例）人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！
跨平台应用开发进阶(三十四) ：uni-app 应用 Universal Link 实现 iOS 微信分享_uniapp universal links
最新发布
2401_84446513的博客
05-04 1274
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。
uniapp安装流程
m0_69450653的博客
10-07 4853
详细安装流程
uniapp的基本使用
m0_60376759的博客
03-13 690
如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。文件是应用的配置文件，用于指定应用的名称、图标、权限等。
【uni-app怎么导出方法，引用方法，使用导出的方法，导出方法的格式怎么写】
TChildeSeven的博客
07-22 1542
uni-app怎么导出方法，引用方法，使用导出的方法，导出方法的格式怎么写 1.首先右击项目新建一个目录commen（命名随便），右击commen文件夹新建一个.js文件，命名methods.css（命名随便） 2.这里导出一个返回上一个页面的方法 3.在pages里的页面里引用和使用，用点击方法即可，这里结合一下icon图标的使用 icon图标的使用方法：https://blog.youkuaiyun.com/TChildeSeven/article/details/107492005 使用导出的方法步骤十分简
uni-app项目搬家
wenxi2367的博客
04-23 471
项目从一台电脑搬到另一台电脑，环境是从无到有。 装数据库 导入数据 装nodejs，装了适合win10的高版本 装开发工具Hbuider 装小程序开发工具 导入项目 运行接口 npm install 运行项目,麻烦开始了，根据报错百度查报错的原因： 首先点击导入的项目进入项目内部 1.装插件 2.开启小程序端口 3.找不到文件，新创建一个项目，原有项目copy进去就行了。 ...
uni-app代码迁移
wang9rui的博客
03-29 1743
小程序代码迁移uni-app之注意事项 1.如果项目中有px单位并且使用style动态绑定的最好在masinfest.json中配置 “transformPx”: false,否则uni-app会将px转换为自适应单位, 2.尽量使用class动态绑定类名代替动态绑定style 3.uni.request发起请求时返回一个数组，第一项是err，第二项是数据,使用promise封装请求时直接.th...
02 【uni-app起步】
DSelegent的博客
10-16 2366
02 【uni-app起步】
uniapp 使用下载使用 npm 包
baozaobenren的博客
03-09 1270
在项目中打开cmd窗口 npm init -y 根目录会多出一个 package.json 文件。 如果想要使用微信的jssdk包直接下载就可以了 npm install weixin-js-sdk --save-dev 安装完成后，根目录会多出一个 node_modules 文件夹
uniapp运行
热门推荐
s_turnTurn的博客
10-15 1万+
运行uniapp项目 一．未关联云服务空间（文件目录uniCloud文件名后显示【阿里云：未关联云服务空间】）时，先关联 1.在uniCloud文件上右键，点击关联云服务空间项目 这就说明关联了 二.在uniCloud文件上点击右键，点击运行云服务空间初始化向导 1.完成实名认证，选中体验服务空间，点击下一步 2.点击下一步 3点击开始部署 三.HBuilder X点击导航栏中的运行–>运行到浏览器–>选择自己调试的浏览器 这样就成功了! ...
uniapp获取服务器文件目录,uniapp项目环境搭建与运行
weixin_36210904的博客
08-11 1843
**目录索引：**- uniapp框架搭建运行- 导入Ai面试项目- 修改工具中的配置- 修改前端配置文件中的配置- 运行项目到微信开发者工具上#### 1\. 点击"文件"菜单栏 选择"新建" -->"项目",测试uniapp环境是否正常运行![](https://img.kancloud.cn/25/39/2539b563cad59f6e084d0e5c9bf82206_672x539....
uni-app（3）多端运行、项目文件介绍
黑卡米的专栏
05-08 860
多端运行的方式，项目里所用的文件介绍。
uniapp-avatar-master：全面的uni-app头像裁剪工具
这个命名暗示了该文件很可能是一个以uni-app开发框架为核心的项目源代码包，其中的“master”可能指的是该项目的主分支或稳定版本。uni-app是DCloud公司推出的一个使用Vue.js开发所有前端应用的框架，可以编译到iOS...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

前端OnTheRun

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

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

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

打赏作者

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

抵扣说明：

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

余额充值