uniapp甘特圖

本文目錄一覽：

• 1、新手怎么用uniapp制作圖中小程序的樣式？
• 2、uni-app 入門到精通 （二）
• 3、uni-app 項目小程序端支持 vue3 介紹
• 4、uniapp面試題必問有哪些?
• 5、uniapp多久能上手
• 6、uni-app怎么進行上線？

新手怎么用uniapp制作圖中小程序的樣式？

很多新手在開始制作小程序的時候都想快速做一個功能看起來不錯的小程序，那么怎么做呢？下面小編給大家分享一下。

方法/步驟

首先大家要下載按照Hbuilder軟件，點擊新建下面的項目

接著項目類型里面選擇uni-app，然后選擇一個模板，如下圖所示

然后就創建好了項目的目錄，如下圖所示

接著打開Hbuilder的設置界面，配置小程序開發工具的路徑，如下圖所示

然后打開小程序開發工具，選擇安全設置

接著開啟服務端口，如下圖所示

接下來我們點擊Hbuilder的運行菜單，選擇運行到小程序模擬器的微信開發者工具上，如下圖所示

最后就可以看到一個小程序就快速制作完成了，如下圖所示

uni-app 入門到精通 （二）

18 年時候有幸接觸到 uniapp , 寫了一篇 《uni-app 入門到精通》 ，由于一些原因，該方案并沒有執行，該項目一系列文章也就沒有再寫下去，所以遭受到了許多人評論的吐槽，到如今公司項目的需求又要根據 uniapp 寫 H5 嵌入到 app 中，所以想根據項目實際開發分享一下，有興趣的伙伴可以參考和吐槽。

這一篇文章主要分享一下內容

uniapp 模板項目有兩種初始化方式

由于無法舍棄 VSCode ，我們采用 vue-cli 來初始化項目， HBuilderX 大家可以參照官方文檔

這種方式是可以通過 vue 腳手架命令指定模板，這個是 dcloudio 的官方提供模板

我們選擇默認模板即可，

成功后我們執行

打開瀏覽器地址，直接運行即可。

一般剛接觸前端的小伙伴可能會對 postcss 不太了解，這里簡單介紹一下，

當然 PostCSS 具體使用是需要引入一些插件的，例如常用的是 autoprefixer postcss-preset-env 等, 具體如何使用大家可以自行參考資料，畢竟這塊知識還是挺多的就不具體展開解釋了。

通常我們在寫移動端時候需要做的是頁面適配方案的確定， uni-app 支持的通用 css 單位包括 px、rpx ， 之前的 upx 方案已經被廢棄掉，官方解釋是目前市面上已經基本上支持了微信的 rpx 方案，所以 upx 中轉方案已經意義不大了，不過還可以繼續使用，不過已經不再推薦。

rpx 之初是由微信小程序提出一種方案，即根據寬度來進行適配以 750 寬屏幕為基準， 750rpx 恰好為屏幕寬度, uni-app 規定屏幕基準寬度 750rpx 。所以說如果你們的UI 設計以 750*1334 iphone 6/6s 為基準設計的話，你只需要將屏幕上 px 寫為 rpx 即可，不用做任何換算，如果不是的話，你就需要做如下換算：

uniapp 有自己一套路由管理機制，而未采用 vue-route 方案，個人認為這套方案還是比較成熟和好用的，以及可以滿足我們日常的需求:

保留當前頁面，跳轉到應用內的某個頁面，使用uni.navigateBack可以返回到原頁面。

2.uni.redirectTo(OBJECT)

關閉當前頁面，跳轉到應用內的某個頁面。

3.uni.reLaunch(OBJECT)

關閉所有頁面，打開到應用內的某個頁面。

注意： 如果調用了 uni.preloadPage(OBJECT)) 不會關閉，僅觸發生命周期 onHide

4.uni.switchTab(OBJECT)

跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面。

注意： 如果調用了 uni.preloadPage(OBJECT)不會關閉，僅觸發生命周期 onHide

5.uni.navigateBack(OBJECT)

關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。

5.uni.preloadPage(OBJECT)

預加載頁面，是一種性能優化技術。被預載的頁面，在打開時速度更快。

以上路由API 已經滿足我們的需求，當然進行路由跳轉的前提是我們需要在 pages.json 進行路由配置, 包括路由和具體的樣式配置

而進行具體路由跳轉我們需要如下，需要多加一個 /

需要特別注意的一點是, 利用瀏覽器 在 進行 移動H5頁面調試時候，會出現頁面刷新之后頁面棧會消失，此時navigateBack不能返回，如果一定要返回可以使用history.back()導航到瀏覽器的其他歷史記錄。

uniapp 提供網絡請求的 api 是 uni.request ，具體支持的請求方法可以參考官網 method 有效值

不過我們通常不會直接使用，而是進過一系列的封裝以方便我們的使用，具體封裝接口使用會在隨根據頁面數據請求一并展示。

uni-app 項目小程序端支持 vue3 介紹

隨著 vue3 的發布， uni-app 也逐步支持 vue3 。

目前小程序平臺已支持，h5、App 平臺暫不支持。

除支持 vue3 語法特性外， uni-app 特有的生命周期鉤子支持 Composition API ，如 onLaunch ， onShow ， onLoad …

下面介紹創建支持 vue3 的 uni-app 項目的流程，以及使用中的一些注意事項。vue3 相關問題請關注vue官方文檔 vue3 中文文檔。

目前僅支持 cli 方式創建支持 vue3 默認模板項目。

如果你之前沒有使用過 vue-cli 方式創建過項目，需要先安裝 vue-cli ，若已安裝則跳過步驟 1。

步驟 1: 全局安裝vue-cli

步驟 2: 用如下的命令創建vue3工程

步驟 3: 創建好工程后，進入對應目錄

步驟 4: 將項目跑到微信平臺

需要將編譯后的文件 dist/dev/mp-weixin 導入微信開發者工具運行，也可將項目拖入 HbuildX 中運行，方便運行到各個平臺。

歡迎開發者反饋使用該版本遇到的問題，我們將積極收集意見。

后續：

DCloud之所以不支持vue3的h5和app版，主要是因為vue3的組件中很多語法的寫法發生變化，這導致uni-app的h5版基礎組件庫和app版基礎組件庫的寫法與vue3不兼容。

當然除了基礎組件，插件市場的所有插件（包括uni ui），都不支持vue3。即便是uni-app已經推出的vue3的小程序版，也不支持插件市場的插件。

考慮到生態兼容的重要性，vue官方（尤雨溪）計劃2021年4月中下旬推出新版，對vue2的語法做兼容，屆時uni-app的h5版和app版將同時推出，并且插件市場的眾多插件也將自動適配vue3版的uni-app。

uniapp面試題必問有哪些?

ni-app面試考試有幾個題是必問的：uni-app收費嗎？跨端會造成功能受限制嗎？以及uni-app的手機端用戶體驗如何？

1、uni-app收費嗎？

uni-app是免費產品，DCloud公司不會向開發者收取任何費用，大家可以放心使用。

DCloud提供的所有開發工具都是免費的，也不會有什么陷阱。

DCloud的盈利點在幫助開發者進行推廣和流量變現上，而不在開發工具收費上。

2、跨端會造成功能受限制嗎？

uni-app在跨平臺的過程中，不犧牲平臺特色，不限制平臺的能力使用。

應用開發中，80%的常規開發，比如界面組件、聯網等api，uni-app封裝為可跨多端的API。

其余的，uni-app引入條件編譯。可以優雅的在一個項目里調用不同平臺的特色能力。比如push，微信小程序里不支持，但可以在App里使用，還有很多原生sdk，在App時難免涉及，這些都可以正常的在uni-app框架下使用。

3、uni-app的手機端用戶體驗如何？

使用uni-app開發的微信小程序，和直接開發微信小程序相比性能沒有明顯差別，因為uni-app輸出到微信時也是編譯為wxml格式。uni-app編譯到微信使用的是mpvue框架，這個是業內廣泛使用的成熟框架。

uni-app打包成App后的體驗和微信小程序一樣好，在某些場景下更好；微信小程序的Hybrid應用框架是業內體驗上的標桿，實踐證明這種體驗足以承載一線互聯網開發商獲得上億用戶。

uni-app內置預載機制，加載新頁面速度極快，可實現無白屏極速渲染。

uni-app在App端還支持weex原生渲染（nvue），左右拖動長列表等復雜場景依然可實現高流暢性。

uniapp多久能上手

主要看個人學習能力和學習時間決定

uni-app 是一個使用 Vue.js 開發跨平臺應用的前端框架。開發者通過編寫 Vue.js 代碼，uni-app 將其編譯到iOS、Android、微信小程序等多個平臺，保證其正確運行并達到優秀體驗。uni-app 繼承自 Vue.js，提供了完整的 Vue.js 開發體驗。uni-app 組件規范和擴展api與微信小程序基本相同。有一定 Vue.js 和微信小程序開發經驗的開發者可快速上手 uni-app ，開發出兼容多端的應用。uni-app提供了條件編譯優化，可以優雅的為某平臺寫個性化代碼、調用專有能力而不影響其他平臺。

uni-app怎么進行上線？

提前申請和準備要要用的證書

用HBuilderX打正式包。

1）要在manifest.json里面配置App圖標和啟動圖片

2）App圖標尺寸：png 格式圖片 256*256

啟動圖片尺寸：png 格式圖片 480762 7201242 1080*1882

3. app上架材料梳理：

一般看個人要求，在騰訊、華為、小米各個平臺上線。

每個平臺都要注冊開發者賬號，用企業信息注冊，注意開發者賬號公司和軟著要一致，否則華為、騰訊會讓你重新按軟著上的公司名稱注冊開發者賬號。小米要提供一個代理授權書。

1）共同提交的材料：

1.公司名稱

2.公司營業執照、其中百度需要營業執照復印件并且在文字的地方加蓋公章。

3.企業法人身份證照片（正反兩面），其中百度另外要求上傳手持身份證照片（正反兩面）。

4.企業對公賬號，其中華為和小米打錢驗證，利用金額進行驗證。

5.企業地址。

2）?提交應用審核資料：

1.軟著，jpg,png,pdf，3種格式。

2.企業營業執照，pg,png,pdf，種格式。

3.圖標，尺寸不一致。216216 jpg 512512 jpg

4.應用內截圖，多截幾張，最后用測試賬號截圖。

5.應用簡介和應用描述。

9.icp備案截圖。

7.如果軟著公司和開發者賬號不一致，需要提供代理授權書，簽字蓋章。

8.隱私政策網址。

上架成功后需要在各個商城自行下載。