最近我們小組剛經(jīng)歷了將成熟的 HTML5 項目轉換成小程序，并在app中運行的操作！記錄下來分享給各位。

項目：將已有的 Vue 項目轉為小程序，?在集成了FinClip SDK 的 App 中運行。

技術：uni-app、FinClip

兩個注意事項：

1、Web 項目是適合在手機等移動設備中運行的，屏幕已經(jīng)兼容；

2、H5 項目的代碼是前后端分離的；

首先：我們選擇使用了一款成熟的跨平臺框架 uni-app 來處理這個問題。

第一步：創(chuàng)建 uni-app 項目

一切都需要先從一個 uni-app 項目開始，然后再一次進行。

1. 全局安裝 vue-cli

npm install -g @vue/cli

2. 通過 CLI 創(chuàng)建 uni-app 項目

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

注意：創(chuàng)建 CLI 工程時會遠程下載 dcloudio/uni-preset-vue，拉取失敗時如出現(xiàn)如下圖所示的錯誤。這個時候可以通過手動下載模板來創(chuàng)建項目。GitHub - dcloudio/uni-preset-vue: uni-app preset for vue

下載完畢后復制當前的文件路徑，并且通過命令行來創(chuàng)建項目。

進入命令行之后，需要通過vue create -p 文件路徑名 項目名來創(chuàng)建項目，輸入命令之后會提示選擇項目模板，這里我們選擇默認模板。

3. 在 VS Code 中打開創(chuàng)建的 uni-app 項目

當我們能夠打開這個 uni-app 的項目時，就意味著至此，一個 uni-app 項目已經(jīng)創(chuàng)建好了！接下來我們開始對代碼進行一些處理優(yōu)化。

第二步：代碼處理

在代碼處理步驟中，我們需要分別對項目文件，標簽代碼，js 代碼和 css 代碼進行針對性優(yōu)化，以下是對應的優(yōu)化處理內(nèi)容。

1. 文件處理

1. 把之前的 vue H5 項目的前端代碼復制到新項目下；
2. 如果之前的文件后綴名是 .html，需要改為 .vue，并注意遵循?vue 單文件組件 SFC 規(guī)范，比如必須一級根節(jié)點為 template、script、style，template 節(jié)點下必須且只能有一個根 view 節(jié)點，所有內(nèi)容寫在這個根 view 節(jié)點下。
3. 處理頁面路由
   uni-app 默認是小程序的路由方式，在 pages.json 里管理頁面。如果你使用 vue rooter 的話，一種是改造為 pages.json 方式，另一種是使用三方插件，比如?vue rooter for uni-app
4. 靜態(tài)文件（如圖片）挪到 static 目錄
   uni-app 工程目錄下有個 static 目錄，用于存放靜態(tài)文件，這個目錄不編譯，直接整體復制到發(fā)行代碼里的。如果你希望自定義靜態(tài)資源目錄，可以在?vue.config.js?中自定義。

2. 標簽代碼處理

1. 相同功能的組件自動轉換
   uni-app 的標簽組件與小程序相同，比如<div>變成了<view>，<span>變成了<text>。
   但 uni-app 的編譯器已經(jīng)自動處理了這部分轉換，如果源碼中寫了可自動轉換的組件，在編譯到非 H5 端時會被自動轉換（再編譯回到 H5 端時 div 還是 div）。

• div 改成?view
• span、font 改成?text
• a 改成?navigator
• img 改成?image
• select 改成?picker
• iframe 改成?web-view
• ul、li沒有了，都用 view 替代

1. 區(qū)域滾動使用 scroll-view，不再使用 div 的區(qū)域滾動處理方式
2. 左右、上下滑動切換，有專門的?swiper 組件，不要使用 div 模擬
3. input 的 search，原來的 type 沒用了，改成 confirmtype，詳見這里
4. audio 組件不再推薦使用，改成 api 方式，詳見這里
5. 之前的 v-html，可以在 H5 端和 App 端（需v3編譯器）使用，不能在小程序中使用。如需要在小程序使用，請使用 rich-text 組件或 uparse 擴展插件，詳見這里

3. js 代碼處理

uni-app 的非 H5 端，不管是 App 還是各種小程序，都不支持 window、navigator、document 等 web 專用對象。uni-app 的 API 與小程序保持一致，需要處理這些不同的 API 寫法。

1. 處理 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

1. 處理 navigator api

• geolocation 的定位方式改為?uni.getLocation
• useragent的設備 api 沒有了，改用?uni.getSystemInfo

1. 處理 dom api

• 如果使用標準 vue 的數(shù)據(jù)綁定，是不需要操作 dom 來修改界面內(nèi)容的。如果沒有使用 vue 數(shù)據(jù)綁定，仍然混寫了 jquery 等 dom 操作，需要改為純數(shù)據(jù)綁定
• 有時獲取 dom 并不是為了修改顯示內(nèi)容，而是為了獲取元素的長寬尺寸來做布局。此時 uni-app 提供了同小程序的另一種 api，uni.createSelectorQuery

1. 其他 js api

• web 中還有 canvas、video、audio、websocket、webgl、webbluetooth、webnfc，這些在 uni-app 中都有專門的 api。

1. 生命周期

• uni-app 補充了一批類小程序的聲明周期，包括 App 的啟動、頁面的加載，詳見這里
• vue h5 一般在 created 或者 mounted 中請求數(shù)據(jù)，而在 uni-app 的頁面中，使用 onLoad 或者 onShow 中請求數(shù)據(jù)。（組件仍然是 created 或者 mounted）

1. 少量不常用的 vue 語法在非 h5 端仍不支持，data 必須以 return 的方式編寫，注意事項詳見這？里

注意：如果你使用了一些三方 ui 框架、js 庫，其中引用了包括一些使用了dom、window、navigator 的三方庫，除非你只做 H5 端，否則需要更換。去 uni-app 的插件市場尋找替代品。如果找不到對應庫，必須使用 for web 的庫，在 App 端可以使用?renderjs?來引入這些 for web 的庫。

4. css 代碼處理

uni-app 發(fā)布到 App（非nvue）、小程序時，顯示頁面仍然由 webview 渲染，css 大部分是支持的。但需要注意以下內(nèi)容：

• 不支持 *選擇器
• 沒有 body 元素選擇器，改用 page 元素選擇器。（編譯到非 H5 時，編譯器會自動處理。所以不改也行）
• div 等元素選擇器改為 view，span 和 font 改為 text，a 改為 navigator，img 改為 image...（編譯到非 H5 時，編譯器會自動處理。所以不改也行）
• 不同端的瀏覽器兼容性仍然存在，避免使用太新的 css 語法，否則發(fā)布為 App 時，Android 低端機（Android 4.4、5.x），會有樣式錯誤。

通過以上步驟，基本上就能夠把已有的 vue 項目轉為對應的小程序代碼規(guī)范了。

第三步：將小程序移動至 FinClip 中

在完成以上工作任務后，我們應該在 uni-app 中已經(jīng)得到了一個結構完整且可以運行的非 H5 項目了。最后，我們可以通過在 uni-app 中代碼發(fā)布為微信小程序，或者直接通過集成 FinClip 插件的形式進行處理，這兩種形式都比較簡單。

使用 uni-app 將小程序發(fā)布為微信小程序

?我們可以直接在編譯器中將代碼發(fā)布為“微信小程序”的相關格式，隨后再通過 FinClip??????? 打開對應的小程序，最后就可以直接運行了。

---

到這里，將已有基于 Vue 格式編譯的 H5頁面就可以正常遷移為對應的小程序了，如果如果你在使用過程中遇到了任何困難，也可以加入 FinClip 開發(fā)者社群了解更多信息。