小程序移植uni-app經驗分享

小程序移植uni-app經驗分享

背景

公司產品指望h5與小程序頁面樣式和功能保持一致，並能同步發佈，而目前已有線上的小程序和h5。

模式

基於以上背景，決定使用跨端框架，維護一套代碼，發佈小程序和h5兩個平臺。因爲目前線上小程序的功能相對簡單，接口和邏輯清晰，h5功能繁多，技術框架不統一，未徹底分離等緣由，因此考慮將微信小程序先轉換爲跨端框架語法，再根據需求分佈轉換成h5，最終但願能夠統一成維護一套代碼。

技術選型

uni和tara 最終決定使用uni-app更適合咱們的產品
點擊查看：uni框架簡介

工具

開發工具：bhuilderX、微信開發者小程序
小程序轉換爲uni開源工具：miniprogram-to-uniapp(本次嘗試版本1.0.42)

miniprogram-to-uniapp（mac）

因手動轉頁面太過耗費時間，因此上網搜索發現了做者@zhangdaren開源了小程序到uni-app的轉換器，在此表示由衷感謝。

全局安裝：sudo npm install miniprogram-to-uniapp -g
查看版本：wtu -V
升級到最新版本：npm update miniprogram-to-uniapp -g
安裝指定版本：sudo npm install miniprogram-to-uniapp@1.0.49 -g
轉換：wtu -i [項目路徑] -o [輸出目錄] (-o及以後可不寫，會在同級目錄建立一個文件夾名+_uni結尾的文件夾)

轉換成功日誌

環境和平臺

點擊查看：運行環境判斷

開發環境和生產環境

跨端兼容

點擊查看：跨端兼容
條件編譯是用特殊的註釋做爲標記，在編譯時根據這些特殊的註釋，將註釋裏面的代碼編譯到不一樣平臺

寫法：以#ifdef或#ifndef加%PLATFORM%開頭，以#endif結尾。

• ifdef：if defined 僅在某平臺存在
• ifndef：if not defined 除了某平臺均存在
• %PLATFORM%：平臺名稱（如微信小程序：MP-WEIXIN；h5：H5）

支持的文件

• .vue
• .js
• .css
• pages.json
• 各預編譯語言文件，如：.scss、.less、.stylus、.ts、.pug

注意：條件編譯是利用註釋實現的，在不一樣語法裏註釋寫法不同，js使用// 註釋、css 使用/* 註釋 */、vue/nvue 模板裏使用<!-- 註釋 -->

注意問題

須要手動調試

實時跟進轉換器的更新狀況，如下部分問題已經在新版轉換器中修復了，若是使用的是新版轉換器，部分問題再也不須要手動調試 點擊查看：轉換器 README.md

globalData

globalData，這個工具裏已經轉化過了，在uni-app的app.vue文件中不能夠直接使用this.globalData，會報錯找不到，而應該使用this.$options.globalData。uni-app已經能夠支持。

動態class問題

<view :class="'know-text ' + (!showAllInfo?'info-omit':'')">

須要轉換爲

<view class="know-text" :class="(!showAllInfo?'info-omit':'')">

image、input標籤

image、input標籤會轉成<input></input>和<image></image>須要手動轉換成<img />和<input />

hidden

hidden會被工具轉換成v-if 須要手動將這些更改改回hidden

wxs文件

小程序中運行在視圖層，未避免邏輯層和渲染層交互通訊折損的wxs文件，在最新版本工具中仍會轉換爲js文件，但目前uni已經支持，轉換器在跟進，等待更新。點擊查看：uni對wxs的支持

data

視圖層的數據必須在data裏面定義過，不然undifined，轉換器會幫忙轉一部分，還有一部分沒有轉到，須要手動轉化

options.id

在小程序的onready回調中能夠經過this.options拿到頁面路徑參數，可是在轉換後的uni項目中，沒法取到該參數，須要在onload裏setData

onReady: function () {
    if (this.options.id) {
        getApp().ajax({
            url: 'xxxx',
            data: { 
                id: self.options.id 
            },
            success: res => {
                ...
            }
        })
    }
},

仍存在的問題

先後端改造

微信小程序轉換爲uni-app，再發布微信小程序是沒問題的，後續要將這套代碼發佈爲h5甚至更多平臺，涉及到服務端改造，尤爲h5未徹底分離的狀況下，工程量仍是蠻大的。

服務特殊處理

登錄、支付、推送、定位、地圖等聯網服務須要單獨處理

其餘

小程序轉換後的uni項目運行在微信小程序開發工具中報錯，但沒阻斷行爲

VM1425:1 \[Vue warn\]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.