# uni-app

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。 uni-app 简单的来说是一个跨平台的解决方案通过uni-app可以实现一套代码实现编译到多个平台

# 开发环境

HBuilderX 编译器 HBuilderX
微信开发者工具微信开发者工具下载地址

# 快速创建项目

点击工具栏里的文件 -> 新建 -> 项目：
选择uni-app，输入工程名，如：first-uniapp，点击创建。
在微信开发者工具里运行：进入first-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。
真机运行：连接手机，开启USB调试，进入first-uniapp项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app。注意：真机运行需要设置应用表示，登录 hbuilderX 后点击云端获取即可！

# uni-app 开发规范及目录结构

uni-app使用vue的语法及规范，所以uni的每一个文件都是单文件组件。一个uni-app工程，默认包含如下目录及文件：

pages.json 配置页面路由、导航条、选项卡等页面类信息
manifest.json 配置应用名称、appid、logo、版本等打包信息
App.vue 应用配置，用来配置App全局样式以及监听应用的生命周期
main.js Vue初始化入口文件
static目录存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
pages目录业务页面文件存放目录
components目录组件文件存放目录

# uni-app 页面样式与布局

尺寸单位
- uni-app框架目前支持长度单位 px、upx、rpx。
- 页面元素宽度在uni-app中的宽度计算公式：750px（750px是uni-app的基准宽度） * 元素在设计稿中的宽度 / 设计稿基准宽度
- 样式导入使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
```
<style>
    @import "../../common/uni.css";
    .box {
        width:750px;
    }
</style>
```
内联样式
框架组件上支持使用 style、class 属性来控制组件的样式
- style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
- class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
全局样式与局部样式定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。注意： App.vue 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。
Flex布局：为支持跨平台，框架建议使用Flex布局

# uni-app 配置文件

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口表现、设置多 tab 等。 pages.json 配置项列表：

globalStyle 设置默认页面的窗口表现
pages 设置页面路径及窗口表现 pages接收一个数组，来指定应用由哪些页面组成。每一项代表对应页面的信息，应用中新增/减少页面，都需要对 pages 数组进行修改。文件名不需要写后缀，框架会自动寻找路径下的页面资源。注意：pages节点的第一项为应用入口页（即首页）。
- path 设置页面路径参考vue-router
- style 用于设置每个页面的状态栏、导航条、标题、窗口背景色等。
  1. navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如"#000000"
  2. navigationBarTextStyle String white 导航栏标题颜色，仅支持 black/white
  3. navigationBarTitleText String 导航栏标题文字内容
  4. backgroundColor HexColor #ffffff 窗口的背景色微信小程序
  5. backgroundTextStyle String dark 下拉 loading 的样式，仅支持 dark/light
  6. enablePullDownRefresh Boolean false 是否开启下拉刷新，详见页面相关事件处理函数
  7. onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离，单位为px
  8. navigationStyle String default 导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮。微信小程序
  9. backgroundColorTop String #ffffff 顶部窗口的背景色。微信小程序且为 iOS
  10. backgroundColorBottom String #ffffff 底部窗口的背景色。微信小程序且为 iOS
    代码示例：
```
<script>
{
    "pages": [{
        "index": {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页",//设置页面标题文字
                "enablePullDownRefresh":true//开启下拉刷新
            }
        }
        },
        ...
    ]
}
</script>
```
tabBar 设置底部 tab 的表现配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。 tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
属性说明：
- color HexColor 是 tab 上的文字默认颜色
- selectedColor HexColor 是 tab 上的文字选中时的颜色
- backgroundColor HexColor 是 tab 的背景色
- borderStyle String 否 black tabbar 上边框的颜色，仅支持 black/white
- list Array 是 tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
  1. pagePath String 是页面路径，必须在 pages 中先定义
  2. text String 是 tab 上按钮文字
  3. iconPath String 否图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片
  4. selectedIconPath String 否选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效
- position String 否 bottom 可选值 bottom、top

condition 启动模式配置仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。
属性说明：

current Number 是当前激活的模式，list节点的索引值
list Array 是启动模式列表
list说明：
name String 是启动模式名称
path String 是启动页面路径
query String 否启动参数，可在页面的 onLoad 函数里获得
注意：在5+app里真机运行可直接打开配置的页面，微信开发者工具里需要手动改变编译模式：代码示例：

<script>
    "condition": { //模式配置，仅开发期间生效
        "current": 0, //当前激活的模式（list 的索引项）
        "list": [{
                "name": "swiper", //模式名称
                "path": "pages/component/swiper/swiper", //启动页面，必选
                "query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。
            },
            {
                "name": "test",
                "path": "pages/component/switch/switch"
            }
        ]
    }
</script>

navigationBarBackgroundColor 导航栏背景颜色
navigationBarTextStyle String white 导航栏标题颜色，仅支持 black/white
navigationBarTitleText 导航栏标题文字内容
navigationStyle 导航栏样式，仅支持 default/custom。注意：当设置 "navigationStyle":"custom" 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏。
condition 启动模式配置

<script>
// 配置项参考
{
  "pages": [{
    "path": "pages/component/index",
    "style": {
      "navigationBarTitleText": "组件"
    }
  }, {
    "path": "pages/API/index",
    "style": {
      "navigationBarTitleText": "接口"
    }
  }, {
    "path": "pages/component/view/index",
    "style": {
      "navigationBarTitleText": "view"
    }
  }],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "演示",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/component/index",
      "iconPath": "static/image/icon_component.png",
      "selectedIconPath": "static/image/icon_component_HL.png",
      "text": "组件"
    }, {
      "pagePath": "pages/API/index",
      "iconPath": "static/image/icon_API.png",
      "selectedIconPath": "static/image/icon_API_HL.png",
      "text": "接口"
    }]
  }
}
</script>

# 配置文件 - manifest.json

这个文件推荐直接在hbuilderx中配置

# uni-app 页面生命周期

uni-app 支持如下页面生命周期函数：

onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为object（用于页面传参）
onShow 监听页面显示
onReady 监听页面初次渲染完成
onHide 监听页面隐藏
onUnload 监听页面卸载
onPullDownRefresh 监听用户下拉动作
onReachBottom 页面上拉触底事件的处理函数
onShareAppMessage 用户点击右上角分享微信小程序
onPageScroll 监听页面滚动
onTabItemTap 当前是 tab 页时，点击 tab 时触发。

# uni语法

数据绑定及样式参考vue

# 基础组件

参考官方文档

# uni Api

参考官方文档

# 打包及发布

uni目前可以打包项目生成h5、安卓、ios、小程序
uni-app打包发布流程:

选中菜单栏顶部的发型按钮
选择需要打包的类型或者选择最下角的生成统一发布页面可以全部打包

← 注意事项 uni-app 注意事项 →