小程序模板網(wǎng)

【小程序踩坑系列】小程序退出后掃碼再進(jìn)入,“外部”代碼不會(huì)再次執(zhí)行 .

發(fā)布時(shí)間:2018-05-02 15:13 所屬欄目:小程序開發(fā)教程

問(wèn)題:

小程序退出后再次掃碼進(jìn)入,只會(huì)執(zhí)行生命周期函數(shù)里的代碼,“外部”代碼不會(huì)再執(zhí)行。

具體描述:

在我們的項(xiàng)目里,我們會(huì)將一部分本地變量不寫在小程序 pageConfig 的 data 中,而直接在文件頭進(jìn)行聲明。這樣是為了減少 data 的大小,加快頁(yè)面渲染速度。但這也無(wú)意中帶來(lái)了新問(wèn)題,我們看看下面的例子。

出錯(cuò)的index.js文件:


    const localFlag = true; // “外部”代碼,僅執(zhí)行一次初始化,第二次掃碼不會(huì)執(zhí)行!

    const pageConfig = {
        data: {
            text: 'init data'
        },
        onLoad(this, p) {  
            console.error("localFlag默認(rèn)為:", localFlag);

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

    Page(pageConfig);

按照以上代碼運(yùn)行,用戶初次掃碼時(shí),localFlag的值為true??墒牵?dāng)用戶退出小程序,再次掃碼進(jìn)入時(shí),localFlag沒有再初始化,而為false了。如下圖所示:

 

 

如何避免上述情況的出現(xiàn)呢?

其實(shí)也很簡(jiǎn)單,就是在文件頭部只做本地變量聲明,而不做定義。將定義部分放在生命周期函數(shù)(如:onload)內(nèi)。具體代碼如下:

正確的ndex.js文件:


    const localFlag; // 只做變量聲明而不定義

    const pageConfig = {
        data: {
            text: 'init data'
        },
        onLoad(this, p) {  
            localFlag = true;
            console.error("localFlag默認(rèn)為:", localFlag);

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

    Page(pageConfig);

如此,每次進(jìn)入頁(yè)面 localFlag 都會(huì)被置為 true 了。

環(huán)境:

IOS 和 安卓 均可穩(wěn)定復(fù)現(xiàn)。

原因:

這看起來(lái)屬于小程序自身的模塊設(shè)計(jì)方式導(dǎo)致的。推測(cè)即使退出小程序,之前打開的頁(yè)面也沒有做到真正卸載,而處在內(nèi)存之中。下次再次進(jìn)入同一個(gè)頁(yè)面時(shí),會(huì)被喚起。

解決方案:

只在頭部代碼進(jìn)行本地變量聲明,而不定義。將本地變量的定義放在生命周期函數(shù)中去。

風(fēng)險(xiǎn):

屬于小程序開發(fā)的經(jīng)驗(yàn)積累相關(guān)。


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://www.u-renovate.com/wxmini/doc/course/24159.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢
AI智能客服 ×