前面發布了很多文章向大家分享前端、小程式相關的知識，最近很多小伙伴說想看實操，這不就安排起來了嗎！
今天就給大家分享“Vue 專案轉小程式”的實操干貨，
首先明確需求：開發者是想將已有的 Vue 專案轉為小程式，在集成了 FinClip SDK 的 App 中運行小程式，那這里我們就需要關注以下兩個注意事項：
Web 專案是適合在手機等移動設備中運行的，螢屏已經兼容；
H5 專案的代碼是前后端分離的；
在本篇文章中，我們選擇使用了一款成熟的跨平臺框架 uni-app 來處理這個問題，
第一步：創建 uni-app 專案
一切都需要先從一個 uni-app 專案開始，然后再一次進行，
1. 全域安裝 vue-cli
npm install -g @vue/cli2. 通過 CLI 創建 uni-app 專案
vue create -p dcloudio/uni-preset-vue uniapp-project注意：創建 CLI 工程時會遠程下載 dcloudio/uni-preset-vue，拉取失敗時如出現如下圖所示的錯誤，這個時候可以通過手動下載模板來創建專案，https://github.com/dcloudio/uni-preset-vue
下載完畢后復制當前的檔案路徑，并且通過命令列來創建專案，
進入命令列之后，需要通過vue create -p 檔案路徑名 專案名來創建專案，輸入命令之后會提示選擇專案模板，這里我們選擇默認模板，
3. 在 VS Code 中打開創建的 uni-app 專案
當我們能夠打開這個 uni-app 的專案時，就意味著至此，一個 uni-app 專案已經創建好了！接下來我們開始對代碼進行一些處理優化，
第二步：代碼處理
在代碼處理步驟中，我們需要分別對專案檔案，標簽代碼，js 代碼和 css 代碼進行針對性優化，以下是對應的優化處理內容，
1. 檔案處理
- 把之前的 vue H5 專案的前端代碼復制到新專案下；
- 如果之前的檔案后綴名是 .html，需要改為 .vue，并注意遵循 vue 單檔案組件 SFC 規范，比如必須一級根節點為 template、script、style，template 節點下必須且只能有一個根 view 節點，所有內容寫在這個根 view 節點下，
- 處理頁面路由
uni-app 默認是小程式的路由方式，在 pages.json 里管理頁面，如果你使用 vue rooter 的話，一種是改造為 pages.json 方式，另一種是使用三方插件，比如 vue rooter for uni-app - 靜態檔案（如圖片）挪到 static 目錄
uni-app 工程目錄下有個 static 目錄，用于存放靜態檔案，這個目錄不編譯，直接整體復制到發行代碼里的，如果你希望自定義靜態資源目錄，可以在 vue.config.js 中自定義，
2. 標簽代碼處理
- 相同功能的組件自動轉換
uni-app 的標簽組件與小程式相同，比如<div>變成了<view>，<span>變成了<text>，
但 uni-app 的編譯器已經自動處理了這部分轉換，如果原始碼中寫了可自動轉換的組件，在編譯到非 H5 端時會被自動轉換（再編譯回到 H5 端時 div 還是 div），
- div 改成 view
- span、font 改成 text
- a 改成 navigator
- img 改成 image
- select 改成 picker
- iframe 改成 web-view
- ul、li沒有了，都用 view 替代
- 區域滾動使用 scroll-view，不再使用 div 的區域滾動處理方式
- 左右、上下滑動切換，有專門的 swiper 組件，不要使用 div 模擬
- input 的 search，原來的 type 沒用了，改成 confirmtype，詳見這里
- audio 組件不再推薦使用，改成 api 方式，詳見這里
- 之前的 v-html，可以在 H5 端和 App 端（需v3編譯器）使用，不能在小程式中使用，如需要在小程式使用，請使用 rich-text 組件或 uparse 擴展插件，詳見這里
3. js 代碼處理
uni-app 的非 H5 端，不管是 App 還是各種小程式，都不支持 window、navigator、document 等 web 專用物件，uni-app 的 API 與小程式保持一致，需要處理這些不同的 API 寫法，
- 處理 window api
- ajax 改成 uni.request，（插件市場也有適配 uni-app 的 axios、flyio 等封裝攔截器）
- cookie、session.storage 沒有了，改用 uni.storage 吧；local.storage 也改成 uni.storage，另外插件市場有一個墊片 mp-storage，可使用之前的代碼，兼容運行在 uni-app上，
- alert,confirm 改成 uni.showmodel
- window 的 resize 改為了 uni.onWindowResize
- 處理 navigator api
- geolocation 的定位方式改為 uni.getLocation
- useragent的設備 api 沒有了，改用 uni.getSystemInfo
- 處理 dom api
- 如果使用標準 vue 的資料系結，是不需要操作 dom 來修改界面內容的，如果沒有使用 vue 資料系結，仍然混寫了 jquery 等 dom 操作，需要改為純資料系結
- 有時獲取 dom 并不是為了修改顯示內容，而是為了獲取元素的長寬尺寸來做布局，此時 uni-app 提供了同小程式的另一種 api，uni.createSelectorQuery
- 其他 js api
- web 中還有 canvas、video、audio、websocket、webgl、webbluetooth、webnfc，這些在 uni-app 中都有專門的 api，
- 生命周期
- uni-app 補充了一批類小程式的宣告周期，包括 App 的啟動、頁面的加載，詳見這里
- vue h5 一般在 created 或者 mounted 中請求資料，而在 uni-app 的頁面中，使用 onl oad 或者 onShow 中請求資料，（組件仍然是 created 或者 mounted）
- 少量不常用的 vue 語法在非 h5 端仍不支持，data 必須以 return 的方式撰寫，注意事項詳見這里
注意：如果你使用了一些三方 ui 框架、js 庫，其中參考了包括一些使用了dom、window、navigator 的三方庫，除非你只做 H5 端，否則需要更換，去 uni-app 的插件市場尋找替代品，如果找不到對應庫，必須使用 for web 的庫，在 App 端可以使用 renderjs 來引入這些 for web 的庫，
4. css 代碼處理
uni-app 發布到 App（非nvue）、小程式時，顯示頁面仍然由 webview 渲染，css 大部分是支持的，但需要注意以下內容：
- 不支持 *選擇器
- 沒有 body 元素選擇器，改用 page 元素選擇器，（編譯到非 H5 時，編譯器會自動處理，所以不改也行）
- div 等元素選擇器改為 view，span 和 font 改為 text，a 改為 navigator，img 改為 image...（編譯到非 H5 時，編譯器會自動處理，所以不改也行）
- 不同端的瀏覽器兼容性仍然存在，避免使用太新的 css 語法，否則發布為 App 時，Android 低端機（Android 4.4、5.x），會有樣式錯誤，
通過以上步驟，基本上就能夠把已有的 vue 專案轉為對應的小程式代碼規范了，
第三步：將小程式移動至 FinClip 中
在完成以上作業任務后，我們應該在 uni-app 中已經得到了一個結構完整且可以運行的非 H5 專案了，最后，我們可以通過在 uni-app 中代碼發布為微信小程式，或者直接通過集成 FinClip 插件的形式進行處理，這兩種形式都比較簡單，
使用 uni-app 將小程式發布為微信小程式
我們可以直接在編譯器中將代碼發布為“微信小程式”的相關格式，隨后再通過 FinClip 打開對應的小程式，最后就可以直接運行了，
這樣就將基于 Vue 格式編譯的 H5頁面正常遷移到小程式了，如果如果你在使用程序中遇到了任何困難可以加群提問噢！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/546870.html
標籤：其他