1. 通過vue-cli命令行創建Uni-app

全局安裝vue-cli

npm install -g @vue/cli

創建uni-app

vue create -p dcloudio/uni-preset-vue my-project

運行、發布uni-app

npm run dev:%PLATFORM% npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

值平臺

app-plus	app平臺生成打包資源（支持npm run build:app-plus，可用于持續集成。不支持run，運行調試仍需在HBuilderX中操作）
h5	H5
mp-alipay	支付寶小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	字節跳動小程序
mp-qq	qq 小程序
mp-360	360 小程序
quickapp-webview	快應用通用
quickapp-webview-union	快應用聯盟
quickapp-webview-huawei	快應用華為

• 目前使用npm run build:app-plus會在/dist/build/app-plus下生成app打包資源。如需制作wgt包，將app-plus中的文件壓縮成zip（注意：不要包含app-plus目錄），再重命名為${appid}.wgt， appid為manifest.json文件中的appid。
• dev 模式編譯出的各平臺代碼存放于根目錄下的 /dist/dev/目錄，打開各平臺開發工具選擇對應平臺目錄即可進行預覽（h5 平臺不會在此目錄，存在于緩存中）；
• build 模式編譯出的各平臺代碼存放于根目錄下的 /dist/build/ 目錄，發布時選擇此目錄進行發布；
• dev 和 build 模式的區別：

dev 模式有 SourceMap 可以方便的進行斷點調試；

build 模式會將代碼進行壓縮，體積更小更適合發布為正式版應用；

進行 環境判斷 時，dev 模式 process.env.NODE_ENV 的值為 development，build 模式 process.env.NODE_ENV 的值為 production。

2. 使用cli創建項目和使用HBuilderX可視化界面創建項目的區別

編譯器的區別

• cli 創建的項目，編譯器安裝在項目下。并且不會跟隨HBuilderX升級。如需升級編譯器，執行 npm update，或者手動修改 package.json 中的 uni 相關依賴版本后執行 npm install。更新后可能會有新增的依賴并不會自動安裝，手動安裝缺少的依賴即可。
• HBuilderX可視化界面創建的項目，編譯器在HBuilderX的安裝目錄下的plugin目錄，隨著HBuilderX的升級會自動升級編譯器。
• 已經使用cli創建的項目，如果想繼續在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整個項目拖入HBuilderX，則編譯時走的是項目下的編譯器。如果是把src目錄拖入到HBuilderX中，則走的是HBuilderX安裝目錄下plugin目錄下的編譯器。
• cli版如果想安裝less、scss、ts等編譯器，需自己手動npm安裝。在HBuilderX的插件管理界面安裝無效，那個只作用于HBuilderX創建的項目。

開發工具的區別

• cli創建的項目，內置了d.ts，同其他常規npm庫一樣，可在vscode、webstorm等支持d.ts的開發工具里正常開發并有語法提示。
• 使用HBuilderX創建的項目不帶d.ts，HBuilderX內置了uni-app語法提示庫。如需把HBuilderX創建的項目在其他編輯器打開并且補充d.ts，可以在項目下先執行 npm init，然后npm i @types/uni-app -D，來補充d.ts。
• 但vscode等其他開發工具，在vue或uni-app領域，開發效率比不過HBuilderX。詳見：https://ask.dcloud.net.cn/article/35451
• 發布App時，仍然需要使用HBuilderX。其他開發工具無法發布App，但可以發布H5、各種小程序。如需開發App，可以先在HBuilderX里運行起來，然后在其他編輯器里修改保存代碼，代碼修改后會自動同步到手機基座。
• 如果使用cli創建項目，那下載HBuilderX時只需下載10M的標準版即可。因為編譯器已經安裝到項目下了。

3. 生命周期

應用生命周期

uni-app 支持如下應用生命周期函數：

函數名說明

onLaunch	當uni-app 初始化完成時觸發（全局只觸發一次）
onShow	當 uni-app 啟動，或從后臺進入前臺顯示
onHide	當 uni-app 從前臺進入后臺
onError	當 uni-app 報錯時觸發
onUniNViewMessage	對 nvue 頁面發送的數據進行監聽，可參考 nvue 向 vue 通訊
onUnhandledRejection	對未處理的 Promise 拒絕事件監聽函數（2.8.1+）
onPageNotFound	頁面不存在監聽函數
onThemeChange	監聽系統主題變化

注意：

• 應用生命周期僅可在App.vue中監聽，在其它頁面監聽無效。
• onlaunch里進行頁面跳轉，如遇白屏報錯，請參考https://ask.dcloud.net.cn/article/35942

頁面生命周期

uni-app 支持如下頁面生命周期函數：

函數名說明平臺差異說明最低版本

onLoad	監聽頁面加載，其參數為上個頁面傳遞的數據，參數類型為Object（用于頁面傳參）
onShow	監聽頁面顯示。頁面每次出現在屏幕上都觸發，包括從下級頁面點返回露出當前頁面
onReady	監聽頁面初次渲染完成。注意如果渲染速度快，會在頁面進入動畫完成前觸發
onHide	監聽頁面隱藏
onUnload	監聽頁面卸載
onResize	監聽窗口尺寸變化	App、微信小程序
onPullDownRefresh	監聽用戶下拉動作，一般用于下拉刷新
onReachBottom	頁面上拉觸底事件的處理函數
onTabItemTap	點擊 tab 時觸發，參數為Object，具體見下方注意事項	微信小程序、百度小程序、H5、App（自定義組件模式）
onShareAppMessage	用戶點擊右上角分享	微信小程序、百度小程序、字節跳動小程序、支付寶小程序
onPageScroll	監聽頁面滾動，參數為Object
onNavigationBarButtonTap	監聽原生標題欄按鈕點擊事件，參數為Object	5+ App、H5
onBackPress	監聽頁面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示來源是左上角返回按鈕或 android 返回鍵；navigateBack表示來源是 uni.navigateBack ；詳細說明及使用：onBackPress 詳解	App、H5
onNavigationBarSearchInputChanged	監聽原生標題欄搜索輸入框輸入內容變化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	監聽原生標題欄搜索輸入框搜索事件，用戶點擊軟鍵盤上的“搜索”按鈕時觸發	App、H5	1.6.0
onNavigationBarSearchInputClicked	監聽原生標題欄搜索輸入框點擊事件	App、H5	1.6.0
onShareTimeline	監聽用戶點擊右上角轉發到朋友圈	微信小程序	2.8.1+
onAddToFavorites	監聽用戶點擊右上角收藏	微信小程序	2.8.1+

4. 頁面棧

框架以棧的形式管理當前所有頁面， 當發生路由切換的時候，頁面棧的表現如下：

路由方式頁面棧表現觸發時機

初始化	新頁面入棧	uni-app 打開的第一個頁面
打開新頁面	新頁面入棧	調用 API uni.navigateTo 、使用組件 <navigator open-type="navigate"/>
頁面重定向	當前頁面出棧，新頁面入棧	調用 API uni.redirectTo 、使用組件 <navigator open-type="redirectTo"/>
頁面返回	頁面不斷出棧，直到目標返回頁	調用 API uni.navigateBack 、使用組件 <navigator open-type="navigateBack"/> 、用戶按左上角返回按鈕、安卓用戶點擊物理back按鍵
Tab 切換	頁面全部出棧，只留下新的 Tab 頁面	調用 API uni.switchTab 、使用組件 <navigator open-type="switchTab"/> 、用戶切換 Tab
重加載	頁面全部出棧，只留下新的頁面	調用 API uni.reLaunch 、使用組件 <navigator open-type="reLaunch"/>

5. 運行環境判斷

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

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

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

6. Uni-app中使用nvue

介紹

uni-app App端內置了一個基于 weex 改進的原生渲染引擎，提供了原生渲染能力。
在App端，如果使用vue頁面，則使用webview渲染；如果使用nvue頁面(native vue的縮寫)，則使用原生渲染。一個App中可以同時使用兩種頁面，比如首頁使用nvue，二級頁使用vue頁面，hello uni-app示例就是如此。
雖然nvue也可以多端編譯，輸出H5和小程序，但nvue的css寫法受限，所以如果你不開發App，那么不需要使用nvue。
以往的 weex ，有個很大的問題是它只是一個高性能的渲染器，沒有足夠的API能力（比如各種push sdk集成、藍牙等能力調用），使得開發時非常依賴原生工程師協作，開發者本來想節約成本，結果需要前端、iOS、Android 3撥人開發，適得其反。 nvue 解決了這個問題，讓前端工程師可以直接開發完整 App，并提供豐富的插件生態和云打包。這些組合方案，幫助開發者切實的提高效率、降低成本。
同時uni-app擴展了weex原生渲染引擎的很多排版能力，修復了很多bug。比如：

• Android端良好支持邊框陰影
• iOS端支持高斯模糊，詳情
• 可實現區域滾動長列表+左右拖動列表+吸頂的復雜排版效果
• 優化圓角邊框繪制性能

適用場景

nvue的組件和API寫法與vue頁面一致，其內置組件還比vue頁面內置組件增加了更多，詳見。但nvue在css的寫法限制較多，具體如下：

• nvue的css僅支持flex布局，是webview的css語法的子集。這是因為操作系統原生排版不支持非flex之外的web布局。當然flex足以排布出各種頁面，只是寫法需要適應。
• nvue的css，在選擇器方面支持的較少，只支持簡單的class=“classA”。
• class 進行綁定時只支持數組語法。
• 有些web的css屬性在nvue里無法支持，比如背景圖。但可以使用image組件和層級來實現類似web中的背景效果。因為原生開發本身也沒有web這種背景圖概念

如果你熟悉 weex或react native 開發，那么 nvue 是你的更優選擇，能切實提升你的開發效率，降低成本。
如果你是web前端，不熟悉原生排版，那么建議你仍然以使用vue頁面為主，在App端某些vue頁面表現不佳的場景下使用 nvue 作為強化補充。這些場景如下：

• 需要高性能的區域長列表或瀑布流滾動。webview的頁面級長列表滾動時沒有性能問題的（就是滾動條覆蓋webview整體高度），但頁面中某個區域做長列表滾動，則需要使用nvue的list、recycle-list、waterfall等組件。這些組件的性能要高于vue頁面里的區域滾動組件scroll-view。
• 復雜高性能的自定義下拉刷新。uni-app的pages.json里可以配置原生下拉刷新，但引擎內置的下拉刷新樣式只有雪花和circle圈2種樣式。如果你需要自己做復雜的下拉刷新，推薦使用nvue的refresh組件。當然插件市場里也有很多vue下的自定義下拉刷新插件，只要是基于renderjs或wxs的，性能也可以商用，只是沒有nvue的refresh組件更極致。
• 左右拖動的長列表。在webview里，通過swiper+scroll-view實現左右拖動的長列表，前端模擬下拉刷新，這套方案的性能不好。此時推薦使用nvue，比如新建uni-app項目時的新聞示例模板，就采用了nvue，切換很流暢。
• 實現區域滾動長列表+左右拖動列表+吸頂的復雜排版效果，效果可參考hello uni-app模板里的swiper-list
• 如需要將軟鍵盤右下角按鈕文字改為“發送”，則需要使用nvue。比如聊天場景，除了軟鍵盤右下角的按鈕文字處理外，還涉及聊天記錄區域長列表滾動，適合nvue來做。
• 解決前端控件無法覆蓋原生控件的層級問題。當你使用map、video、live-pusher等原生組件時，會發現前端寫的view等組件無法覆蓋原生組件，層級問題處理比較麻煩，此時使用nvue更好。或者在vue頁面上也可以覆蓋一個subnvue（一種非全屏的nvue頁面覆蓋在webview上），以解決App上的原生控件層級問題。
• 如深度使用map組件，建議使用nvue。除了層級問題，App端nvue文件的map功能更完善，和小程序拉齊度更高，多端一致性更好。
• 如深度使用video，建議使用nvue。比如如下2個場景：video內嵌到swiper中，以實現抖音式視頻滑動切換，例子見插件市場；nvue的視頻全屏后，通過cover-view實現內容覆蓋，比如增加文字標題、分享按鈕。
• 直播推流：nvue下有live-pusher組件，和小程序對齊，功能更完善，也沒有層級問題。
• 對App啟動速度要求極致化。App端v3編譯器模式下，如果首頁使用nvue且在manifest里配置fast模式，那么App的啟動速度可以控制在1秒左右。而使用vue頁面的話，App的啟動速度一般是3秒起，取決于你的代碼性能和體積。

但注意，在某些場景下，nvue不如vue頁面，如下：

• canvas。nvue的canvas性能不高，尤其是Android App平臺，所以這個組件干脆沒有內置，而是需要單獨引入。操作canvas動畫，最高性能的方式是使用vue頁面的renderjs技術，在hello uni-app里的canvas示例就是如此。
• 動態橫豎屏。nvue頁面的css不支持媒體查詢，所以橫豎屏動態切換、動態適配屏幕是很困難的。

純原生渲染模式

uni-app在App端，支持vue頁面和nvue頁面混搭、互相跳轉。也支持純nvue原生渲染。
啟用純原生渲染模式，可以減少App端的包體積、減少使用時的內存占用。因為webview渲染模式的相關模塊將被移除。
在manifest.json源碼視圖的"app-plus"下配置"renderer":“native”，即代表App端啟用純原生渲染模式。此時pages.json注冊的vue頁面將被忽略，vue組件也將被原生渲染引擎來渲染。
如果不指定該值，默認是不啟動純原生渲染的。

// manifest.json { // ... /* App平臺特有配置 */ "app-plus": { "renderer": "native", //App端純原生渲染模式} }

weex編譯模式和uni-app編譯模式

weex的組件和jsapi，與uni-app不同。uni-app與微信小程序相同。
考慮到weex用戶的遷移，uni-app 也支持weex的代碼寫法。在manifest.json中可以配置使用weex編譯模式或uni-app編譯模式。選擇weex編譯模式時將不支持uni-app的組件和jsapi，需要開發者參考weex官方文檔的寫法來寫代碼。 比如 weex 編譯模式用<div>。uni-app 編譯模式則使用<view>。
一般情況建議使用uni-app模式，除非歷史weex代碼較多，需要逐步過渡。同時注意weex編譯模式的切換是項目級的，不支持同項目下某個nvue頁面使用weex模式，另一個nvue頁面使用uni-app模式。

weex編譯模式uni-app編譯模式

平臺	僅App	所有端，包含小程序和H5
組件	weex組件如div	uni-app組件如view
生命周期	只支持weex生命周期	支持所有uni-app生命周期
JS API	weex API、uni API、Plus API	weex API、uni API、Plus API
單位	750px是屏幕寬度，wx是固定像素單位	750rpx是屏幕寬度，px是固定像素單位
全局樣式	手動引入	app.vue的樣式即為全局樣式
頁面滾動	必須給頁面套或組件	默認支持頁面滾動

在 manifest.json 中修改2種編譯模式，manifest.json -> app-plus -> nvueCompiler 切換編譯模式。
nvueCompiler 有兩個值：

• weex
• uni-app

// manifest.json { // ... /* App平臺特有配置 */ "app-plus": { "nvueCompiler":"uni-app" //是否啟用 uni-app 模式 } }

• 如果沒有在manifest里明確配置，默認是weex模式。這是為了向下兼容。
• weex 編譯模式不支持 onNavigationBarButtonTap 生命周期函數的寫法。在 nvue 中監聽原生標題欄按鈕點擊事件，詳見：uni.onNavigationBarButtonTap。
• weex編譯模式不支持onShow生命周期，但熟悉5+的話，可利用監聽webview的addEventListener show事件實現onShow效果。
• weex 編譯模式不支持vuex。
• nvue 的頁面跳轉，與 weex 不同，仍然遵循 uni-app 的路由模型。vue 頁面和 nvue 頁面之間不管怎么跳轉，都遵循這個模型。包括 nvue 頁面跳向 nvue 頁面。每個頁面都需要在 pages.json 中注冊，調用 uni-app 的 路由 API 進行跳轉。
• 原生開發沒有頁面滾動的概念，頁面內容高過屏幕高度并不會自動滾動，只有部分組件可滾動（list、waterfall、scroll-view/scroller），要滾得內容需要套在可滾動組件下。這不符合前端開發的習慣，所以在 nvue 編譯為 uni-app模式時，給頁面外層自動套了一個 scroller，頁面內容過高會自動滾動。（組件不會套，頁面有recycle-list時也不會套）。 可以設置不自動套。

{"path": "","style": {"disableScroll": true // 不嵌套 scroller} }

weex 編譯模式下支持使用 weex ui ，例子見：https://ext.dcloud.net.cn/plugin?id=442。但相比uni-app插件市場及官方uni ui而言，weex語法的組件生態還是比較欠缺的。

快速上手

1. 新建 nvue 頁面

在HBuilderX的 uni-app 項目中，新建頁面，彈出界面右上角可以選擇是建立vue頁面還是nvue頁面，或者2個同時建。
不管是vue頁面還是nvue頁面，都需要在pages.json中注冊。如果在HBuilderX中新建頁面是會自動注冊的，如果使用其他編輯器，則需要自行在pages.json里注冊。
如果一個頁面路由下同時有vue頁面和nvue頁面，即出現同名的vue和nvue文件。那么在App端，會僅使用nvue頁面，同名的vue文件將不會被編譯到App端。而在非App端，會優先使用vue頁面。
如果不同名，只有nvue頁面，則在非app端，只有uni-app編譯模式的nvue文件才會編譯。

2. 開發 nvue 頁面

nvue 頁面結構同 vue, 由 template、style、script 構成。

• template： 模板寫法、數據綁定同 vue。組件支持2種模式，1、 weex 組件，同weex寫法，參考：weex 內置組件；2、uni-app組件，同uni-app寫法。
• style：由于采用原生渲染，并非所有瀏覽器的 css 均支持，布局模型只支持 flex 布局，雖然不會造成某些界面布局無法實現，但寫法要注意。詳見：weex 樣式
• script：寫法同 vue，并支持3種API：

weex API ：僅支持App端，uni-app編譯模式也可使用。使用前需先引入對應模塊，參考：weex 模塊引入

uni API：https://uniapp.dcloud.io/api/README

plus API：僅支持App端。http://www.html5plus.org/doc/h5p.html

3. 調試 nvue 頁面

HBuilderX內置了weex調試工具的強化版，包括審查界面元素、看log、debug打斷點

nvue 和 vue 相互通訊

在 uni-app 中，nvue 和 vue 頁面可以混搭使用。
推薦使用uni.$on,uni.$emit的方式進行頁面通訊，舊的通訊方式（uni.postMessage及plus.webview.postMessageToUniNView）不再推薦使用。

通訊實現方式

// 接收信息的頁面 // $on(eventName, callback) uni.$on('page-popup', (data) => { console.log('標題：' + data.title)console.log('內容：' + data.content) }) // 發送信息的頁面 // $emit(eventName, data) uni.$emit('page-popup', { title: '我是title', content: '我是content' });

使用此頁面通訊時注意事項：要在頁面卸載前，使用 uni.$off 移除事件監聽器。

nvue 向 vue 通訊（已過期，推薦使用上面的uni.$on、uni.$emit）

步驟：

在 nvue 使用 uni.postMessage(data) 發送數據通訊，data 為 JSON 格式（鍵值對的值僅支持String）。

在 App.vue 里使用 onUniNViewMessage 進行監聽。

代碼示例：

//test.nvue <template><div @click="test"><text>點擊頁面發送數據</text></div> </template> <script>export default {methods: {test(e) {uni.postMessage({test: "數據",value:"數據"});}}} </script> //App.vue <script>export default {onUniNViewMessage:function(e){console.log("App.vue收到數據")console.log(JSON.stringify(e.data)) },onLaunch: function() {console.log('App Launch');}} </script>

vue 向 nvue 通訊（已過期，推薦使用上面的uni.$on、uni.$emit）

步驟：

在 vue 里使用 plus.webview.postMessageToUniNView(data,nvueId) 發送消息，data 為 JSON 格式（鍵值對的值僅支持String），nvueId 為 nvue 所在 webview 的 id，webview的 id 獲取方式參考：$getAppWebview()。

在 nvue 里引用 globalEvent 模塊監聽 plusMessage 事件，如下：

const globalEvent = weex.requireModule('globalEvent'); globalEvent.addEventListener("plusMessage", e => {console.log(e.data);//得到數據 });

代碼示例：

// index.nvue <template><div @click="test"><text>點擊頁面發送數據{{num}}</text></div> </template> <script>const globalEvent = weex.requireModule('globalEvent');export default {data() {return {num: "0"}},created() {globalEvent.addEventListener("plusMessage", e => {console.log(e.data);if (e.data.num) { //存在num時才賦值，在nvue里調用uni的API也會觸發plusMessage事件，所以需要判斷需要的數據是否存在this.num = e.data.num}});},methods: {test(e) {uni.navigateTo({url: '../test/test'})}}} // test.vue <template><view><button type="primary" @click="test">點擊改變nvue的數據</button></view> </template> <script>export default {methods: {test() {var pages = getCurrentPages();var page = pages[pages.length - 2];var currentWebview = page.$getAppWebview();plus.webview.postMessageToUniNView({num: "123"}, currentWebview.id);uni.navigateBack()}}} </script>

vue 和 nvue 共享的變量和數據

除了通信事件，vue 和 nvue 頁面之間還可以共享變量和存儲。 uni-app提供的共享變量和數據的方案如下：

1. vuex:

自HBuilderX 2.2.5起，nvue支持vuex。這是vue官方的狀態管理工具。
注意：

• 不支持直接引入store使用，可以使用mapState、mapGetters、mapMutations等輔助方法或者使用this.$store

2. uni.storage:

vue和nvue頁面可以使用相同的uni.storage存儲。這個存儲是持久化的。 比如登陸狀態可以保存在這里。
App端還支持plus.sqlite，也是共享通用的。

3. globalData:

小程序有globalData機制，這套機制在uni-app里也可以使用，全端通用。 在App.vue文件里定義globalData，如下：

<script> export default { globalData: { text: 'text' }, onLaunch: function() { console.log('App Launch') }, onShow: function() { console.log('App Show') }, onHide: function() { console.log('App Hide') } } </script>

js中操作globalData的方式如下：getApp().globalData.text = 'test'
如果需要把globalData的數據綁定到頁面上，可在頁面的onShow聲明周期里進行變量重賦值。

nvue 里使用 BindingX

uni-app是邏輯層和視圖層分離的。此時會產生兩層通信成本。比如拖動視圖層的元素，如果在邏輯層不停接收事件，因為通信損耗會產生不順滑的體驗。
BindingX是weex提供的一種預描述交互語法。由原生解析BindingX規則，按此規則處理視圖層的交互和動效。不再實時去js邏輯層運行和通信。
BindingX類似一種強化版的css，運行性能高，但沒有js那樣足夠強的編程靈活性。
uni-app 內置了 BindingX，可在 nvue 中使用 BindingX 完成復雜的動畫效果。

• 從HBuilderX 2.3.4起，uni-app 編譯模式可直接引用uni.requireNativePlugin('bindingx')模塊，weex 模式還需使用 npm 方式引用。
• BindingX demo示例可參考 BindingX 示例 里 vue 的相關示例，將實驗田里的 vue 代碼拷貝到 nvue 文件里即可。

代碼示例：

<template><div class="container"><div ref="b1" class="btn" style="background-color:#6A1B9A" @click="clickBtn"><text class="text">A</text></div><div ref="b2" class="btn" style="background-color:#0277BD" @click="clickBtn"><text class="text">B</text></div><div ref="b3" class="btn" style="background-color:#FF9800" @click="clickBtn"><text class="text">C</text></div><div ref="main_btn" class="btn" @click="clickBtn"><image class="image" ref="main_image" src="https://gw.alicdn.com/tfs/TB1PZ25antYBeNjy1XdXXXXyVXa-128-128.png" /></div></div> </template> <script>const Binding = uni.requireNativePlugin('bindingx');module.exports = {data: {isExpanded: false},methods: {getEl: function(el) {if (typeof el === 'string' || typeof el === 'number') return el;if (WXEnvironment) {return el.ref;} else {return el instanceof HTMLElement ? el : el.$el;}},collapse: function() {let main_btn = this.getEl(this.$refs.main_btn);let main_image = this.getEl(this.$refs.main_image);let b1 = this.getEl(this.$refs.b1);let b2 = this.getEl(this.$refs.b2);let b3 = this.getEl(this.$refs.b3);let main_binding = Binding.bind({eventType: 'timing',exitExpression: 't>800',props: [{element: main_image,property: 'transform.rotateZ',expression: 'easeOutQuint(t,45,0-45,800)'}, {element: main_btn,property: 'background-color',expression: "evaluateColor('#607D8B','#ff0000',min(t,800)/800)"}]}, function(res) {if (res.state === 'exit') {Binding.unbind({token: main_binding.token,eventType: 'timing'})}});let btn_binding = Binding.bind({eventType: 'timing',exitExpression: 't>800',props: [{element: b1,property: 'transform.translateY',expression: "easeOutQuint(t,-150,150,800)"}, {element: b2,property: 'transform.translateY',expression: "t<=100?0:easeOutQuint(t-100,-300,300,700)"}, {element: b3,property: 'transform.translateY',expression: "t<=200?0:easeOutQuint(t-200,-450,450,600)"}]}, function(res) {if (res.state === 'exit') {Binding.unbind({token: btn_binding.token,eventType: 'timing'})}})},expand: function() {let main_btn = this.getEl(this.$refs.main_btn);let main_image = this.getEl(this.$refs.main_image);let b1 = this.getEl(this.$refs.b1);let b2 = this.getEl(this.$refs.b2);let b3 = this.getEl(this.$refs.b3);let main_binding = Binding.bind({eventType: 'timing',exitExpression: 't>100',props: [{element: main_image,property: 'transform.rotateZ',expression: 'linear(t,0,45,100)'}, {element: main_btn,property: 'background-color',expression: "evaluateColor('#ff0000','#607D8B',min(t,100)/100)"}]}, function(res) {if (res.state === 'exit') {Binding.unbind({token: main_binding.token,eventType: 'timing'})}});let btn_binding = Binding.bind({eventType: 'timing',exitExpression: 't>800',props: [{element: b1,property: 'transform.translateY',expression: "easeOutBounce(t,0,0-150,800)"}, {element: b2,property: 'transform.translateY',expression: "t<=100?0:easeOutBounce(t-100,0,0-300,700)"}, {element: b3,property: 'transform.translateY',expression: "t<=200?0:easeOutBounce(t-200,0,0-450,600)"}]}, function(res) {if (res.state === 'exit') {Binding.unbind({token: btn_binding.token,eventType: 'timing'})}})},clickBtn: function(e) {if (this.isExpanded) {this.collapse();} else {this.expand();}this.isExpanded = !this.isExpanded;}}} </script> <style>.container {flex: 1;}.image {width: 60px;height: 60px;}.text {color: #ffffff;font-size: 30px;}.btn {width: 100px;height: 100px;background-color: #ff0000;align-items: center;justify-content: center;position: absolute;border-radius: 50px;bottom: 25px;right: 25px;} </style>

注意：

• 暫時不要在expression內使用origin

nvue 里使用 HTML5Plus API

• nvue頁面可直接使用plus的API，并且不需要等待plus ready。

nvue 里不支持的 uni-app API

nvue 支持大部分 uni-app API ，下面只列舉目前還不支持的 API 。

動畫

API說明

uni.createAnimation()	創建一個動畫實例

滾動

API說明

uni.pageScrollTo()	將頁面滾動到目標位置

繪畫

canvas API使用，詳見canvas文檔。

節點布局交互

API說明

uni.createIntersectionObserver()	創建并返回一個 IntersectionObserver 對象實例

nvue開發與vue開發的常見區別

基于原生引擎的渲染，雖然還是前端技術棧，但和web開發肯定是有區別的。

• nvue 頁面控制顯隱只可以使用v-if不可以使用v-show。
• nvue 頁面只能使用 flex 布局，不支持其他布局方式。頁面開發前，首先想清楚這個頁面的縱向內容有什么，哪些是要滾動的，然后每個縱向內容的橫軸排布有什么，按 flex 布局設計好界面。
• 原生開發沒有頁面滾動的概念，頁面內容高過屏幕高度并不會自動滾動，只有部分組件可滾動（list、waterfall、scroll-view/scroller），要滾得內容需要套在可滾動組件下。這不符合前端開發的習慣，所以在 nvue 編譯為 uni-app模式時，給頁面外層自動套了一個 scroller，頁面內容過高會自動滾動。（組件不會套，頁面有recycle-list時也不會套）。后續會提供配置，可以設置不自動套。
• 文字內容，必須、只能在組件下。不能在、的text區域里直接寫文字。否則即使渲染了，也無法綁定js里的變量。
• 只有text標簽可以設置字體大小，字體顏色。
• 布局不能使用百分比、沒有媒體查詢。
• nvue 切換橫豎屏時可能導致樣式出現問題，建議有 nvue 的頁面鎖定手機方向。
• 支持的css有限，不過并不影響布局出你需要的界面，flex還是非常強大的。
• 不支持背景圖。但可以使用image組件和層級來實現類似web中的背景效果。因為原生開發本身也沒有web這種背景圖概念。
• css選擇器支持的比較少，只能使用 class 選擇器。詳見weex的樣式文檔
• class 進行綁定時只支持數組語法。
• nvue頁面沒有bounce回彈效果，只有幾個列表組件有bounce效果，包括 list、recycle-list、waterfall。
• Android端在一個頁面內使用大量圓角邊框會造成性能問題，尤其是多個角的樣式還不一樣的話更耗費性能。應避免這類使用。
• nvue 的各組件在安卓端默認是透明的，如果不設置background-color，可能會導致出現重影的問題。
• 在 App.vue 中定義的全局js變量不會在 nvue 頁面生效。globalData和vuex是生效的。
• App.vue 中定義的全局css，對nvue和vue頁面同時生效。如果全局css中有些css在nvue下不支持，編譯時控制臺會報警，建議把這些不支持的css包裹在條件編譯里，APP-PLUS-NVUE
• 不能在 style 中引入字體文件，nvue 中字體圖標的使用參考：weex 加載自定義字體。如果是本地字體，可以用plus.io的API轉換路徑。
• 目前不支持在 nvue 頁面使用 typescript/ts。
• nvue 頁面關閉原生導航欄時，想要模擬狀態欄，可以參考：https://ask.dcloud.net.cn/article/35111。但是，仍然強烈建議在nvue頁面使用原生導航欄。nvue的渲染速度再快，也沒有原生導航欄快。原生排版引擎解析json繪制原生導航欄耗時很少，而解析nvue的js繪制整個頁面的耗時要大的多，尤其在新頁面進入動畫期間，對于復雜頁面，沒有原生導航欄會在動畫期間產生整個屏幕的白屏或閃屏。
• nvue 頁面的布局排列方向默認為豎排（column），如需改變布局方向，可以在 manifest.json -> app-plus -> nvue -> flex-direction 節點下修改，僅在 uni-app 模式下生效。
• nvue頁面編譯為H5、小程序時，會做一件css默認值對齊的工作。因為weex渲染引擎只支持flex，并且默認flex方向是垂直。而H5和小程序端，使用web渲染，默認不是flex，并且設置display:flex后，它的flex方向默認是水平而不是垂直的。所以nvue編譯為H5、小程序時，會自動把頁面默認布局設為flex、方向為垂直。當然開發者手動設置后會覆蓋默認設置。
  下面有些正確和錯誤的寫法示例對比：
• 選擇器僅支持class 選擇器

/* 錯誤 */ #id {} .a .b .c {} .a > .b {}/* 正確 */ .class {}

• border 不支持簡寫

/* 錯誤 */ .class {border: 1px red solid; }/* 正確 */ .class {border-width: 1px;border-style: solid;border-color: red; }

• background 不支持簡寫

/* 錯誤 */ .class {background: red; }/* 正確 */ .class {background-color: red; }

• nvue的uni-app編譯模式下，App.vue 中的樣式，會編譯到每個 nvue文件。對于共享樣式，如果有不合法屬性控制臺會給出警告，可以通過條件編譯APP-PLUS-NVUE屏蔽 App 中的警告。

/* 錯誤 */ /* 控制臺警告： WARNING: `border` is not a standard property name (may not be supported) WARNING: `-webkit-transform` is not a standard property name (may not be supported) */ .class {border: 1px red solid;-webkit-transform: scaleY(.5); }/* 正確 */ .class {border-width: 1px;border-style: solid;border-color: red;/* #ifndef APP-PLUS-NVUE */-webkit-transform: scaleY(.5);/* #endif*/ }

Android平臺陰影(box-shadow)問題

Android平臺weex對陰影樣式(box-shadow)支持不完善，如設置圓角邊框時陰影樣式顯示不正常、設置動畫時在Android7上顯示不正常、在Android10上出現閃爍現象等。為解決這些問題，從HBuilderX 2.4.7起，新增elevation屬性（組件的屬性，不是css樣式）設置組件的層級，Number類型，層級值越大陰影越明顯，陰影效果也與組件位置有關，越靠近頁面底部陰影效果越明顯
用法：

<view elevation="5px"></view>

注意：

• 設置elevation屬性產生的陰影暫時無法修改顏色
• 為了避免elevation屬性的陰影效果與陰影樣式(box-shadow)沖突，設置elevation屬性后box-shadow樣式失效
• 使用elevation需要陰影元素的父元素大于陰影范圍，否則會對陰影進行裁剪
• IOS不支持elevation屬性，請使用box-shadow設置陰影

iOS平臺下拉組件refresh組件注意問題

iOS平臺默認情況下滾動容器組件（如list、waterfall組件）內容不足時，由于沒有撐滿容器的可視區域會導致無法上下滾動，此時無法操作下拉刷新功能，無法觸發refresh組件的@refresh、@pullingdown事件。 此時可在容器組件中配置alwaysScrollableVertical屬性值為true來設置支持上下滾動，支持下拉刷新操作。
用法：

<list class="scroll-v list" enableBackToTop="true" scroll-y alwaysScrollableVertical="true"><refresh class="refresh" @refresh="onrefresh()" @pullingdown="onpullingdown">//refresh content</refresh><cell v-for="(newsitem,index) in list" :key="newsitem.id">//cell content</cell> </list>

注意：

• Android平臺不存在此問題

7. 備注

總結

以上是生活随笔為你收集整理的全平台小程序开发框架Uni-app重点概览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。