Uni-App核心语法

Uni-App 简介

框架介绍

uni，读 you ni，是统一的意思
Uni-app 是 Dcloud 公司的产品，是一个跨端开发框架，基于 vue.js 技术栈，被用于移动端开发
用 Uni-App 编写一套代码，可发布到 iOS、Android、Web（响应式）以及各种小程序（微信 / 支付宝 / 百度 / 头条 / QQ / 钉钉 / 淘宝）应用等多个平台

框架生态

DCloud 公司拥有 800 万开发者、数百万应用、12 亿手机端月活用户、数千款 Uni-app 插件、70+微信 / qq群
Uni-app 在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等 8 大关键指标上拥有更强的优势

详细数据：

源码地址

GitHub：https://github.com/dcloudio/uni-app

框架分析

Uni-App 功能架构图：

Uni-App 功能总结：

Uni-app 底层集成了 native 技术，就是 h5+引擎，能调用手机原生 api，所以 Uni-app 能开发接近原生性能的 app，这是 js 引擎部分
Uni-app 底层集成的是双引擎，除了 js 引擎以外，还有一个独立的渲染引擎

nvue 渲染：

nvue 内部集成了 weex
用于原生 iOS 和 Android 端渲染

webview 渲染：

基于 webkit 内核
用于网页端渲染

Uni-App 环境搭建

安装 hbuilderX

hbuilderx 也是 dcloud 公司出品的 ide 产品
用 Uni-app 开发跨多端产品，实现一次开发，多端发布就必须用 hbuilderx 这个神器 IDE

下载地址：https://www.dcloud.io/hbuilderx.html

安装夜神模拟器

开发 app，就少不了连机调试，你可以连接手机调试，也可以安装一个模拟器
下载地址：https://www.yeshen.com/

下载之后无脑下一步，然后安装完毕之后直接运行即可如下：

配置环境

hbuilderx 连接到模拟器，选择工具 → 设置，打开配置界面，选择运行配置，如下图：

细节概要，adb 路径选择模拟器安装包的 adb.exe 地址，模拟器端口，夜神模拟器默认是 62001

插件市场插件安装

插件市场的插件主要有组件类和编译类两大类：

组件类：

点击安装后会直接安装到当前打开的 Uni-app 项目中，而且是指定的文件夹 components 中

编译类：

类似于 webpack 的 loader，这个是放在 hbx 的安装包里

安装常用的插件：

Uni-App 快速入门

框架简介

Uni-app 使用 vue 的语法 + 小程序的标签和 API

核心技术点：

环境配置

新建 Uni-app 空模板项目：

开发规范：

页面文件遵循 Vue 单文件组件(SFC)规范：https://vue-loader.vuejs.org/zh/spec.html
组件标签靠近小程序规范，详见 Uni-app 组件规范：https://uniapp.dcloud.io/component/README
接口能力(JS API)靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见 Uni-app 接口规范：https://uniapp.dcloud.io/api/README
数据绑定及事件处理同 Vue.js 规范，同时补充了 App 及页面的生命周期
为兼容多端运行，建议使用 flex 布局进行开发

资源路径说明：

模板内引入静态资源

template 内引入静态资源，如 image、video 等标签的 src 属性时，可以使用 相对路径 或者 绝对路径，形式如下：

注意事项：@ 开头的绝对路径以及相对路径会经过 base64 转换规则校验，引入的静态资源在非 h5 平台，均不转为 base64，H5 平台，小于 4kb 的资源会被转换成 base64，其余不转

JS 文件引入

js 文件或 script 标签内（包括 renderjs 等）引入 js 文件时，可以使用相对路径和绝对路径，形式如下图：

CSS 引入静态资源

css 文件或 style 标签内引入 css 文件时（scss、less 文件同理）可以使用相对路径或绝对路径，如下图：

多端运行

文件 → 新建 → 项目

选中 App.vue：

浏览器运行：运行 → 运行到浏览器 → Chrome

微信小程序运行

注意，如果是第一次使用，需要先配置小程序 ide 的相关路径，才能运行成功，微信开发者工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

配置微信小程序开发工具安装包地址如下：

微信小程序 → 设置 → 安全 → 开启服务端口：

支付宝小程序运行

支付宝小程序开发工具下载地址：https://opendocs.alipay.com/mini/ide/download

无脑下一步安装即可，安装完毕之后使用 HBuilderX 进行运行，以支付宝小程序的方式进行编译如下：

真机运行

注意，打开夜神模拟器的安装文件夹，找到【debugReport.bat】文件，双击启动该批处理文件：

查看端口：62001

运行 → 运行到手机或模拟器：

目录结构分解

目录结构解释：

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

注意事项：

编译到任意平台时，static 目录下的文件均会被完整打包进去，且不会编译。非 static 目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去
static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错
css、less / scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下
HbuilderX 1.9.0+ 支持在根目录创建 ext.json、sitemap.json 等小程序需要的文件

经过了如上的一番讲解之后我们接下来再次新建一个干净点的项目如下：

创建好了一个空项目之后我们主要关注的内容为 uni-app 的内容，首先来看看 pages.json 的内容 pages.json 有许多的内容，其它的配置项请参考官方文档：https://uniapp.dcloud.io/collocation/pages

我这里只介绍常用的配置，globalStyle 内容如下：

"globalStyle": {
  // 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
  "navigationBarTextStyle": "white",
  // 导航栏标题文字内容
  "navigationBarTitleText": "BNTang",
  // 导航栏背景颜色（同状态栏背景色）
  "navigationBarBackgroundColor": "#00aa7f",
  // 下拉显示出来的窗口的背景色
  "backgroundColor": "#ff0000",
  // 是否开启下拉刷新
  "enablePullDownRefresh": true,
  // 下拉 loading 的样式，仅支持 dark / light
  "backgroundTextStyle": "light",
  // 导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址
  "titleImage": "https://xiaohuihuit.github.io/images/avatar.jpg"
}

微信小程序运行效果图：

Web 端运行效果图：

底部 Tab 配置：