开发工具

HBuilder-x
微信开发者工具

项目创建

步骤1：打开 HBuilder-x

步骤2：文件 -> 新建 -> 项目 -> uni-app项目

除了HBuilderX可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。

目录结构 / 分包结构

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb [详见uniCloud]
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录
├─unpackage             存放各平台专用页面的目录
├─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            配置页面路由、导航条、选项卡等页面类信息
└─uni.scss              这里是uni-app内置的常用样式变量 

文件简介

main.js

• main.js是 uni-app 的入口文件，主要作用是初始化 vue 实例、定义全局组件、使用需要的插件如 vuex。
• 首先引入了 Vue 库和 App.vue ，创建了一个 vue 实例，并且挂载 vue 实例。
• 使用Vue.use引用插件，使用Vue.prototype添加全局变量，使用Vue.component注册全局组件。
• 可以引用vuex，因涉及多个文件，此处没有提供示例，详见hello uni-app示例工程。
• 无法使用vue-router，路由须在pages.json中进行配置。如果开发者坚持使用vue-router，可以在插件 市场 (opens new window)找到转换插件。

App.vue

• App.vue 是uni-app的主组件，所有页面都是在 下进行App.vue 切换的，是页面入口文件。但 App.vue
• 本身不是页面，这里不能编写视图元素。
• 这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData
• 应用生命周期仅可在App.vue中监听，在页面监听无效。
• 在应用onLaunch时，getApp对象还未获取，暂时可以使用this.globalData获取globalData。
• 在 App.vue 中，可以定义一些全局通用样式，例如需要加一个通用的背景色，首屏页面渲染的动画等都可以写在 App.vue 中。

uni.scss

• uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
• uni-app 官方扩展插件（uni ui）及 插件市场 (opens new window)上很多三方插件均使用了这些样式变量，如果你是插件开发者，建议你使用 scss 预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App。
• uni.scss是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个uni.scss，使得每个scss文件都被注入这个uni.scss，达到全局可用的效果。如果开发者想要less、stylus的全局使用，需要在vue.config.js中自行配置webpack策略。

manifest.json

• manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。
• 各类网络请求的超时时间 networkTimeout，单位均为毫秒

pages.json

• 用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
• pages 配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象
• globalStyle 用于设置应用的状态栏、导航条、标题、窗口背景色等。
• topWindow, leftWindow , rightWindow用于解决宽屏适配问题。
• matchMedia 通过matchMedia的调节，可以自适应在不同屏幕上显示指定的window。

开发规范

1.页面文件遵循 Vue 单文件组件 (SFC) 规范

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

2.组件标签靠近小程序规范，详见uni-app 组件规范

3.接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范

4.数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期

生命周期

1.应用生命周期

2.页面生命周期

3.组件生命周期（同vue生命周期)

组件使用

1.npm组件

安装终端.png

npm i hm-uniapp-photo-card

安装完毕后 根目录会有 node_modules文件夹

2.uni-app组件

插件市场导入.png

HBuilder确认.png

import HmPhotoCard from '@/components/hm-photo-card/index.vue'
export default {
    components: { HmPhotoCard }
}

运行

image.png

1.微信小程序

需要设置服务端口

image.png

image.png

2. 其他小程序

在项目的跟目录\unpackage\dist\dev\mp-toutiao 将改文件加入头条小程序

HBuilderX 编辑 保存的时候 相应的小程序编辑器中 项目会自动刷新

跨端兼容 条件编译

uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。
但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

• 大量写 if else，会造成代码执行性能低下和管理混乱。
• 编译到不同的工程后二次修改，会让后续升级变的很麻烦。

在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

1. 写法

以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

• \#ifdef：if defined 仅在某平台存在
• \#ifndef：if not defined 除了某平台均存在
• %PLATFORM%：平台名称

2. %PLATFORM% 可取值如下：

3.示例

html

使用  <!-- -->
<view>
    <view>微信公众号关注组件</view>
    <view>
        <!-- uni-app未封装，但可直接使用微信原生的official-account组件-->
        <!-- #ifdef MP-WEIXIN -->
          <official-account></official-account>
        <!-- #endif -->
    </view>
</view>

js

使用 //
代码仅在 App 下运行
// #ifdef  APP-PLUS         
    APP 执行的相关代码
// #endif

代码会在 App 和 H5 平台上运行
// #ifdef  H5 || APP-PLUS
    H5执行的相关代码
// #endif

css

使用 /*  */
/*  #ifdef  MP-WEIXIN
  微信平台特有样式
/*  #endif  */

json

使用 //
//  #ifdef  MP-WEIXIN
  {
    path: “list/index.vue”,
    style: {}
  }
//  #endif