基础（一）

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

起步

• 点击 HbuilderX 菜单栏文件 > 项目 > 新建
  
• 选择 uni-app，填写项目名称，项目创建的目录

在浏览器中运行：在菜单栏中点击运行，运行到浏览器，选择浏览器即可运行

在微信开发者工具里运行：进入创建的项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验 uni-app

在微信开发者工具里运行：进入创建的项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机

注意：

• 如果是第一次使用，需要先配置小程序 ide 的相关路径，才能运行成功
  
• 微信开发者工具在设置 -> 安全设置，开户服务端口开启

目录结构

pages 所有的页面存放目录。

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

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

components 组件存放目录。

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

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

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

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

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

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

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

全局配置

通过 pages.json 的 globalStyle 字段进行全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档

页面配置

右键 pages 新建，在新建目录下右键新建 .vue 文件，并选择基本模板

通过 pages.json 的 pages 字段来配置页面，第一个页面的配置都是一个对象

pages 数组中第一项表示应用启动页

通过 style 修改页面的标题和导航栏背景色，并且设置 h5 下拉刷新的特有样式

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
  {
    "path":"pages/message/message",
    "style": {
      "navigationBarBackgroundColor": "#007AFF",
      "navigationBarTextStyle": "white",
      "enablePullDownRefresh": true,
      "disableScroll": true,
      "h5": {
        "pullToRefresh": {
          "color": "#007AFF"
        }
      }
    }
  }
]

tabbar配置

在 pages.json 中提供 tabBar 字段，如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

Tips

• 当设置 position 为 top 时，将不会显示 icon
  
• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序

属性说明：

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

启动模式配置

在 pages.json 中提供 condition 字段，仅开发期间生效，用于模拟直达页面的场景，配置完后可以在小程序中选择编译模式。

属性说明：

list 属性说明：

样式

• rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。
  
• 使用 @import 语句可以导入外联样式表，@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束
  
• 支持基本常用的选择器 class、id、element 等
  
• 在 uni-app 中不能使用 * 选择器。
  
• page 相当于 body 节点
  
• 定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
  

• uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：

  • 字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；
    
  • 字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；
    
  • 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

    @font-face {
    font-family: test1-icon;
    src: url('~@/static/iconfont.ttf');
    }

• 在 HBuilderX 中使用 scss 或者 less 需要安装插件

数据绑定

在页面中需要定义数据，和我们之前的 vue 一模一样，直接在 data 中定义数据，然后使用 Mustache 语法

export default {
  data () {
    return {
      msg: 'hello-uni'
    }
  }
}

还有其它的一些指令，例如 v-bind 、 v-for 的使用方法都是相同的

生命周期

生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。

生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数

应用生命周期

页面生命周期

| 函数名 | 说明 | 平台差异说明 | 最低版本 | | onLoad | 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例 | | | | —- | —- | —- | —- | | onShow | 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 | | | | onReady | 监听页面初次渲染完成。 | | | | onHide | 监听页面隐藏 | | | | onUnload | 监听页面卸载 | | | | onPullDownRefresh | 监听用户下拉动作，一般用于下拉刷新，参考示例 | | | | onReachBottom | 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项 | | |

组件生命周期

uni-app 组件支持的生命周期，与 vue 标准组件的生命周期相同。这里没有页面级的 onLoad 等生命周期

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以 #ifdef 加平台标识 开头，以 #endif 结尾。
平台标识

API 的条件编译

代码演示

onLoad () {
  //#ifdef MP-WEIXIN
  console.log('微信小程序')
  //#endif
  //#ifdef H5
  console.log('h5页面')
  //#endif
}

组件的条件编译

代码演示

<!-- #ifdef H5 -->
<view>
  h5页面会显示
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>
  微信小程序会显示
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>
  app会显示
</view>
<!-- #endif -->

样式的条件注释

代码演示

/* #ifdef H5 */
view{
  height: 100px;
  line-height: 100px;
  background: red;
}
/* #endif */
/* #ifdef MP-WEIXIN */
view{
  height: 100px;
  line-height: 100px;
  background: green;
}
/* #endif */