uni-app的学习及使用
uni-app介绍
uni-app
是一个使用Vue.js
开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝)、快应用等多个平台。
uni-app
是一个跨段的开发平台,可以极大节省我们开发成本
# 1. 起步
# 1.1 uni-app 简介
uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码,可发布到 iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
详细的 uni-app 官方文档,请翻阅 https://uniapp.dcloud.net.cn/
# 1.2 开发工具
uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处:
模板丰富
完善的智能提示
一键运行
当然,你依然可以根据自己的喜好,选择使用 VS Code、Sublime、
记事本... 等自己喜欢的编辑器!
# 1.2.1 下载 HBuilderX
访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html
点击首页的
DOWNLOAD
按钮选择下载
正式版
->App 开发版
# 1.2.2 安装 HBuilderX
将下载的
zip包
进行解压缩将解压之后的文件夹,存放到纯英文的目录中(且不能包含括号等特殊字符)
双击
HBuilderX.exe
即可启动 HBuilderX
# 1.2.3 安装 scss/sass 编译
为了方便编写样式(例如:<style lang="scss"></style>
),建议安装 scss/sass 编译
插件。插件下载地址:
https://ext.dcloud.net.cn/plugin?name=compile-node-sass
进入插件下载页面之后,点击右上角的 使用 HBuilderX 导入插件
按钮进行自动安装,截图如下:
# 1.2.4 快捷键方案切换
操作步骤:工具 -> 预设快捷键方案切换 -> VS Code
# 1.2.5 修改编辑器的基本设置
操作步骤:工具 -> 设置 -> 打开 Settings.json 按需进行配置
源码视图下可用的参考配置:
{"editor.colorScheme": "Default","editor.fontSize": 12,"editor.fontFamily": "Consolas","editor.fontFmyCHS": "微软雅黑 Light","editor.insertSpaces": true,"editor.lineHeight": "1.5","editor.minimap.enabled": false,"editor.mouseWheelZoom": true,"editor.onlyHighlightWord": false,"editor.tabSize": 2,"editor.wordWrap": true,"explorer.iconTheme": "vs-seti","editor.codeassist.px2rem.enabel": false,"editor.codeassist.px2upx.enabel": false
}
Tips:可以使用 Ctrl + 鼠标滚轮 缩放编辑器
# 1.3 新建 uni-app 项目
文件 -> 新建 -> 项目
填写项目基本信息
项目创建成功
# 1.4 目录结构
一个 uni-app 项目,默认包含如下目录及文件:
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置小程序的全局样式、生命周期函数等
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
└─pages.json 配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息
# 1.5 把项目运行到微信开发者工具
填写自己的微信小程序的 AppID:
在 HBuilderX 中,配置“微信开发者工具”的安装路径:
在微信开发者工具中,通过
设置 -> 安全设置
面板,开启“微信开发者工具”的服务端口:在 HBuilderX 中,点击菜单栏中的
运行 -> 运行到小程序模拟器 -> 微信开发者工具
,将当前 uni-app 项目编译之后,自动运行到微信开发者工具中,从而方便查看项目效果与调试:初次运行成功之后的项目效果:
# 1.6 使用 Git 管理项目
# 1.6.1 本地管理
- 在项目根目录中新建
.gitignore
忽略文件,并配置如下:
# 忽略 node_modules 目录
/node_modules
/unpackage/dist
注意:由于我们忽略了 unpackage 目录中仅有的 dist 目录,因此默认情况下, unpackage 目录不会被 Git 追踪
此时,为了让 Git 能够正常追踪 unpackage 目录,按照惯例,我们可以在 unpackage 目录下创建一个叫做
.gitkeep
的文件进行占位
- 打开终端,切换到项目根目录中,运行如下的命令,初始化本地 Git 仓库:
git init
- 将所有文件都加入到暂存区:
git add .
- 本地提交更新:
git commit -m "init project"
# 1.6.2 把项目托管到码云
注册并激活码云账号( 注册页面地址:https://gitee.com/signup )
生成并配置 SSH 公钥
创建空白的码云仓库
把本地项目上传到码云对应的空白仓库中
uni-app的学习及使用相关推荐
- HBuilder X ——Uni app 学习笔记(一)
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
- HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
- 高性能Cordova App开发学习笔记
高性能Cordova App开发学习笔记 文件结构 添加插件 构建准备 各个www的作用,prepare命令会将hello\www的内容会拷贝到platform下的wwww目录,知道该改哪里了吧?如果 ...
- 切换 uniapp_万能前端框架uni app初探03:底部导航开发
前言 本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
- app开发学习需要经历哪些流程
app开发学习需要经历哪些流程?如何零基础入门app开发?以下是知乎热心开发者的经验总结,对学习app开发有很好的参考意义 1.如果没有编程基础的,学习基础知识的过程肯定是必须的. 2.有了一些基础之 ...
- uni app map 地图 漂浮问题及方案
uni app map 地图 漂浮问题及方案 文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
- uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
- uni app中使用图表
关于在uni app中运用图表 今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
- uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
- iOS App Clips学习笔记
一.什么是App Clip? App Clip是一个App的轻量版,用来提供一些用户所需功能,我们可以把它看成苹果的小程序.它不需要下载就直接能打开.这样即可达到不下载完整版APP便可体验APP的部分 ...
最新文章
- 对联广告,带关闭,可以移动
- 网络拓扑图一般用什么软件画_视频后期一般用什么软件
- java 程序运行过程 简介
- 视频监控:特征识别真的优于人脸识别吗?
- Android爬坑之旅之WebView
- NodeJS——模块全局安装路径配置以及关于supervisor的问题解释
- [JavaWeb-CSS]CSS扩展选择器
- HTML+CSS+JS实现 ❤️圣诞抓礼物小游戏❤️
- python判断进程是否存在
- 开到朝鲜的国产十元店,一年如何卖出190亿?
- caffe 源码阅读与运行流程
- Java 8 Strem基本操作
- h5微信f分享链接给对方获取对方手机号_怎么加回微信删除的人?偷偷恢复,亲测有效!...
- tensorboard的安装与使用
- jmeter教程https://max.book118.com/html/2019/0108/6145005114002000.shtm
- mysql查询每个学生的各科成绩,以及总分和平均分(实操版)
- markdown pad2注册码(2017年9月27日)
- java识别图片文字_java 实现图片的文字识别
- 易基因 - 外泌体let-7d-3p和miR-30d-5p作为宫颈癌及其癌前病变无创筛查的诊断标志物|早期筛查
- iphone计算机怎样打开声音,8个iOS必知小技巧!iPhone的声音还可以调更大哦!
热门文章
- android wifi 无法连接电脑连接,没有数据线,Wifi也能连接Android真机开发调试!彻底解决“无法识别的USB设备”等数据线连接问题!...
- Android Studio 加载arr文件.arr文件
- 红帽linux配置网桥 039,CentOS7.6操作系统配置网桥
- 【SAP-CO】统计指标
- 工厂模式 五种写法总结
- AEC IATF16949 - AEC-Qxxx 质量体系IATF16949 -芯片进入汽车领域的门槛
- url 转码 (含中文)%3A转换成“:”,%2F转换成“/”
- Chromium为视频标签 video 全屏播放的过程分析
- Lingo的基础语法(一)
- bugku never_give_up