一、uni-app简介

二、环境搭建

1.1 编辑器HbuilderX

1.2 微信开发者工具

三、项目创建

3.1 创建项目

3.2 项目运行

3.2.1 浏览器运行

3.2.2 微信开发者工具里运行

四、项目目录文件

一、uni-app简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可以发布到 IOS、Android、H5 以及各种小程序（微信/支付宝/百度/头条/钉钉）等多个平台

uni-app 官方网址

二、环境搭建

1.1 编辑器HbuilderX

HbuilderX是通用的前端开发工具，但为了uni-app做了特别强化

HbuilderX 官方网址

选择电脑系统所对应的版本即可

下载完后得到压缩包，解压后在HbuilderX夹内找到HbuilderX.exe即可使用

1.2 微信开发者工具

微信开发者工具官方网址

选择电脑对应系统的版本即可

三、项目创建

3.1 创建项目

uni-app 官方文档 - 创建uni-app

在点击工具栏里的文件 -> 新建 -> 项目：

创建完成后，生成项目基本结构

3.2 项目运行

uni-app 官方文档 - 运行uni-app

3.2.1 浏览器运行

进入hello-uni-app项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app 的 H5 版。

3.2.2 微信开发者工具里运行

进入hello-uni-app项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。

注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。

如果运行后在微信控制台中出现了如下报错，需要在项目中 manifest.json 内配置微信小程序AppID

微信小程序AppID获取（需要在微信小程序中申请账号，不然获取到的是游客id）

微信官方文档 - 小程序 - 申请账号

四、项目目录文件

page.json：用来对uni-app进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等
manifest.json：应用的配置文件，用于指定应用的名称、图标、权限等
App.vue：根组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用生命周期函数
main.js：项目入口文件，主要作用是初始化vue实例并使用需要的插件
uni.scss：主要用途是为了方便整体控制应用的风格，比如按钮颜色，边框风格，uni.css文件里预置了一批scss变量预置
unpackage：打包目录，对应各个平台的打包文件
pages：所有的页面存放目录
static：静态资源根目录，例如logo图标等
component：组件存放目录

为了实现多端兼容、综合考虑编译速度、运行性能等因素，uni-app越顶了如下开发规范：

页面文件遵循Vue单文件组件（SEC）规范（可查看 Vue官方文档或我的Vue笔记： Vue知识点整理（二）- Vue组件化编程（2）- 单文件组件）
组件标签接近小程序规范（可查看uni-app组件规范）
接口能力（JS API）靠近小程序规范，但需将前缀wx替换为uni（可查看uni-app接口规范）
数据绑定及其事件处理同Vue.js规范，同时补充了App及页面的生命周期（官方文档：uni-app的App.vue和生命周期，想看Vue的相关的也可参考我的Vue笔记：数据绑定、事件处理、生命周期）
为兼容多端运行、建议使用flex布局进行开发（可查看我的Flex布局笔记）

备注：我的个人笔记更多的是学习时做的一些记录，并不像官方文档那么规范，当然也可以作为一个参考，不过像Flex布局笔记是较早时记录的，内容可能相对杂乱些，如果笔记中有什么出错的地方，也希望大家能帮我指出来

uni-app知识点整理（1）- uni-app简介、环境搭建、项目创建、项目目录文件相关推荐

APP UI自动化测试：框架选择、环境搭建、脚本编写……全总结
首先想要说明一下,APP自动化测试可能很多公司不用,但也是大部分自动化测试工程师.高级测试工程师岗位招聘信息上要求的,所以为了更好的待遇,我们还是需要花时间去掌握的,毕竟谁也不会跟钱过不去. 接下来, ...
魔方APP项目-02-服务端项目搭建，创建manage.py文件、构建全局初始化函数创建app应用对象、通过终端脚本启动项目、项目加载配置、数据库初始化、日志初始化、蓝图初始化
服务端项目搭建新建项目目录mofangapi,并创建虚拟环境 mkvirtualenv mofang 安装开发中使用的依赖模块 pip install flask==0.12.4 pip insta ...
基于WPF的桌面宠物开发(一) ：WPF简介+环境搭建+简单界面
目录一.WPF简介 1.什么是WPF? 二.WPF环境搭建 1.Visual Studio安装 2.安装 ".Net桌面开发" 工具包 3.新建WPF项目 4.导入WpfAnim ...
集成——Mac电脑上app自动化测试(Appium + xcode 8.2 + python)环境搭建
1.Mac电脑.xcode.appium客户端1.6.4,appium1.6.4, android studio 命令行安装: 2.安装brew /usr/bin/ruby -e "$(cu ...
app android安装测试,【和小强学移动app测试1】android移动开发环境搭建与配置
1.下载android sdk 然后解压到指定目录即可,目录结构如下 2.进入eclipse目录,启动eclipse,先check of update下依次window>sdk manager ...
【一步一个脚印】Tomcat+MySQL为自己的APP打造服务器（1）服务器环境搭建
转载自:衷水木http://blog.csdn.net/a_running_wolf 做 Android 开发一年多了,虽然不敢说有多精通,但也相对熟悉.做久了就会发现 Android 在行外人眼中是 ...
vite简介，使用vite创建项目的优势
简介:vite 作为下一代前端项目生成工具,自然有着许多独特之处,比较常见的就是搭建react.js和vue.js的项目,还有一些轻量的构架框架也可以了解一下(Vamilla.js.Preact.js ...
史上最简SLAM零基础解读(10.1) - g2o(图优化)→简介环境搭建(slam十四讲第二版为例)
本人讲解关于slam一系列文章汇总链接:史上最全slam从零开始文末正下方中心提供了本人联系方式,点击本人照片即可显示WX→官方认证{\color{blue}{文末正下方中心}提供了本人 \co ...
uni-app实战之社区交友APP（1）项目介绍和环境搭建
文章目录前言一.项目介绍二.环境搭建和创建项目 1.开发环境搭建 2.创建uni-app项目三.多端调试环境搭建 1.安卓手机调试配置 2.iOS真机调试配置 3.微信小程序调试配置 4.支付 ...
C++课件知识点整理
C++课件知识点整理第一章:C++简介一.C++简介二.文件扩展名三.C++程序结构四.C++中的注释第二章:数据类型常量变量一.数据类型(数据分类) 二.常量三.变量四.ASCII ...

uni-app知识点整理（1）- uni-app简介、环境搭建、项目创建、项目目录文件

一、uni-app简介

二、环境搭建

1.1 编辑器HbuilderX

1.2 微信开发者工具

三、项目创建

3.1 创建项目

3.2 项目运行

3.2.1 浏览器运行

3.2.2 微信开发者工具里运行

四、项目目录文件

uni-app知识点整理（1）- uni-app简介、环境搭建、项目创建、项目目录文件相关推荐

最新文章

热门文章