uniapp詳解及配置

時間  2020-09-20
標籤 uniapp 詳解 配置 简体版
原文   原文鏈接

網絡模型的變化

之前網頁大可能是b/s，服務端代碼混合在頁面裏；css

如今是c/s，先後端分離，經過js api(相似ajax的uni.request)獲取json數據，把數據綁定在界面上渲染。html

文件類型變化

之前是.html文件，如今是.vue文件前端

文件內代碼架構的變化

之前一個html大節點，裏面有script和style節點；vue

如今template是一級節點，用於寫tag組件，script和style是並列的一級節點，也就是有3個一級節點。vue單文件組件規範sfchtml5

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

<script>  
    export default {  

    }  
</script>  

<style>  

</style>

外部文件引用方式變化

之前經過script src、link href引入外部的js和css；android

如今是es6的寫法，import引入外部的js模塊(注意不是文件)或csswebpack

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

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

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

而在這個util.js裏，要把以前的function封裝爲對象的方法es6

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

module.exports = {  
    formatTime: formatTime  
}

固然還有一些高級的用法web

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端時容易混亂。

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

除了內置組件，還有不少開源的擴展組件，把經常使用操做都進行封裝，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源碼，有各類轉換工具，詳見
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程