uniapph5編譯模式

① uni-app開發H5

emmmm....大概有大半年吧沒有更新文章了吧，疫情一直到三月份才慢慢有了好轉，現在已是七月，但還是不能鬆懈，希望寶寶們從自我做起，自覺帶好口罩哦~相信在不久的明天，疫情一定徹底被戰敗，最終的勝利必將屬於我們！中國加油！！！

疫情期間呢也自己學習了一些新的東東，目前在一家公司寫著兩個比較的大的項目吧，兩個項目都是vue搭建的項目，一個是用element-ui框架寫的PC端項目，一個是在HBuilder-X軟體中使用uni-app框架寫的H5！

② uniapp發布H5應用，並在nginx部署

uniapp發行H5-手機版，官網說的看似簡單，按步驟操作下來，打開網頁確實白的。一路網路查下來，終於實驗成功，在此記錄完整步驟如下：
一、HBuilderX配置uniapp工程，修改manifest.json關於h5的配置，如圖：

二、nginx部署
本條默認nginx已經安裝配置好
第一步，打開nginx所在目錄，把打包好的h5文件放到nginx/html目錄下，如圖

第二步，在此目錄D:\nginx-1.16.1\conf打開nginx.conf,配置好埠號，服務地址，
location是按照uniapp官方文檔要求配置的

第三步，瀏覽器打開 http://localhost:9001 訪問成功，說明部署成功

③ 混合開發之uni-app

uni-app App端內置weex渲染引擎，提供原生渲染能力

然而， Weex並不是一個前端框架 。實際上，前端框架僅僅是 Weex 的語法層或稱之為 DSL (Domain-specific Language)，它們與原生渲染引擎是分離的。換句話說，Weex 並不依賴於特定的前端框架，隨著前端技術的發展，Weex 也可以集成更多廣泛使用的前端框架。

以往的 weex ，有個很大的問題是它只是一個高性能的渲染器，沒有足夠的API能力，使得開發時非常依賴原生工程師協作，開發者本來想節約成本，結果需要前端、iOS、Android 3撥人開發，適得其反。而 nvue 解決了這個大問題，讓前端工程師可以直接開發完整 App，並提供原生插件的市場交易和雲打包。這些組合方案，開發者切實的提高效率、降低成本。

如果你是web前端，不熟悉 weex，那麼建議你仍然以使用 vue 為主，在App端某些 vue 表現不佳的場景下使用 nvue 作為強化補充：

uni-app App 端內置 HTML5+ 引擎，讓 js 可以直接調用豐富的原生能力。

小程序及 H5 等平台是沒有 HTML5+ 擴展規范的，因此在 uni-app 調用 HTML5+ 的擴展規范時，需要注意使用條件編譯。否則運行到h5、小程序等平台會出現 plus is not defined錯誤。

在普通的 H5+ 項目中，需要使用 document.addEventListener 監聽原生擴展的事件。

uni-app 中，沒有 document。可以使用 plus.globalEvent.addEventListener 來實現（注意manifest中需開啟新編譯器，即自定義組件模式"usingComponents":true）。

同理，在 uni-app 中使用 Native.js 時，一些 Native.js 中對於原生事件的監聽同樣需要按照上面的方法去實現。

注意：舊編譯器（非自定義組件模式）不支持 plus.globalEvent 這個對象。

④ uniapph5為什麼性能好

uniapph5為什麼性能好
因為它在底層會自動優化數據同步、虛擬DOM，比大多數開發手動寫的代碼要更高效。uni-app也如此，框架底層的優化處理比大多數開發者手動寫setdata或DOM操作更高效。多端適配很多是在編譯時做的，並不影響運行時的性能。

⑤ uniapp打包後的h5能反編譯嗎

不能。uniapp打包後app無法打開問題，因此h5是不能反編譯的。uniapp是一個使用Vue.js開發所有前端應用的框架，開發者編寫一套代碼，可發布到iOS、Android、Web響應式、以及各種小程序，比如微信、支付寶、網路、頭條、QQ、釘釘、淘寶、快應用等多個平台。

⑥ uni-app運行到H5正常，但運行到小程序不正常、報錯總結

同級多個 v-for 時 key 的值是不允許重復的，key 的綁定是不支持表達式的，需要按照以下方式處理。

控制台"Cannot read property 'globalData' of undefined"
解決辦法：將getApp()替換成this

以上錯誤的寫法編譯都會不通過

問題應該出在(item.title || '').length，其中(item.title || '')得到的結果有問題

解決辦法：加入in(this)

原因：h5引用組件會渲染成uni-view標簽，而小程序直接是comp-a標簽，此時雖然顯示設置了樣式，但不會渲染出來
解決辦法：在子組件中設置好樣式，或者用/deep/ 對子組件下的節點設置樣式

解決辦法：在父組件修改對象的數據，不要在子組件操作，網上說是微信小程序無法直接操作props里的對象

1.豎向的列表，使用的view的滾動，並設置overflow-y:scroll;滑動列表然後點擊列表某一項跳轉詳情後，再回到列表頁，view總是回到了頂部，和 這個問題 一樣。
解決辦法：
使用scroll-view替換view，設置scroll-y=true，但也產生了一個問題，scroll-view的寬度默認繼承父級元素的寬度（屏幕寬度），並不是等於所有子集元素的和，因此需要動態設置scroll-view的寬度
2.uni設置scroll-top為0無效
uniapp裡面使用scroll-view 組件，動態設置scroll-top 屬性來控制滾動高度，但是當想滾動到起始位置時 設置動態值為0 時無效的
解決辦法：
首先要定義一個變數記錄滾動條的位置

用 @scroll="scrollChange" 監聽 滾動條變化

定義一個變數 存滾動的位置，當需要滾動到 初始值的時候

先將滾動的當前高度賦值給scrollTop 然後設置為0 就有效果了

⑦ 仿抖音上下滑動播放視頻（兼容安卓，ios，小程序，h5）

運行條件

HBuilder X 2.2.2

安裝後，從插件市場導入，即可真機運行

vue

項目地址

github

uniapp插件市場

說明

插件分別用swiper實現(多端兼容)和css3動畫實現(暫時只支持app)，可自行切換。

插件在uni-app編譯模式下編寫(已切換)。

默認為weex編譯模式，在 manifest.json 的源碼視圖里配置是切換模式， manifest.json -> app-plus -> nvueCompiler 切換編譯模式。

swiper在非App端內嵌video性能比較差，不建議導入過多視頻。

項目效果

h5在線地址

⑧ uniapp發布h5用戶訪問還是舊頁面

uniapp優點:

①兼容性好

Uni-app最大的特點就是一套代碼編譯以後多端通用，開發人員不需要在每個平台都單獨開發一套代碼，節省了大量的成本。

②學習成本低

由於uni-app基於vue.js開發，因此對於前端開發工程師不會十分困難，學習uni-app的門檻也相應降低。

③開發速度快

由於uni-app是用HBX進行開發，所以支持vue的語法。

④拓展性強

Uni-app支持nvue，封裝了H5+。同時，還支持原生的iOS和安卓開發。

⑤開發團隊支持多

目前uni-app的開發團隊DCloud發布新版本的頻率比較頻繁。

⑨ uniapp中自定義條件編譯平台總結

1.運行

2.發布

1.uniapp自定義條件編譯平台
2.uniapp條件編譯

⑩ uniapp h5項目用nginx部署需要的配置

我項目里有若依後台，和一個微信公眾號h5項目，之前用hbuilder啟動的時候沒什麼問題，後來給用戶部署的時候，發現配置挺麻煩的，研究了一下：
1.項目編譯後，是放在一個h5目錄下的，如果你的項目有自己的名字，就是基礎路徑不為/,比如/gzh，那部署的時候也得放在gzh目錄下，並配置nginx指明：

2.如果項目里訪問api到後台的話，需要配置：

完畢。