uni-app的基本介绍

  • 1.基础部分
  • 2.uni-app介绍
  • 3.环境搭建
  • 4.创建项目
  • 5.介绍项目目录和文件作用
  • 6.规范


1.基础部分

  • 环境搭建
  • 页面外观配置
  • 数据绑定
  • uni-app的生命周期
  • 组件的使用
  • 条件注释跨端兼容
  • uni中的事件
  • 导航跳转
  • 组件创建和通讯

2.uni-app介绍

uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,开发布到IOS,Android,H5,以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
具有vue和微信小程序的开发经验,可快速上手uni-app.

3.环境搭建

安装编辑器HbuilderX
HBuilder是通用的前端开发工具,但为uni-app做了特别强化。
下载App开发版,可开箱即用
安装微信开发者工具

4.创建项目

uniapp项目前端技术架构 前端uniapp是什么_uni-app


1.使用浏览器运行

uniapp项目前端技术架构 前端uniapp是什么_App_02


2.运行到微信小程序

uniapp项目前端技术架构 前端uniapp是什么_uni-app_03


注意:如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。

uniapp项目前端技术架构 前端uniapp是什么_uniapp项目前端技术架构_04


如果遇到此图问题(没有开启微信小程序的端口号)

uniapp项目前端技术架构 前端uniapp是什么_uniapp项目前端技术架构_05


解决方法:开启即可

uniapp项目前端技术架构 前端uniapp是什么_微信小程序_06


3.运行在安卓(Andriod)真机上。

uniapp项目前端技术架构 前端uniapp是什么_uniapp项目前端技术架构_07

5.介绍项目目录和文件作用

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

6.规范

uni-app约定了如下开发规范:

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