目錄結(jié)構(gòu)

一個(gè)uni-app工程，默認(rèn)包含如下目錄及文件：
┌─common 用于存放一些通用的 js/css/less/scss
│─cloudfunctions 云函數(shù)目錄（阿里云為aliyun押搪，騰訊云為tcb）
│─components 符合vue組件規(guī)范的uni-app組件目錄
│ └─comp-a.vue 可復(fù)用的a組件
├─hybrid 存放用于webview的本地網(wǎng)頁的目錄，詳見
├─platforms 存放各平臺(tái)專用頁面的目錄,詳見
│ ├─ app-plus app
│ ├─ h5 h5
│ ├─ mp-weixin 微信小程序
├─pages 業(yè)務(wù)頁面文件存放的目錄
│ ├─index
│ └─index.vue index頁面
├─static 存放靜態(tài)資源（如圖片闪水、視頻等）的目錄报破，打包時(shí)其內(nèi)容直接拷貝而不編譯
├─wxcomponents 存放小程序組件的目錄任连，詳見
│ └──custom 微信小程序自定義組件
│ ├─index.js
│ ├─index.wxml
│ ├─index.json
│ └─index.wxss
├─main.js Vue初始化入口文件
├─App.vue 應(yīng)用配置蚤吹，用來配置App全局樣式以及監(jiān)聽應(yīng)用生命周期
├─manifest.json 配置應(yīng)用名稱、appid随抠、logo距辆、版本等打包信息余佃，詳見
└─pages.json 配置頁面路由、導(dǎo)航條跨算、選項(xiàng)卡等頁面類信息爆土，詳見

語法結(jié)構(gòu)

• vue 頁面文件遵循 Vue 單文件組件 (SFC) 規(guī)范，使用vue的數(shù)據(jù)綁定诸蚕、事件處理
• 小程序 小程序的標(biāo)簽步势、自定義組件、api方法（前綴 wx 替換為 uni）背犯、原生SDK
• mpvue （mini program vue）用vue語法開發(fā)小程序的一個(gè)框架
• HTML5+ 封裝一些常用IOS坏瘩、Android原生接口，通過JS調(diào)用漠魏，其方法均以plus開頭倔矾，只能在app環(huán)境下使用
• nvue 即native vue，在weex基礎(chǔ)上封裝了uni的api柱锹，適合局部使用
• native.js 通過JS直接調(diào)用IOS哪自、Android原生接口，用于未被HTML5+封裝的接口

平臺(tái)兼容

• Android的js運(yùn)行在專門的容器中禁熏，各版本無兼容區(qū)別
• uni-app支持使用npm壤巷，但建議從 uni-app插件市場(chǎng) 獲取插件，防止只兼容H5端（非 H5 端不支持使用含有 dom瞧毙、window 等操作的 vue 組件和 js 插件）
• 微信小程序自定義組件（wxcomponents目錄下）在H5和APP也支持使用(但性能不如vue組件)胧华，配置方式同微信小程序（pages.json => globalStyle => usingComponents）

WXS （WeiXin Script）

運(yùn)行在視圖層的js，避免邏輯層和渲染層交互通信折損宙彪。
僅支持編譯到微信小程序矩动、H5、app-vue
nvue可用bindingx代替

renderjs

運(yùn)行在視圖層的js释漆，避免邏輯層和渲染層交互通信折損悲没。
性能比WXS更好。
僅支持編譯到 app-vue 和 H5
在視圖層操作dom灵汪，因此可接觸到dom、bom API柑潦，可使用f2享言、echarts、threejs庫渗鬼，但不可直接訪問邏輯層數(shù)據(jù)览露，因此不可以使用 uni 相關(guān)接口（如：uni.request）

nvue

基于 weex 改進(jìn)的原生渲染引擎，提供了原生渲染能力譬胎。

• 模式
  • weex模式（不建議使用）
    老模式差牛，只能使用weex語法命锄，只能編譯為app
  • uni-app模式
    默認(rèn)模式，使用通用的語法和組件偏化，可以編譯為全平臺(tái)

vue頁面使用webview渲染脐恩；nvue頁面使用原生渲染。一個(gè)項(xiàng)目中兩種頁面可以混用侦讨。

• nvue與vue開發(fā)的語法區(qū)別

• 優(yōu)勢(shì)

  • 新的組件 list高性能長(zhǎng)列表驶冒、waterfall高性能瀑布流、refresh高性能下拉刷新韵卤、barcode頁面內(nèi)嵌掃碼等
  • 原生控件的層級(jí)覆蓋問題
  • 深度使用video骗污、map組件

• 劣勢(shì)

  • canvas不如vue+renderjs，且nvue頁面的css不支持媒體查詢沈条，不利于橫豎屏動(dòng)態(tài)切換需忿、適配屏幕。

• IOS平臺(tái)默認(rèn)情況下滾動(dòng)容器組件（如list蜡歹、waterfall組件）內(nèi)容不足時(shí)屋厘，由于沒有撐滿容器的可視區(qū)域會(huì)導(dǎo)致無法上下滾動(dòng)，此時(shí)無法操作下拉刷新功能季稳，無法觸發(fā)refresh組件的@refresh擅这、@pullingdown事件。 此時(shí)可在容器組件中配置alwaysScrollableVertical屬性值為true來設(shè)置支持上下滾動(dòng)景鼠，支持下拉刷新操作仲翎。

生命周期

應(yīng)用生命周期

僅可在App.vue中監(jiān)聽，在其它頁面監(jiān)聽無效铛漓。
onLaunch 溯香、onShow、onHide 浓恶、onError 等

頁面生命周期

onLoad 玫坛、onShow 、onReady 包晰、onHide 湿镀、onUnload 、onPullDownRefresh 伐憾、onReachBottom 勉痴、onBackPress、onPageScroll等

組件生命周期

同vue組件生命周期
beforeCreate树肃、created蒸矛、beforeMount、mounted、beforeDestroy雏掠、destroyed

路由

通過pages.json配置斩祭，通過navigator組件或調(diào)用API跳轉(zhuǎn)，類似小程序

環(huán)境判斷

判斷環(huán)境

可以在vue-config.js中配置更多環(huán)境

if(process.env.NODE_ENV === 'development'){
    console.log('開發(fā)環(huán)境')
}else{
    console.log('生產(chǎn)環(huán)境')
}

判斷平臺(tái)

1. 條件編譯

// #ifdef H5
    alert("只有h5平臺(tái)才有alert方法")
// #endif

2. 運(yùn)行期判斷 uni.getSystemInfoSync().platform

switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('運(yùn)行Android上')
       break;
    case 'ios':
       console.log('運(yùn)行iOS上')
       break;
    default:
       console.log('運(yùn)行在開發(fā)者工具上')
       break;
}

樣式

vue頁面是webview渲染的乡话、app端的nvue頁面是原生渲染的摧玫。
為保證通用，應(yīng)使用flex布局
rpx和px是通用的蚊伞，但rem席赂、vw、vh时迫、百分比等在nvue中不支持
rpx不支持動(dòng)態(tài)橫豎屏切換計(jì)算颅停，使用rpx建議鎖定屏幕方向
App端，在 pages.json 里的 titleNView 或頁面里寫的 plus api 中涉及的單位掠拳，只支持 px癞揉，不支持 rpx

CSS

沒有*選擇器
page代替了body選擇器
App.vue 中的樣式為全局樣式，nvue頁面不支持全局樣式

• 使用@import語句可以導(dǎo)入外聯(lián)樣式表

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

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

CSS變量

• 目前 nvue 在App端溺欧，還不支持--status-bar-height變量喊熟，替代方案是在頁面onLoad時(shí)通過uni.getSystemInfoSync().statusBarHeight獲取狀態(tài)欄高度，然后通過style綁定方式給占位view設(shè)定高度

<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>

資源路徑

• 小程序中不能使用相對(duì)路徑引入靜態(tài)資源
• 字體文件的網(wǎng)絡(luò)路徑必須為 https
• 小程序不支持在css中使用本地字體文件姐刁、背景圖片芥牌，可轉(zhuǎn)為base64后使用。小于40KB時(shí)HBuilder可自動(dòng)轉(zhuǎn)換聂使。
• 本地圖片/字體大于等于 40kb壁拉，會(huì)有性能問題。如需使用可以自行轉(zhuǎn)base64或用網(wǎng)絡(luò)資源(字體的網(wǎng)絡(luò)路徑必須為https協(xié)議頭)
• nvue只能通過js引入字體
• 本地背景圖片/字體推薦使用以 ~@ 開頭的絕對(duì)路徑柏靶。

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

template內(nèi)引入靜態(tài)資源

<!-- 絕對(duì)路徑 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相對(duì)路徑 -->
<image class="logo" src="../../static/logo.png"></image>

js文件或script標(biāo)簽內(nèi)（包括renderjs等）引入js

不支持/的絕對(duì)路徑

// 絕對(duì)路徑弃理，@指向項(xiàng)目根目錄
import add from '@/common/add.js'
// 相對(duì)路徑
import add from '../../common/add.js'

css文件或style標(biāo)簽內(nèi)引入css

/* 絕對(duì)路徑 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相對(duì)路徑 */
@import url('../../common/uni.css');

css文件或style標(biāo)簽內(nèi)引用的圖片路徑

引入字體圖標(biāo)請(qǐng)參考，字體圖標(biāo)

/* 絕對(duì)路徑 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相對(duì)路徑 */
background-image: url(../../static/logo.png);

推薦使用<template/>進(jìn)行條件/列表渲染