uni-app 的基本使用

uni-app介绍

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

即使不跨端，uni-app同时也是更好的小程序开发框架。

具有vue和小程序的开发经验，可快速上手uni-app

为什么要去学习uni-app？

相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出ios、Android、H5、以及各种小程序

环境搭建

安装编辑器HbuilderX 下载地址

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

vscode搭配uni-app教程：链接

下载App开发版，可开箱既用

安装微信开发者工具 下载地址

利用Hbuilderx初始化项目

• 点击HbuilderX菜单栏文件>项目>新建
• 选择uni-app，填写项目名称，项目创建的目录
• 微信开发者工具在设置中安全设置，服务端口开启

介绍项目目录和文件作用

pages.json文件用来对uni-app进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等

manifest.json文件是应用的配置文件，用于指定应用的名称、图标、权限等。

App.vue 是我们的根组件、所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。

Main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框颜色，uni.scss文件里预设了一批scss变量

unpackage就是打包目录，在这里有各个平台的文件

pages所有页面存放目录

static静态资源源目录，例如图片等

component组件存放目录

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

• 页面文件遵循 Vue单文件组件（SFC）规范
• 组件标签靠近小程序规范，详见 uni-app 组件规范
• 接口能力 （JS API）靠近微信小程序规范，但需将前缀替换为uni，详见 uni-app接口规范
• 数据绑定及事件处理同vue.js规范， 同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发