跨端兼容二三事
小程序轉APP問題記錄
- 不能直接套殼打包為APP嗎？為什么要改為.nvue后綴？
可以，但是nvue的渲染速度更快；首屏打開速度更快；技術成分更高，避免無法上架應用市場。相比vue頁來說，nvue頁渲染速度快的原因是不需等待手機rom的webview模塊渲染。直接使用自帶的高性能原生渲染引擎weex即可。
- App和小程序雙端開發已經是普遍需求，此場景下uniapp跨端作用大。條件編譯可以幫助我們處理不同平台下不同的代碼，適合編寫特定平台專用組件或API，把工作交給編譯器。 這里說明：選型沒有最好，只有最合適。
- uni-app的App端與微信小程序是一樣的技術架構，相同的架構是可以跨端的前提，都是邏輯層獨立運行於jscore下，視圖層運行於webview下或者weex渲染引擎下。所以不可避免的會引出邏輯層與視圖層頻繁通訊的性能問題。
那么如果遇到此類問題如何解決？若是.vue后綴的文件使用webview模塊渲染，則使用renderjs。它是比wxs更為強大的運行在視圖層的js。若是.nvue后綴的文件使用weex原生引擎渲染，則使用bindingX。此機制原理是由頻繁向原生層傳遞數據變為了一次性整體傳遞數據。另外，類似原理但更為簡單的方式還有設置render-whole屬性。
- nvue頁也可以編譯為H5和小程序。只是css寫法受限。只支持flex布局，且排列方向默認是豎排，需要手動去manifest.json下修改。
- 如不同平台下樣式不正常，多是css兼容性問題。
- 標簽要遵循微信小程序的標簽。比如寫<div>時要知道寫為<view>。
- 跨端不是遷移web的習慣，而是要按照uni的寫法全平台使用，所以遇到問題時第一反應是要查文檔。查文檔。查文檔。
- body的元素選擇器改為page
- App的js運行在jscore中而不是瀏覽器中，所以沒有document，window等瀏覽器對象。如果你在app中使用的一些插件內部用到了這些對象，需要引入renderjs。這是比wxs更為強大運行在視圖層的js。
- uni的API在編譯到web平台運行時，會轉為瀏覽器的API。所以uni-admin框架既可以運行在PC也可以運行在移動端的H5，小程序，App。
- 自定義組件放在components文件夾下，並且目錄是components/組件名稱/組件名稱.vue，就可以直接在頁面使用了，因為它符合uniapp的easycom組件規范。在uni_modules文件夾下也有相同的作用。
這里提個小知識，這個組件叫做<uni-section>，uni的擴展組件中並沒有提供它，如果想使用，可以下載uni-ui這個示范項目，在components文件夾下找到它，復制到自己的項目中。
- vue中css單位使用viewport但uniapp中css單位建議使用rpx。因為nvue不支持的css單位太多，實在解決不了一致性就條件編譯。
- uniapp中制作通用的根組件，添加背景圖片的方法，是將寫好的組件放入components目錄下，然后在子組件中當做父組件使用。
注意不能在app.vue文件中編寫template，app.vue文件的作用是調用應用生命周期函數，配置全局樣式，配置全局存儲globalData。
- 不想使用uniapp提供的App通用啟動界面？Android平台使用.9.png格式自定義啟動圖。iOS平台使用自定義storyboard啟動界面。詳細了解請點擊鏈接。
- uniapp小程序中數據更新但視圖層不更新，一般是setData這個API導致的，因為這個API負責的就是將數據從邏輯層發送至視圖層。
如果使用常規web排查方法還未解決該如何處理：使用this.$mp.page.setData()方法，相當於vue中的this.$forceUpdate()強制更新。這兩種方法大多數時候都能解決問題。
- 凡涉及到與客戶端工程師合作都可以稱為混合開發，多數情況下，要么以URL的形式鏈接，更新部署更為自由。要么是前端代碼放入原生工程，采取wgt包方式更新。
- 配置favicon.ico需要自定義HTML模板，官方模板鏈接。
- 視頻下載並保存至相冊。
- HbuilderX打不開微信開發者工具解決：
開啟微信開發者工具中的系統代理和服務端口。
將微信開發者工具或項目移動到沒有空格的目錄。
更改微信小程序的AppID。
簡單記錄，后續更新~