目录结构

一个uni-app工程，默认包含如下目录及文件：
┌─common 用于存放一些通用的 js/css/less/scss
│─cloudfunctions 云函数目录（阿里云为aliyun，腾讯云为tcb）
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放用于webview的本地网页的目录，详见
├─platforms 存放各平台专用页面的目录,详见
│ ├─ app-plus app
│ ├─ h5 h5
│ ├─ mp-weixin 微信小程序
├─pages 业务页面文件存放的目录
│ ├─index
│ └─index.vue index页面
├─static 存放静态资源（如图片、视频等）的目录，打包时其内容直接拷贝而不编译
├─wxcomponents 存放小程序组件的目录，详见
│ └──custom 微信小程序自定义组件
│ ├─index.js
│ ├─index.wxml
│ ├─index.json
│ └─index.wxss
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见

语法结构

• vue 页面文件遵循 Vue 单文件组件 (SFC) 规范，使用vue的数据绑定、事件处理
• 小程序 小程序的标签、自定义组件、api方法（前缀 wx 替换为 uni）、原生SDK
• mpvue （mini program vue）用vue语法开发小程序的一个框架
• HTML5+ 封装一些常用IOS、Android原生接口，通过JS调用，其方法均以plus开头，只能在app环境下使用
• nvue 即native vue，在weex基础上封装了uni的api，适合局部使用
• native.js 通过JS直接调用IOS、Android原生接口，用于未被HTML5+封装的接口

平台兼容

• Android的js运行在专门的容器中，各版本无兼容区别
• uni-app支持使用npm，但建议从 uni-app插件市场 获取插件，防止只兼容H5端（非 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 插件）
• 微信小程序自定义组件（wxcomponents目录下）在H5和APP也支持使用(但性能不如vue组件)，配置方式同微信小程序（pages.json => globalStyle => usingComponents）

WXS （WeiXin Script）

运行在视图层的js，避免逻辑层和渲染层交互通信折损。
仅支持编译到微信小程序、H5、app-vue
nvue可用bindingx代替

renderjs

运行在视图层的js，避免逻辑层和渲染层交互通信折损。
性能比WXS更好。
仅支持编译到 app-vue 和 H5
在视图层操作dom，因此可接触到dom、bom API，可使用f2、echarts、threejs库，但不可直接访问逻辑层数据，因此不可以使用 uni 相关接口（如：uni.request）

nvue

基于 weex 改进的原生渲染引擎，提供了原生渲染能力。

• 模式
  • weex模式（不建议使用）
    老模式，只能使用weex语法，只能编译为app
  • uni-app模式
    默认模式，使用通用的语法和组件，可以编译为全平台

vue页面使用webview渲染；nvue页面使用原生渲染。一个项目中两种页面可以混用。

• nvue与vue开发的语法区别

• 优势

  • 新的组件 list高性能长列表、waterfall高性能瀑布流、refresh高性能下拉刷新、barcode页面内嵌扫码等
  • 原生控件的层级覆盖问题
  • 深度使用video、map组件

• 劣势

  • canvas不如vue+renderjs，且nvue页面的css不支持媒体查询，不利于横竖屏动态切换、适配屏幕。

• IOS平台默认情况下滚动容器组件（如list、waterfall组件）内容不足时，由于没有撑满容器的可视区域会导致无法上下滚动，此时无法操作下拉刷新功能，无法触发refresh组件的@refresh、@pullingdown事件。 此时可在容器组件中配置alwaysScrollableVertical属性值为true来设置支持上下滚动，支持下拉刷新操作。

生命周期

应用生命周期

仅可在App.vue中监听，在其它页面监听无效。
onLaunch 、onShow、onHide 、onError 等

页面生命周期

onLoad 、onShow 、onReady 、onHide 、onUnload 、onPullDownRefresh 、onReachBottom 、onBackPress、onPageScroll等

组件生命周期

同vue组件生命周期
beforeCreate、created、beforeMount、mounted、beforeDestroy、destroyed

路由

通过pages.json配置，通过navigator组件或调用API跳转，类似小程序

环境判断

判断环境

可以在vue-config.js中配置更多环境

if(process.env.NODE_ENV === 'development'){
    console.log('开发环境')
}else{
    console.log('生产环境')
}

判断平台

1. 条件编译

// #ifdef H5
    alert("只有h5平台才有alert方法")
// #endif

2. 运行期判断 uni.getSystemInfoSync().platform

switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('运行Android上')
       break;
    case 'ios':
       console.log('运行iOS上')
       break;
    default:
       console.log('运行在开发者工具上')
       break;
}

样式

vue页面是webview渲染的、app端的nvue页面是原生渲染的。
为保证通用，应使用flex布局
rpx和px是通用的，但rem、vw、vh、百分比等在nvue中不支持
rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向
App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px，不支持 rpx

CSS

没有*选择器
page代替了body选择器
App.vue 中的样式为全局样式，nvue页面不支持全局样式

• 使用@import语句可以导入外联样式表

<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>

CSS变量

• 目前 nvue 在App端，还不支持--status-bar-height变量，替代方案是在页面onLoad时通过uni.getSystemInfoSync().statusBarHeight获取状态栏高度，然后通过style绑定方式给占位view设定高度

<template>
    <view class="content">
        <view :style="{ height: iStatusBarHeight + 'px'}"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                iStatusBarHeight:0
            }
        },
        onLoad() {
            this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
        }
    }
</script>

资源路径

• 小程序中不能使用相对路径引入静态资源
• 字体文件的网络路径必须为 https
• 小程序不支持在css中使用本地字体文件、背景图片，可转为base64后使用。小于40KB时HBuilder可自动转换。
• 本地图片/字体大于等于 40kb，会有性能问题。如需使用可以自行转base64或用网络资源(字体的网络路径必须为https协议头)
• nvue只能通过js引入字体
• 本地背景图片/字体推荐使用以 ~@ 开头的绝对路径。

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

template内引入静态资源

<!-- 绝对路径 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

js文件或script标签内（包括renderjs等）引入js

不支持/的绝对路径

// 绝对路径，@指向项目根目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'

css文件或style标签内引入css

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

css文件或style标签内引用的图片路径

引入字体图标请参考，字体图标

/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);

推荐使用<template/>进行条件/列表渲染