uiapp套殼熱更新實現方案(h5也是uiapp寫的)

lvguoliang(学无止境)發表於2024-06-14
UIAPPH5

總體思路： 在HBuilder X同一個工程裡打包apk和h5， apk程式碼中呼叫webview， webview載入的就是打包出的h5（h5放在nginx中）。apk和h5同一工程，透過條件編譯來區分。//#ifdef APP-PLUS下的程式碼是打包apk需要的程式碼， // #ifdef H5 是打包h5需執行的程式碼。(apk和h5的程式碼也可以寫在倆個工程裡，就不需要用條件編譯來區分)

具體實現：

1. pages.json中指定載入的首頁， apk(即原生app)指定index為首頁， 這個頁面就載入了一個webview。 h5中指定具體的業務頁面welcome為首頁

    "pages": [ //pages陣列中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
        {
            // #ifdef APP-PLUS
            "path": "pages/login/index",
            // #endif
            // #ifdef H5
            "path": "pages/login/welcome",
            // #endif
        }, ...

2. index頁面載入webview程式碼, src中的地址就是打包出的h5, 放在nginx下轉發。

<template>
    <view class="content">
        <web-view :src="src" @message="onMessage"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                src: `http://192.168.2.148:18068/#/?timestamp=${new Date().getTime()}`,
            }
        },
        methods: {
            onMessage(event) {
            }
        }
</script>

相關文章