2.1.新建项目及项目目录和预览uni项目
目录结构
一个uni-app工程,默认包含如下目录及文件
static目录
使用注意- 编译到任意平台时,
static
目录下除不满足条件编译的文件,会直接复制到最终的打包目录,不会打包编译。非static
目录下的文件(vue、js、css 等)只有被引用时,才会被打包编译。 css
、less/scss
等资源不要放在static
目录下,建议这些公用的资源放在自建的common
目录下。
Tips- HbuilderX 1.9.0+ 支持在根目录创建
ext.json
、sitemap.json
等小程序需要的文件。
- 编译到任意平台时,
#创建uni-app
在点击工具栏里的文件 -> 新建 -> 项目(快捷键Ctrl+N
):
选择uni-app
类型,输入工程名,选择模板,点击创建,即可成功创建。
uni-app自带的模板有 默认的空项目模板、Hello uni-app 官方组件和API示例,还有一个重要模板是 uni ui项目模板,日常开发推荐使用该模板,已内置大量常用组件。
#运行uni-app
浏览器运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器,即可体验 uni-app 的 web 版。
运行App到手机或模拟器:使用电压足够的usb端口连接手机,设置中开启USB调试,手机上允许电脑设备调试手机,进入hello-uniapp项目,点击工具栏的运行 -> 运行App到手机或模拟器,即可在该设备里面体验uni-app。
在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app。
注意:如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。如下图,需在输入框输入微信开发者工具的安装路径。
注意:微信开发者工具需要开启服务端口,在微信工具的设置->安全设置。
在支付宝小程序开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 支付宝小程序开发者工具,即可在支付宝小程序开发者工具里面体验uni-app。
在百度、字节跳动、QQ、快应用(分联盟和华为)、快手、飞书、360、京东等小程序开发工具里运行:内容同上,不再重复。
Tips
- 如果是第一次使用,需要配置开发工具的相关路径。点击工具栏的运行 -> 运行到小程序模拟器 -> 运行设置,配置相应小程序开发者工具的路径。
- 微信小程序工具需要配置允许权限,不然HBuilder无法调用微信小程序开发工具的命令行
- 支付宝/百度/字节跳动/360小程序工具,不支持直接指定项目启动并运行。因此开发工具启动后,请将 HBuilderX 控制台中提示的项目路径,在相应小程序开发者工具中打开。
- 如果自动启动小程序开发工具失败,请手动启动小程序开发工具并将 HBuilderX 控制台提示的项目路径,打开项目。
- 运行的快捷键是
Ctrl+R
。 - HBuilderX 还提供了快捷运行菜单,可以按数字快速选择要运行的设备:
- 如需调试,可参考:uni-app调试
2.1.新建项目及项目目录和预览uni项目的更多相关文章
- 仿百度壁纸客户端(六)——完结篇之Gallery画廊实现壁纸预览已经项目细节优化
仿百度壁纸客户端(六)--完结篇之Gallery画廊实现壁纸预览已经项目细节优化 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度 ...
- 仿百度壁纸client(六)——完结篇之Gallery画廊实现壁纸预览已经项目细节优化
仿百度壁纸client(六)--完结篇之Gallery画廊实现壁纸预览已经项目细节优化 百度壁纸系列 仿百度壁纸client(一)--主框架搭建,自己定义Tab + ViewPager + Fragm ...
- 在Vue项目中 选择图片并预览
最近开始使用vue做项目 在这个过程中,碰到了大多数做前端肯定经历的一个问题,就是文件上传预览 花了点时间解决,因此分享一下预览功能的解决方案 页面: <div class="sele ...
- vue-cli 移动端项目如何在手机上调试预览
这里分享下如何在webpack工具构建下的vue项目,在手机端调试和预览,言归正传. 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器,使用同一个wifi: b.笔记本也可以直 ...
- 将本地项目托管到github 并预览
本地文件上传到github的步骤 1.先在github上建立一个仓库 2.将此仓库download 3.在此文件夹中git bash here 4.进行如下git操作 git git init git ...
- vue项目中编写一个图片预览的公用组件
今天产品提出了一个查看影像的功能需求. 在查看单据的列表中,有一列是影像字段,一开始根据单据号调用接口查看是否有图片附件,如果有则弹出一个全屏的弹出层,如果没有给出提示.而且,从列表进入详情之后,附件 ...
- vue-cli项目上传到github预览问题
上传前先npm run build 后git push origin master 问题:chunk无法加载? 原因:在github.io请求chunk时,chunk的url使用的是publicPat ...
- vue项目上传Github预览
最近在用Vue仿写cnode社区,想要上传到github,并通过Github pages预览,在这个过程中遇到了一些问题,因此写个笔记,以便查阅. 完成Vue项目以后,在上传到github之前,需要修 ...
- vue项目中图片预览旋转功能
最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/view ...
- kkfileview v2.0 发布,文件在线预览项目方案
kkfileview文件在线预览 此项目为文件文档在线预览项目解决方案,项目使用流行的spring boot搭建,易上手和部署,部署好后可以独立提供预览服务,使用http接口访问,不需要和应用集成,具 ...
随机推荐
- 基于 MQ 的分布式 Serverless 多租任务处理系统架构演进
本文作者:史明伟 , 阿里云智能高级技术专家. 1 Serverless 异步任务处理系统诞生和挑战 无论是对于云的开发者,还是尝试业务升级的企业客户,Serverless的三个概念 "极致 ...
- 详解Native Memory Tracking之追踪区域分析
摘要:本篇图文将介绍追踪区域的内存类型以及 NMT 无法追踪的内存. 本文分享自华为云社区<[技术剖析]17. Native Memory Tracking 详解(3)追踪区域分析(二)> ...
- (GCC) gcc编译选项 -Wl, -start-group,whole-archive,-Wl, Bstatic
1. start-group 编译选项 假设程序x依赖三个静态库:libX1.a.libX2.a和libX3.a,而libX2.a又依赖libX1.a,libX3.a依赖libX2.a和libX1.a ...
- 12V转5V降压芯片,12V转3.3V稳压芯片电路图
12V转5V应用中,大多要求会输出电流高的,稳压LDO就不能满足了,需要使用DC-DC降压芯片来持续稳压5V,输出电流1000MA,2000MA,3000MA,5000MA等.不同的输出电流可以选择适 ...
- vba 数组判断与转换
Private Function CountArr(arr)'*****************************'计算数组是几维数组'***************************** ...
- Windows搭建Git服务器
Windows如何搭建Git服务器 1.安装java环境 (1)下载安装java 注意(java的版本需要在1.7及以上) (2)配置java的环境变量 (3)检验java环境是否安装成功 2.下载安 ...
- JavaScript:箭头函数:作为参数进行传参
之前已经说过,JS的函数,也是对象,而函数名是一个变量,是可以进行传参的,也即函数是可以被传参的. 只要是函数,都可以被传参,但是箭头函数的语法更为灵活,所以更方便进行传参. 如上图所示,fun1是一 ...
- [常用工具] C++环境下Qt的安装
文章目录 1 Qt(C++)版本的选择 2 Qt 安装 2.1 Qt 6.3.1的安装 2.2 Qt 5.14.2的安装 3 Qt 其他版本安装 1 Qt(C++)版本的选择 Qt(C++)是一个跨平 ...
- Fast RCNN论文阅读笔记
1.Introduction 1.1 RCNN 和SPPnet RCNN有几个显著的问题:1.训练的时候是多阶段的训练,分别分三个阶段训练卷积层.SVM.边框回归矩阵.2.训练很耗时.3.目标定位非常 ...
- NC14501 大吉大利,晚上吃鸡!
题目链接 题目 题目描述 最近<绝地求生:大逃杀>风靡全球,皮皮和毛毛也迷上了这款游戏,他们经常组队玩这款游戏. 在游戏中,皮皮和毛毛最喜欢做的事情就是堵桥,每每有一个好时机都能收到不少的 ...