【小程式踩坑系列3】小程式退出後掃碼再進入，“外部”程式碼不會再次執行

微信小程式經驗分享發表於2017-12-18

作者: 蔣歡

問題：

小程式退出後再次掃碼進入，只會執行生命週期函式裡的程式碼，“外部”程式碼不會再執行。

具體描述：

在我們的專案裡，我們會將一部分本地變數不寫在小程式 pageConfig 的 data 中，而直接在檔案頭進行宣告。這樣是為了減少 data 的大小，加快頁面渲染速度。但這也無意中帶來了新問題，我們看看下面的例子。

出錯的index.js檔案：

    const localFlag = true; // “外部”程式碼，僅執行一次初始化，第二次掃碼不會執行！

    const pageConfig = {
        data: {
            text: 'init data'
        },
        onLoad(this, p) {  
            console.error("localFlag預設為："， localFlag);

            // Do something you need...
            localFlag = false;
        }
    }

    Page(pageConfig);
複製程式碼

按照以上程式碼執行，使用者初次掃碼時，localFlag的值為true。可是，當使用者退出小程式，再次掃碼進入時，localFlag沒有再初始化，而為false了。如下圖所示：

圖1 使用者二次掃碼進入小程式，localFlag為false

如何避免上述情況的出現呢？

其實也很簡單，就是在檔案頭部只做本地變數宣告，而不做定義。將定義部分放在生命週期函式（如：onload）內。具體程式碼如下：

正確的ndex.js檔案：

    const localFlag; // 只做變數宣告而不定義

    const pageConfig = {
        data: {
            text: 'init data'
        },
        onLoad(this, p) {  
            localFlag = true;
            console.error("localFlag預設為："， localFlag);

            // Do something you need...
            localFlag = false;
        }
    }

    Page(pageConfig);
複製程式碼

如此，每次進入頁面 localFlag 都會被置為 true 了。

環境：

IOS 和 安卓 均可穩定復現。

原因：

這看起來屬於小程式自身的模組設計方式導致的。推測即使退出小程式，之前開啟的頁面也沒有做到真正解除安裝，而處在記憶體之中。下次再次進入同一個頁面時，會被喚起。

解決方案：

只在頭部程式碼進行本地變數宣告，而不定義。將本地變數的定義放在生命週期函式中去。

風險：

屬於小程式開發的經驗積累相關。

相關文章