uniapp詳解及配置

網絡模型的變化

以前網頁大多是b/s，服務端代碼混合在頁面里；

現在是c/s，前后端分離，通過js api(類似ajax的uni.request)獲取json數據，把數據綁定在界面上渲染。

文件類型變化

以前是.html文件，現在是.vue文件

文件內代碼架構的變化

以前一個html大節點，里面有script和style節點；

現在template是一級節點，用於寫tag組件，script和style是並列的一級節點，也就是有3個一級節點。vue單文件組件規范sfc

<template>  
    <view>  
    注意必須有一個view，且只能有一個根view。所有內容寫在這個view下面。  
    </view>  
</template>  

<script>  
    export default {  

    }  
</script>  

<style>  

</style>

外部文件引用方式變化

以前通過script src、link href引入外部的js和css；

現在是es6的寫法，import引入外部的js模塊(注意不是文件)或css

js要require進來，變成了對象。

在hello uni-app的common目錄有一個工具類util.js，可以在hello uni-app中搜索這個例子查看。

<script>  
var util = require('../../../common/util.js');  //require這個js模塊  
var formatedPlayTime = util.formatTime(playTime); //調用js模塊的方法  
</script>

而在這個util.js里，要把之前的function封裝為對象的方法

function formatTime(time) {  
    return time;//這里沒寫邏輯  
}  

module.exports = {  
    formatTime: formatTime  
}

當然還有一些高級的用法

var dateUtils = require('../../../common/util.js').dateUtils; //直接使用js模塊的屬性。在hello uni-app有示例  
import * as echarts from '/components/echarts/echarts.simple.min.js'; //將js導入並重命名為echarts，然后使用echarts.來繼續執行方法。在hello uni-app有示例

css外部文件導入

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

    .uni-hello-text{  
        color:#7A7E83;  
    }  
</style>

全局樣式，在根目錄下的app.vue里寫入，每個頁面都會加載app.vue里的樣式。

另外，vue支持組件導入，可以更方便的封裝一個包括界面、js、樣式的庫。

如下是導入一個角標的組件庫，在頁面上顯示一個abc並且右上角有個數字角標1

<template>  
    <view>  
        <uni-badge text="abc" :inverted="true"></uni-badge><!--3.使用組件-->  
    </view>  
</template>  
<script>  
    import uniBadge from "../../../components/uni-badge.vue";//1.導入組件  
    export default {  
        data() {  
            return {  

            }  
        },  
        components: {  
            uniBadge //2.注冊組件  
        }  
    }  
</script>

如需要全局導入vue組件，即每個頁面都可以直接使用而不用引用和注冊的話，在項目根目錄下的main.js里處理。如下是hello uni-app里的例子。

//main.js  
import pageHead from './components/page-head.vue' //導入  
Vue.component('page-head', pageHead) //注冊。注冊后在每個vue的page頁面里可以直接使用<page-head></page-head>組件。

組件/標簽的變化

具體說來：

• div 改成 view
• span、font 改成 text
• a 改成 navigator
• img 改成 image
• input 還在，但type屬性改成了confirmtype
• form、button、checkbox、radio、label、textarea、canvas、video 這些還在。
• select 改成 picker
• iframe 改成 web-view
• ul、li沒有了，都用view替代
• audio 不再推薦使用，改成api方式，背景音頻api文檔
  其實老的HTML標簽也可以在uni-app里使用，uni-app編譯器會在編譯時把老標簽轉為新標簽，比如把div編譯成view。但不推薦這種用法，調試H5端時容易混亂。

除了改動外，新增了一批手機端常用的新組件

• scroll-view 可區域滾動視圖容器
• swiper 可滑動區域視圖容器
• icon 圖標
• rich-text 富文本（不可執行js，但可渲染各種文字格式和圖片）
• progress 進度條
• slider 滑塊指示器
• switch 開關選擇器
• camera 相機
• live-player 直播
• map 地圖

• cover-view 可覆蓋原生組件的視圖容器 

  cover-view需要多強調幾句，uni-app的非h5端的video、map、canvas、textarea是原生組件，層級高於其他組件。如需覆蓋原生組件，比如在map上加個遮罩，則需要使用cover-view組件

除了內置組件，還有很多開源的擴展組件，把常用操作都進行封裝，DCloud建立了插件市場收錄這些擴展組件，詳見插件市場

js的變化

js的變化，分為運行環境變化、數據綁定模式變化、api變化3部分。

標准js語法和api都支持，比如if、for、settimeout、indexOf等。

但瀏覽器專用的window、document、navigator、location對象，包括cookie等存儲，只有在瀏覽器中才有，app和小程序都不支持。

可能有些人以為js等於瀏覽器里的js。其實js是ECMAScript組織管理的，瀏覽器中的js是w3c組織基於js規范補充了window、document、navigator、location等專用對象。

在uni-app的各個端中，除了h5端，其他端的js都運行在一個獨立的v8引擎下，不是在瀏覽器中，所以瀏覽器的對象無法使用。如果你做過小程序開發，對此應當很了解。

這意味着依賴document的很多HTML的庫，比如jqurey無法使用。

當然app和小程序支持web-view組件，里面可以加載標准HTML，這種頁面仍然支持瀏覽器專用對象window、document、navigator、location。

• 以前的dom操作，改成vue的MVVM模式

現在前端趨勢是去dom化，改用mvvm模式，更簡潔的寫法，大幅減少代碼行數，同時差量渲染性能更好。

uni-app使用vue的數據綁定方式解決js和dom界面交互的問題。

如果你想改變某個dom元素的顯示內容，比如一個view的顯示文字：

以前是給view設id，然后js里通過選擇器獲取dom元素，進一步通過js進行賦值操作，修改dom元素的屬性或值。

如下演示了一段代碼，頁面中有個顯示的文字區和一個按鈕，點擊按鈕后會修改文字區的值

<template>  
    <view>  
        <text>{{textvalue}}</text><!-- 這里演示了組件值的綁定 -->  
        <button :type="buttontype" @click="changetextvalue()">修改為789</button><!-- 這里演示了屬性和事件的綁定 -->  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                textvalue:"123",  
                buttontype:"primary"  
            };  
        },  
        onLoad() {  
            this.textvalue="456"//這里修改textvalue的值，其實123都來不及顯示就變成了456  
        },  
        methods: {  
            changetextvalue() {  
                this.textvalue="789"//這里修改textvalue的值，頁面自動刷新為789  
            }  
        }  
    }  
</script>

如果你學過小程序的數據綁定，但不了解vue，要注意：

• 小程序的數據綁定參考了vue，但自己修改了一些。在uni-app中只支持標准的vue，不支持小程序的數據綁定語法

• 小程序里的setData在uni-app里並不存在，因為vue是自動雙向數據綁定的。直接通過賦值方式修改數據，如果數據綁定到界面上，界面會自動更新渲染

• js api的變化

因為uni-app的api是參考小程序的，所以和瀏覽器的js api有很多不同，如

1. alert,confirm 改成 uni.showmodel
2. ajax 改成 uni.request
3. cookie、session 沒有了，local.storage 改成 uni.storage

uni-app的js api還有很多，但基本就是小程序的api，把wx.xxx改為uni.xxx即可。詳見

uni-app在不同的端，支持條件編譯，無限制的使用各端獨有的api，詳見條件編譯

css的變化

標准的css基本都是支持的。

選擇器有2個變化：*選擇器不支持；元素選擇器里沒有body，改為了page。微信小程序即是如此。

單位方面，px無法動態適應不同寬度的屏幕，rem無法用於nvue/weex。如果想使用根據屏幕寬度自適應的單位，推薦使用rpx，全端支持。

uni-app推薦使用flex布局，並默認就是flex布局，這個布局思路和傳統流式布局有點區別。但flex的有趣在於，不管是什么技術都支持這種排版，web、小程序/快應用、weex/rn、原生的iOS、Android開發，全都支持flex。它是通吃所有端的新一代布局方案。相關教程請自行百度學習。

uni-app的vue文件里支持所有web排版方式，不管是流式還是flex。但nvue里，只支持flex，因為它在app端是使用原生排版引擎渲染的。

注意背景圖和字體文件盡量不要大於40k。會影響性能。如果非要大於40k，需放到服務器側遠程引用或base64后引入，不能放到本地作為獨立文件引用。在小程序里，其實小於40k的文件在css里也無法引用，uni-app編譯器在編譯時自動做了處理，把小於40k的文件編譯為base64方式了。

工程結構和頁面管理

uni-app的工程結構有單獨的要求，詳見

每個可顯示的頁面，都必須在 pages.json 中注冊。如果你開發過小程序，那么pages.json類似app.json。如果你熟悉vue，這里沒有vue的路由，都是在pages.json里管理。

原來工程的首頁一般是index.html或default.html，是在web server里配的。而uni-app的首頁，是在pages.json里配的，page節點下第一個頁面就是首頁。一般在/pages/xx的目錄下。

app和小程序中，為了提升體驗，頁面提供了原生的導航欄和底部tabbar，注意這些配置是在pages.json中做，而不是在vue頁面里創建，但點擊事件的監聽在顯示的vue頁面中做。

在vue中，以前的js事件監聽概念改為了生命周期概念。詳見uni-app生命周期

如果你熟悉小程序開發的話，對比變化如下：

• 原來app.json被一拆為二。頁面管理，被挪入了uni-app的pages.json；非頁面管理，挪入了manifest.json
• 原來的app.js和app.wxss被合並到了app.vue中

開發規范

為了實現多端兼容，綜合考慮編譯速度、運行性能等因素，uni-app 約定了如下開發規范：

• 頁面文件遵循 Vue 單文件組件 (SFC) 規范
• 組件標簽靠近小程序規范，詳見uni-app 組件規范
• 接口能力（JS API）靠近微信小程序規范，但需將前綴 wx 替換為 uni，詳見uni-app接口規范
• 數據綁定及事件處理同 Vue.js 規范，同時補充了App及頁面的生命周期
• 為兼容多端運行，建議使用flex布局進行開發

目錄結構

一個uni-app工程，默認包含如下目錄及文件：

┌─components uni-app組件目錄

│ └─comp-a.vue 可復用的a組件

├─hybrid 存放本地網頁的目錄，

├─platforms 存放各平台專用頁面的目錄，

├─pages 業務頁面文件存放的目錄

│ ├─index

│ │ └─index.vue index頁面

│ └─list

│ └─list.vue list頁面

├─static 存放應用引用靜態資源（如圖片、視頻等）的目錄，注意：靜態資源只能存放於此

├─wxcomponents 存放小程序組件的目錄，

├─main.js Vue初始化入口文件

├─App.vue 應用配置，用來配置App全局樣式以及監聽

├─manifest.json 配置應用名稱、appid、logo、版本等打包信息

└─pages.json 配置頁面路由、導航條、選項卡等頁面類信息

Tips

• static 目錄下的 js 文件不會被編譯，如果里面有 es6 的代碼，不經過轉換直接運行，在手機設備上會報錯。
• css、less/scss 等資源同樣不要放在 static 目錄下，建議這些公用的資源放在 common 目錄下。
• HbuilderX 1.9.0+ 支持在根目錄創建 ext.json sitemap.json 文件。

資源路徑說明

模板內引入靜態資源：

template內引入靜態資源，如image、video等標簽的src屬性時，可以使用相對路徑或者絕對路徑

js文件引入：

js文件或script標簽內（包括renderjs等）引入js文件時，可以使用相對路徑和絕對路徑

css引入靜態資源：

css文件或style標簽內引入css文件時（scss、less文件同理），只能使用相對路徑
注意：自HBuilderX 2.6.6-alpha起支持絕對路徑引入靜態資源，舊版本不支持此方式

路由 

uni-app頁面路由為框架統一管理，開發者需要在pages.json里配置每個路由頁面的路徑及頁面樣式。類似小程序在app.json中配置頁面路由一樣。所以 uni-app 的路由用法與 Vue Router 不同，如仍希望采用 Vue Router 方式管理路由，可在插件市場搜索 Vue-Router。

路由跳轉

uni-app 有兩種頁面路由跳轉方式：使用navigator組件跳轉、調用API跳轉。

運行環境判斷

開發環境和生產環境：

uni-app 可通過 process.env.NODE_ENV 判斷當前環境是開發環境還是生產環境。一般用於連接測試服務器或生產服務器的動態切換。

• 在HBuilderX 中，點擊“運行”編譯出來的代碼是開發環境，點擊“發行”編譯出來的代碼是生產環境
• cli模式下，是通行的編譯環境處理方式。

if(process.env.NODE_ENV === 'development'){
    console.log('開發環境')
}else{
    console.log('生產環境')
}

判斷平台

平台判斷有2種場景，一種是在編譯期判斷，一種是在運行期判斷。

編譯期判斷 編譯期判斷，即條件編譯，不同平台在編譯出包后已經是不同的代碼。

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

如上代碼只會編譯到H5的發行包里，其他平台的包不會包含如上代碼。

運行期判斷 運行期判斷是指代碼已經打入包中，仍然需要在運行期判斷平台，此時可使用 uni.getSystemInfoSync().platform 判斷客戶端環境是 Android、iOS 還是小程序開發工具（在百度小程序開發工具、微信小程序開發工具、支付寶小程序開發工具中使用 uni.getSystemInfoSync().platform 返回值均為 devtools）。

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

如有必要，也可以在條件編譯里自己定義一個變量，賦不同值。在后續運行代碼中動態判斷環境。

頁面樣式與布局

尺寸單位：uni-app 支持的通用 css 單位包括 px、rpx

vue頁面支持普通H5單位，但在nvue里不支持：

• rem 默認根字體大小為 屏幕寬度/20（微信小程序、字節跳動小程序、App、H5）
• vh viewpoint height，視窗高度，1vh等於視窗高度的1%
• vw viewpoint width，視窗寬度，1vw等於視窗寬度的1%

nvue還不支持百分比單位。

App端，在 pages.json 里的 titleNView 或頁面里寫的 plus api 中涉及的單位，只支持 px。注意此時不支持 rpx

nvue中，uni-app 模式（nvue 不同編譯模式介紹）可以使用 px 、rpx，表現與 vue 中一致。weex 模式目前遵循weex的單位，它的單位比較特殊：

• px:，以750寬的屏幕為基准動態計算的長度單位，與 vue 頁面中的 rpx 理念相同。（一定要注意 weex 模式的 px，和 vue 里的 px 邏輯不一樣。）
• wx：與設備屏幕寬度無關的長度單位，與 vue 頁面中的 px 理念相同

下面對 rpx 詳細說明：

微信小程序設計了 rpx 解決這個問題，uni-app 在 App 端、H5 端都支持了 rpx。

rpx 是相對於基准寬度的單位，可以根據屏幕寬度進行自適應。uni-app 規定屏幕基准寬度 750rpx。

開發者可以通過設計稿基准寬度計算頁面元素 rpx 值，設計稿 1px 與框架樣式 1rpx 轉換公式如下：

設計稿 1px / 設計稿基准寬度 = 框架樣式 1rpx / 750rpx

換言之，頁面元素寬度在 uni-app 中的寬度計算公式：

750 * 元素在設計稿中的寬度 / 設計稿基准寬度

舉例說明：

1. 若設計稿寬度為 750px，元素 A 在設計稿上的寬度為 100px，那么元素 A 在 uni-app 里面的寬度應該設為：750 * 100 / 750，結果為：100rpx。
2. 若設計稿寬度為 640px，元素 A 在設計稿上的寬度為 100px，那么元素 A 在 uni-app 里面的寬度應該設為：750 * 100 / 640，結果為：117rpx。
3. 若設計稿寬度為 375px，元素 B 在設計稿上的寬度為 200px，那么元素 B 在 uni-app 里面的寬度應該設為：750 * 200 / 375，結果為：400rpx。

跨端兼容

uni-app 已將常用的組件、JS API 封裝到框架中，開發者按照 uni-app 規范開發即可保證多平台兼容，大部分業務均可直接滿足。

但每個平台有自己的一些特性，因此會存在一些無法跨平台的情況。

• 大量寫 if else，會造成代碼執行性能低下和管理混亂。
• 編譯到不同的工程后二次修改，會讓后續升級變的很麻煩。

uni-app 提供了條件編譯手段，在一個工程里優雅的完成了平台個性化實現。

條件編譯

條件編譯是用特殊的注釋作為標記，在編譯時根據這些特殊的注釋，將注釋里面的代碼編譯到不同平台。

寫法：以 #ifdef 或 #ifndef 加 %PLATFORM% 開頭，以 #endif 結尾。

• #ifdef：if defined 僅在某平台存在
• #ifndef：if not defined 除了某平台均存在
• %PLATFORM%：平台名稱

條件編譯寫法	說明
#ifdef APP-PLUS 需條件編譯的代碼 #endif	僅出現在 App 平台下的代碼
#ifndef H5 需條件編譯的代碼 #endif	除了 H5 平台，其它平台均存在的代碼
#ifdef H5 || MP-WEIXIN 需條件編譯的代碼 #endif	在 H5 平台或微信小程序平台存在的代碼（這里只有||，不可能出現&&，因為沒有交集）

%PLATFORM% 可取值如下：

值	平台	參考文檔
APP-PLUS	App	HTML5+ 規范
APP-PLUS-NVUE	App nvue	Weex 規范
H5	H5
MP-WEIXIN	微信小程序	微信小程序
MP-ALIPAY	支付寶小程序	支付寶小程序
MP-BAIDU	百度小程序	百度小程序
MP-TOUTIAO	字節跳動小程序	字節跳動小程序
MP-QQ	QQ小程序	（目前僅cli版支持）
MP	微信小程序/支付寶小程序/百度小程序/字節跳動小程序/QQ小程序

注意： 條件編譯是利用注釋實現的，在不同語法里注釋寫法不一樣，js使用 // 注釋、css 使用 /* 注釋 */、vue/nvue 模板里使用 <!-- 注釋 -->

API 的條件編譯：

示例，如下代碼僅在 App 下出現:

示例，如下代碼不會在 H5 平台上出現：

示例，如下代碼會在 App 和 H5 平台上出現：

組件的條件編譯：

示例，如下廣告組件僅會在微信小程序中出現：

樣式的條件編譯：

樣式的條件編譯，無論是 css 還是 sass/scss/less/stylus 等預編譯語言中，必須使用 /*注釋*/ 的寫法。

pages.json 的條件編譯：

下面的頁面，只有運行至 App 時才會編譯進去

不同平台下的特有功能，以及小程序平台的分包，都可以通過 pages.json 的條件編譯來更好地實現。這樣，就不會在其它平台產生多余的資源，進而減小包體積。

json的條件編譯，如不同平台的key名稱相同，cli項目下開發者自己安裝的校驗器會報錯，需自行關閉這些校驗器對json相同key的校驗規則。如果使用HBuilderX的校驗器，無需在意此問題，HBuilderX的語法校驗器為此優化過。

static 目錄的條件編譯：

在不同平台，引用的靜態資源可能也存在差異，通過 static 的的條件編譯可以解決此問題，static 目錄下新建不同平台的專有目錄（目錄名稱同 %PLATFORM% 值域,但字母均為小寫），專有目錄下的靜態資源只有在特定平台才會編譯進去。

如以下目錄結構，a.png 只有在微信小程序平台才會編譯進去，b.png 在所有平台都會被編譯。

┌─static

│ ├─mp-weixin

│ │ └─a.png

│ └─b.png

├─main.js

├─App.vue

├─manifest.json

└─pages.json

整體目錄條件編譯：

如果想把各平台的頁面文件更徹底的分開，也可以在uni-app項目根目錄創建platforms目錄，然后在下面進一步創建APP-PLUS、MP-WEIXIN等子目錄，存放不同平台的文件。

在 HBuilderX 中，ctrl+alt+/ 即可生成正確注釋（js：// 注釋、css：/* 注釋 */、vue/nvue模板： <!-- 注釋 -->）。 

配置

pages.json

pages.json 文件用來對 uni-app 進行全局配置，決定頁面文件的路徑、窗口樣式、原生的導航欄、底部的原生tabbar 等。

condition 

啟動模式配置，僅開發期間生效，用於模擬直達頁面的場景，如：小程序轉發后，用戶點擊所打開的頁面。

屬性說明：

屬性	類型	是否必填	描述
current	Number	是	當前激活的模式，list節點的索引值
list	Array	是	啟動模式列表

list說明：

屬性	類型	是否必填	描述
name	String	是	啟動模式名稱
path	String	是	啟動頁面路徑
query	String	否	啟動參數，可在頁面的 onLoad 函數里獲得

注意： 在 App 里真機運行可直接打開配置的頁面，微信開發者工具里需要手動改變編譯模式，如下圖：

代碼示例：

"condition": { //模式配置，僅開發期間生效
        "current": 0, //當前激活的模式（list 的索引項）
        "list": [
                {
                    "name": "index", //模式名稱
                    "path" : "pages/index/index",
                    "query": "interval=4000&autoplay=false" //啟動參數，在頁面的onLoad函數里面得到。
                },
                {
                    "name": "about", //模式名稱
                    "path" : "pages/about/about",
                    "query": "" //啟動參數，在頁面的onLoad函數里面得到。
                }
        ]
    }

manifest.json

manifest.json 文件是應用的配置文件，用於指定應用的名稱、圖標、權限等。

package.json

通過在package.json文件中增加uni-app擴展節點，可實現自定義條件編譯平台（如釘釘小程序、微信服務號等平台）。

vue.config.js

vue.config.js 是一個可選的配置文件，如果項目的根目錄中存在這個文件，那么它會被自動加載，一般用於配置 webpack 等編譯選項，具體規范參考：vue.config.js

uni.scss

uni.scss文件的用途是為了方便整體控制應用的風格。比如按鈕顏色、邊框風格，uni.scss文件里預置了一批scss變量預置。

uni.scss是一個特殊文件，在代碼中無需 import 這個文件即可在scss代碼中使用這里的樣式變量。uni-app的編譯器在webpack配置中特殊處理了這個uni.scss，使得每個scss文件都被注入這個uni.scss，達到全局可用的效果。如果開發者想要less、stylus的全局使用，需要在vue.config.js中自行配置webpack策略。

App.vue

App.vue是uni-app的主組件，所有頁面都是在App.vue下進行切換的，是頁面入口文件。但App.vue本身不是頁面，這里不能編寫視圖元素。

這個文件的作用包括：調用應用生命周期函數、配置全局樣式、配置全局的存儲globalData

main.js

main.js是uni-app的入口文件，主要作用是初始化vue實例、定義全局組件、使用需要的插件如vuex。

使用代碼塊直接創建組件模板 

為提升開發效率，HBuilderX將 uni-app 常用代碼封裝成了以 u 開頭的代碼塊，如在 template 標簽內輸入 ulist 回車，會自動生成如下代碼：

<view class="uni-list">
    <view class="uni-list-cell">
        <view class="uni-list-cell-navigate uni-navigate-right" v-for="(item,index) in list" :key="index">
            {{item.value}}
        </view>
    </view>
</view>

代碼塊分為Tag代碼塊、JS代碼塊，如在 script 標簽內輸入 uShowToast 回車，會自動生成如下代碼：

uni.showToast({
    title: '',
    mask: false
    duration: 1500
});

uni-app已支持代碼塊見下方列表。

Tag代碼塊：

• uButton
• uCheckbox
• uGrid：宮格，需引用uni ui
• uList：列表，需引用uni ui
• uListMedia
• uRadio
• uSwiper

幾乎各種組件不管是內置組件還是uni ui的組件，均已封裝為代碼塊，在HBuilderX的vue代碼template區域中敲u，代碼助手會提示所有可見列表。也可在HBuilderX菜單工具-代碼塊設置-vue代碼塊的左側列表查閱所有。

除組件外，其他常用代碼塊包括：

• viewfor：生成一段帶有v-for循環結構的視圖代碼塊
• vbase：生成一段基本的vue代碼結構

JS代碼塊：

uni api代碼塊：

• uRequest
• uGetLocation
• uShowToast
• uShowLoading
• uHideLoading
• uShowModal
• uShowActionSheet
• uNavigateTo
• uNavigateBack
• uRedirectTo
• uStartPullDownRefresh
• uStopPullDownRefresh
• uLogin
• uShare
• uPay

vue js代碼塊：

• vImport：導入文件
• ed：export default
• vData：輸出 data(){return{}}
• vMethod：輸出 methods:{}
• vComponents：輸出 components: {}

其他常用js代碼塊：

• iff：簡單if
• forr：for循環結構體
• fori：for循環結構體並包含i
• funn：函數
• funa：匿名函數
• rt：return true
• clog：輸出："console.log()"
• clogvar：增強的日志輸出，可同時把變量的名字打印出來
• varcw：輸出："var currentWebview = this.$mp.page.$getAppWebview()"
• ifios：iOS的平台判斷
• ifAndroid：Android的平台判斷

預置代碼塊不滿足需求的話，可以自定義代碼塊，教程參考https://ask.dcloud.net.cn/article/35924

混合開發問題：

uni-app和原生App混合開發問題：

首先務必確認uni-app和原生代碼，誰是主誰是從的問題。

• 如果你的應用是uni-app開發的，需要擴展一些原生能力，那么請參考插件市場右上角的原生插件開發教程。
• 如果你的App是原生開發的，部分功能欄目想通過uni-app實現，有2種方式
  • 在原生App里集成uni小程序sdk，參考
  • 如果不想集成原生sdk，那就把uni-app代碼發布成H5方式，在原生App里通過webview打開。

如果應用是uni-app開發為主，只是想離線打包，那么不應該使用uni小程序sdk，請在HBuilderX的發行菜單里點擊離線打包。 另注意離線打包無法享受插件市場的付費原生插件，如有相關需求需自己進行原生插件開發，參考插件市場右上角的原生插件開發教程。

uni-app和原生小程序混合開發問題：

uni-app編譯后的wxml代碼沒有可維護性，不便於整合到原生小程序里。如果想復用原生小程序的代碼：

• 方式1：把原生小程序的代碼變成組件，uni-app支持使用小程序wxml組件，參考
• 方式2：把原生小程序轉換為uni-app源碼，有各種轉換工具，詳見