[發(fā)明專利]一種頁(yè)面渲染方法、裝置、電子設(shè)備及可讀存儲(chǔ)介質(zhì)

在審

• 申請(qǐng)?zhí)枺?/td>: 202110506397.1
• 申請(qǐng)日: 2021-05-10
• 公開(kāi)（公告）號(hào): CN113297522A
• 公開(kāi)（公告）日: 2021-08-24
• 發(fā)明（設(shè)計(jì)）人: 張梓丹
• 申請(qǐng)（專利權(quán)）人: 廣州虎牙科技有限公司
• 主分類號(hào): G06F16/958
• 分類號(hào): G06F16/958;G06F16/957
• 代理公司: 深圳市威世博知識(shí)產(chǎn)權(quán)代理事務(wù)所(普通合伙) 44280
• 代理人: 黎堅(jiān)怡

本申請(qǐng)公開(kāi)了一種頁(yè)面渲染方法、裝置、電子設(shè)備及存儲(chǔ)介質(zhì)，本申請(qǐng)?zhí)峁┑捻?yè)面渲染方法，通過(guò)客戶端加載頁(yè)面數(shù)據(jù)，頁(yè)面數(shù)據(jù)包括網(wǎng)頁(yè)原生組件數(shù)據(jù)以及混合組件協(xié)議，網(wǎng)頁(yè)原生組件數(shù)據(jù)包括原生網(wǎng)頁(yè)標(biāo)簽，混合組件協(xié)議包括需要通過(guò)客戶端渲染的特征網(wǎng)頁(yè)標(biāo)簽以及特征網(wǎng)頁(yè)標(biāo)簽的位置；對(duì)原生網(wǎng)頁(yè)標(biāo)簽進(jìn)行渲染，得到原生網(wǎng)頁(yè)界面；以及基于混合組件協(xié)議，獲取到特征網(wǎng)頁(yè)標(biāo)簽，并通過(guò)客戶端將特征網(wǎng)頁(yè)標(biāo)簽渲染到原生網(wǎng)頁(yè)界面中特征網(wǎng)頁(yè)標(biāo)簽對(duì)應(yīng)的位置，兩次渲染得到顯示頁(yè)面。本申請(qǐng)的頁(yè)面渲染方法生成的頁(yè)面中既包括原有網(wǎng)頁(yè)頁(yè)面的組件，也包括客戶端原生組件，既能保證開(kāi)發(fā)的高效性，又能保證頁(yè)面能夠提供類似Native的用戶體驗(yàn)。

技術(shù)領(lǐng)域

本申請(qǐng)涉及計(jì)算機(jī)技術(shù)領(lǐng)域，特別是涉及一種頁(yè)面渲染方法、裝置、電子設(shè)備及可讀存儲(chǔ)介質(zhì)。

背景技術(shù)

隨著手機(jī)、電腦、平板電腦和智能手表等終端越來(lái)越深入人們的生活，用戶需要通過(guò)終端上的顯示頁(yè)面進(jìn)行查看和操作，如何更好的進(jìn)行頁(yè)面渲染也就變得尤為重要。

目前客戶端渲染頁(yè)面技術(shù)有客戶端Native技術(shù)、WEB技術(shù)與JS Bridge以及ReactNative/Weex混合技術(shù)。但上述技術(shù)要么無(wú)法給用戶提供類似Native的用戶體驗(yàn)，要么每次對(duì)APP進(jìn)行更新都需要發(fā)版，不夠靈活，加大了開(kāi)發(fā)者對(duì)應(yīng)用程序的開(kāi)發(fā)難度，也大大限制了開(kāi)發(fā)者的開(kāi)發(fā)效率。

因此，如何保證類似Native的用戶體驗(yàn)的同時(shí)，提高開(kāi)發(fā)效率非常關(guān)鍵。

發(fā)明內(nèi)容

本申請(qǐng)主要解決的技術(shù)問(wèn)題是提供一種頁(yè)面渲染方法、裝置、電子設(shè)備及可讀存儲(chǔ)介質(zhì)，以保證類似Native的用戶體驗(yàn)的同時(shí)，提高開(kāi)發(fā)者的開(kāi)發(fā)效率。

為了解決上述問(wèn)題，本申請(qǐng)第一方面提供了一種頁(yè)面渲染方法，所述方法包括：客戶端加載頁(yè)面數(shù)據(jù)，其中，所述頁(yè)面數(shù)據(jù)包括網(wǎng)頁(yè)原生組件數(shù)據(jù)以及混合組件協(xié)議；其中，所述網(wǎng)頁(yè)原生組件數(shù)據(jù)包括原生網(wǎng)頁(yè)標(biāo)簽；所述混合組件協(xié)議包括需要通過(guò)客戶端渲染的特征網(wǎng)頁(yè)標(biāo)簽以及所述特征網(wǎng)頁(yè)標(biāo)簽的位置；對(duì)所述原生網(wǎng)頁(yè)標(biāo)簽進(jìn)行渲染，得到原生網(wǎng)頁(yè)界面；以及基于所述混合組件協(xié)議，獲取到所述特征網(wǎng)頁(yè)標(biāo)簽，并通過(guò)所述客戶端將所述特征網(wǎng)頁(yè)標(biāo)簽渲染到所述原生網(wǎng)頁(yè)界面中所述特征網(wǎng)頁(yè)標(biāo)簽對(duì)應(yīng)的位置。。

為了解決上述問(wèn)題，本申請(qǐng)第二方面提供了一種頁(yè)面渲染的裝置，包括：加載模塊，用于客戶端加載頁(yè)面數(shù)據(jù)，其中，所述頁(yè)面數(shù)據(jù)包括網(wǎng)頁(yè)原生組件數(shù)據(jù)以及混合組件協(xié)議；其中，所述網(wǎng)頁(yè)原生組件數(shù)據(jù)包括原生網(wǎng)頁(yè)標(biāo)簽；所述混合組件協(xié)議包括需要通過(guò)客戶端渲染的特征網(wǎng)頁(yè)標(biāo)簽以及所述特征網(wǎng)頁(yè)標(biāo)簽的位置；渲染模塊，對(duì)所述原生網(wǎng)頁(yè)標(biāo)簽進(jìn)行渲染，得到原生網(wǎng)頁(yè)界面；以及基于所述混合組件協(xié)議，獲取到所述特征網(wǎng)頁(yè)標(biāo)簽，并通過(guò)所述客戶端將所述特征網(wǎng)頁(yè)標(biāo)簽渲染到所述原生網(wǎng)頁(yè)界面中所述特征網(wǎng)頁(yè)標(biāo)簽對(duì)應(yīng)的位置。

為了解決上述問(wèn)題，本申請(qǐng)第三方面提供了一種電子設(shè)備，包括相互耦接的存儲(chǔ)器和處理器，所述處理器用于執(zhí)行所述存儲(chǔ)器中存儲(chǔ)的程序指令，以實(shí)現(xiàn)上述第一方面的頁(yè)面渲染方法。

為了解決上述問(wèn)題，本申請(qǐng)第四方面提供了一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，其上存儲(chǔ)有程序指令，所述程序指令被處理器執(zhí)行時(shí)實(shí)現(xiàn)上述第一方面的頁(yè)面渲染方法。

本申請(qǐng)的有益效果是：區(qū)別于現(xiàn)有技術(shù)的情況，本申請(qǐng)?zhí)峁┑捻?yè)面渲染方法，通過(guò)客戶端加載頁(yè)面數(shù)據(jù)，頁(yè)面數(shù)據(jù)包括網(wǎng)頁(yè)原生組件數(shù)據(jù)以及混合組件協(xié)議，而其中的網(wǎng)頁(yè)原生組件數(shù)據(jù)包括原生網(wǎng)頁(yè)標(biāo)簽，混合組件協(xié)議包括需要通過(guò)客戶端渲染的特征網(wǎng)頁(yè)標(biāo)簽以及特征網(wǎng)頁(yè)標(biāo)簽的位置；對(duì)原生網(wǎng)頁(yè)標(biāo)簽進(jìn)行渲染，得到原生網(wǎng)頁(yè)界面；以及基于混合組件協(xié)議，獲取到特征網(wǎng)頁(yè)標(biāo)簽，并通過(guò)客戶端將特征網(wǎng)頁(yè)標(biāo)簽渲染到原生網(wǎng)頁(yè)界面中特征網(wǎng)頁(yè)標(biāo)簽對(duì)應(yīng)的位置，從而實(shí)現(xiàn)通過(guò)原生網(wǎng)頁(yè)渲染和客戶端原生渲染頁(yè)面渲染兩次渲染得到顯示頁(yè)面。本申請(qǐng)的頁(yè)面渲染方法生成的頁(yè)面中既包括原有網(wǎng)頁(yè)頁(yè)面的組件，也包括客戶端原生組件，既能保證開(kāi)發(fā)的高效性，又能保證頁(yè)面能夠提供類似Native的用戶體驗(yàn)。

附圖說(shuō)明

圖1是本申請(qǐng)?zhí)峁┑捻?yè)面渲染一實(shí)施例的流程示意圖；