將現有H5應用快速轉換為小程式，利用SuperApp產品的優勢，提升應用的使用者體驗和開發體驗。
本篇只適用於H5單頁面應用，單頁面應用按以下步驟改造即可快速轉換為小程式；如果您的應用是多頁面應用，建議先使用React、Vue等常用技術棧變更為單頁面應用，或者直接參考WindVane腳手架開始您的小程式之旅。
如何修改代碼
介面調整
前端代碼中請求後端介面，如果使用的是相對路徑，需要改為包含host的絕對路徑
UI適配
Header適配
如下圖，h5專案如果內建頭，在小程式情境下需要將其隱藏，並通過調用JSAPI設定小程式的title
詳細代碼如下：
//React: 如使用架構裡面沒有公用的render邏輯，可將其封裝成useLayout
...
useEffect(() => {
// 判斷是否是小程式
const isMiniprogram = window?.WindVane
if (isMiniprogram) {
//設定navbar
const params = {
title: "{{title}}",
titleColor: '#000000',
barStyle: 'normal',
backgroundColor: '#FFFFFFFF', // rgba
hideBackButton: 'false',
theme: 'dark'
};
window?.WindVane.call('WVNavigationBar', 'update', params, function() {
// success
}, function(e: any) {
// failure
});
}
}, [])
...
// Vue3
...
setup() {
onMounted(() => {
// 判斷是否是小程式
const isMiniprogram = window?.WindVane
if (isMiniprogram) {
//設定navbar
const params = {
title: "{{title}}",
titleColor: '#000000',
barStyle: 'normal',
backgroundColor: '#FFFFFFFF', // rgba
hideBackButton: 'false',
theme: 'dark'
};
window?.WindVane.call('WVNavigationBar', 'update', params, function() {
// success
}, function(e: any) {
// failure
});
}
}
}
...
頁面跳轉適配
跳轉內部應用頁面
如https://superapp.demos.com/docment屬於一個 h5單頁面應用，https://superapp.demos.com/console屬於另外一個h5單頁面應用；基於Web API的跳轉，通過window.location.href的代碼需改造。將兩個內部應用發布為兩個小程式，使用以下的代碼處理：
window.WindVane.call(
"wv",
"navigateToMiniApp",
{
appId: appId // 目前小程式的id
},
function () {
console.log('open miniapp successfully');
},
function (error) {
console.log('open miniapp error', error);
}
);
跳轉外部應用頁面
容器SDK預設不攔截跳轉至外部url，如小程式內開啟網站 (https://www.alibabacloud.com); 使用Web的跳轉方式跳轉即可，代碼如下：
window.location.href = "https://www.alibabacloud.com"如果用戶端App實現了攔截邏輯，則跳轉是否有效依賴具體實現邏輯。
工程適配
以下為必要項，不符合規定會導致小程式載入異常。
路由必須為hash
不同技術架構有其設定路由模式的方式，無統一修改方式，需自行改造。
Hash路由：https://superapp.demos.com/#/home （正確）
History路由：https://superapp.demos.com/home（不正確）
打包後的目錄有index.html
如下圖
vscode外掛程式依賴項（走控制台上傳可忽略）
根目錄package.json必須有version欄位
打包執行方法命名必須是build，即通過npm run build可完成打包
預設打包的target目錄名稱為dist，如專案打包的target目錄不為dist，則需要在vscode外掛程式setting中設定打包路徑名稱
引入JSAPI SDK
在單頁面應用index.html中引入https://g.alicdn.com/mtb/lib-windvane/3.0.0/windvane.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta content="telephone=no" name="format-detection">
<link rel="shortcut icon" href="/favicon.svg">
...
<script src="https://g.alicdn.com/mtb/lib-windvane/3.0.0/windvane.js"></script>
...
...
</head>
</html>如何發布小程式
控制台上傳
將打包後的所有靜態資源檔案壓縮成ZIP包，如下圖在SuperApp台上傳並發布。
