1.介绍
uni-app
是一个使用
Vue.js
开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
DCloud
公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（
详见
），腾讯课堂官方为uni-app录制培训课程（
详见
），开发者可以放心选择。
uni-app
在手，做啥都不愁。即使不跨端，
uni-app
也是更好的小程序开发框架（
详见
）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。
HBuilderX下载地址
:
https://www.dcloud.io/hbuilderx.html
2.创建uni-app
在点击工具栏里的文件 -> 新建 -> 项目（快捷键
Ctrl+N
）：
选择
uni-app
类型，输入工程名，选择模板，点击创建，即可成功创建。
uni-app自带的模板有 默认的空项目模板、Hello uni-app 官方组件和API示例，还有一个重要模板s是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。
3.运行uni-app
1浏览器运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可体验 uni-app 的 web 版。
注意
：如果是第一次使用，需要先配置浏览器的相关路径，才能运行成功,点击配置web服务器。
如下图，需在输入框输入Chrome的安装路径。
4.pages.json 页面路由介绍
pages.json
文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
它类似微信小程序中
app.json
的
页面管理
部分。注意定位权限申请等原属于
app.json
的内容，在uni-app中是在manifest中配置。
配置项列表
以下是一个包含了所有配置选项的
pages.json
：
{
"pages": [{
"path": "pages/component/index",
"style": {
"navigationBarTitleText": "组件"
}
}, {
"path": "pages/API/index",
"style": {
"navigationBarTitleText": "接口"
}
}, {
"path": "pages/component/view/index",
"style": {
"navigationBarTitleText": "view"
}
}],
"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式（list 的索引项）
"list": [{
"name": "test", //模式名称
"path": "pages/component/view/index" //启动页面，必选
}]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "演示",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"usingComponents":{
"collapse-tree-item":"/components/collapse-tree-item"
},
"renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
"pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
"rpxCalcMaxDeviceWidth": 960,
"rpxCalcBaseDeviceWidth": 375,
"rpxCalcIncludeWidth": 750
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "3px",
"iconfontSrc":"static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件",
"iconfont": { // 优先级高于 iconPath，该属性依赖 tabbar 根节点的 iconfontSrc
"text": "\ue102",
"selectedText": "\ue103",
"fontSize": "17px",
"color": "#000000",
"selectedColor": "#0000ff"
}
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}],
"midButton": {
"width": "80px",
"height": "50px",
"text": "文字",
"iconPath": "static/image/midButton_iconPath.png",
"iconWidth": "24px",
"backgroundImage": "static/image/midButton_backgroundImage.png"
}
},
"easycom": {
"autoscan": true, //是否自动扫描组件
"custom": {//自定义扫描规则
"^uni-(.*)": "@/components/uni-$1.vue"
}
},
"topWindow": {
"path": "responsive/top-window.vue",
"style": {
"height": "44px"
}
},
"leftWindow": {
"path": "responsive/left-window.vue",
"style": {
"width": "300px"
}
},
"rightWindow": {
"path": "responsive/right-window.vue",
"style": {
"width": "300px"
},
"matchMedia": {
"minWidth": 768
}
}
}
4.1 main.js
main.js
是 uni-app 的入口文件，主要作用是初始化
vue
实例、定义全局组件、使用需要的插件如 vuex。
首先引入了
Vue
库和
App.vue
，创建了一个
vue
实例，并且挂载
vue
实例。
vue2
import Vue from 'vue'
import App from './App'
import pageHead from './components/page-head.vue' //全局引用 page-head 组件
Vue.config.productionTip = false
Vue.component('page-head', pageHead) //全局注册 page-head 组件，每个页面将可以直接使用该组件
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount() //挂载 Vue 实例
vue3
import App from './App'
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
使用
Vue.use
引用插件，使用
Vue.prototype
添加全局变量，使用
Vue.component
注册全局组件。
可以引用
vuex
，因涉及多个文件，此处没有提供示例，详见
hello uni-app
示例工程。
无法使用
vue-router
，路由须在
pages.json
中进行配置。如果开发者坚持使用
vue-router
，可以在
插件市场
找到转换插件。
注意
- nvue 暂不支持在 main.js 注册全局组件
4.2 App.vue
App.vue
是uni-app的主组件，所有页面都是在
App.vue
下进行切换的，是页面入口文件。但
App.vue
本身不是页面，这里不能编写视图元素，也就是没有
<template>
。
这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData
应用生命周期仅可在
App.vue
中监听，在页面监听无效。
应用生命周期
uni-app
支持如下应用生命周期函数：
代码示例
<script>
// 只能在App.vue里监听应用的生命周期
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
注意
-
应用生命周期仅可在
App.vue
中监听，在其它页面监听无效
。 -
App.vue
不能写模板 - onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）
4.3 uni-scss
.scss
文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，
uni.scss
文件里预置了一批scss变量预置。
uni-app
官方扩展插件（uni ui）及
插件市场
上很多三方插件均使用了这些样式变量，如果你是插件开发者，建议你使用 scss 预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App。
uni.scss
是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个uni.scss，使得每个scss文件都被注入这个uni.scss，达到全局可用的效果。如果开发者想要less、stylus的全局使用，需要在vue.config.js中自行配置webpack策略。
注意：
- 如要使用这些常用变量，需要在 HBuilderX 里面安装 scss 插件；
-
使用时需要在 style 节点上加上
lang="scss"
。
<style lang="scss">
</style>
以下是 uni.scss 的相关变量：
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:24rpx;
$uni-font-size-base:28rpx;
$uni-font-size-lg:32rpx;
/* 图片尺寸 */
$uni-img-size-sm:40rpx;
$uni-img-size-base:52rpx;
$uni-img-size-lg:80rpx;
/* Border Radius */
$uni-border-radius-sm: 4rpx;
$uni-border-radius-base: 6rpx;
$uni-border-radius-lg: 12rpx;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20rpx;
$uni-spacing-row-lg: 30rpx;
/* 垂直间距 */
$uni-spacing-col-sm: 8rpx;
$uni-spacing-col-base: 16rpx;
$uni-spacing-col-lg: 24rpx;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40rpx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36rpx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30rpx;
5.扩展组件(uni-ui)
在HBuilderX 新建uni-app项目的模板中，选择uni-ui模板
由于uni-app独特的
easycom
技术，可以免引用、注册，直接使用各种符合规则的vue组件。
在代码区键入
u
，拉出各种内置或uni-ui的组件列表，选择其中一个，即可使用该组件。
光标放在组件名称上，按F1，可以查阅组件的文档。
5.1 icon图标
下载地址
：
https://ext.dcloud.net.cn/plugin?name=uni-icons
基本用法
<uni-icons type="contact" size="30"></uni-icons>
图标示例
