[發(fā)明專利]跨瀏覽器和小程序的webGL開發(fā)方法、裝置和計(jì)算機(jī)設(shè)備

在審

• 申請(qǐng)?zhí)枺?/td>: 202011083267.3
• 申請(qǐng)日: 2020-10-12
• 公開（公告）號(hào): CN112379863A
• 公開（公告）日: 2021-02-19
• 發(fā)明（設(shè)計(jì)）人: 劉民權(quán)
• 申請(qǐng)（專利權(quán)）人: 杭州易現(xiàn)先進(jìn)科技有限公司
• 主分類號(hào): G06F8/20
• 分類號(hào): G06F8/20
• 代理公司: 杭州華進(jìn)聯(lián)浙知識(shí)產(chǎn)權(quán)代理有限公司 33250
• 代理人: 金無量

本申請(qǐng)涉及一種跨瀏覽器與小程序的webGL開發(fā)方法、裝置、計(jì)算機(jī)設(shè)備和存儲(chǔ)介質(zhì)。所述方法包括：通過聲明canvas對(duì)象并補(bǔ)充window全局對(duì)象和document全局對(duì)象進(jìn)行標(biāo)記文檔適配；設(shè)置canvas對(duì)象尺寸，通過canvas對(duì)象的getContext函數(shù)獲取WebGL的上下文環(huán)境；通過將小程序中的request與webGL中的XMLHttpRequest對(duì)象對(duì)應(yīng)實(shí)現(xiàn)網(wǎng)絡(luò)資源加載適配。采用本方法能夠?qū)崿F(xiàn)webGL在完成瀏覽器的htlm5標(biāo)準(zhǔn)應(yīng)用開發(fā)后，加入上述適配過程之后可以直接構(gòu)建小程序版本，使得webGL的開發(fā)兼容瀏覽器應(yīng)用和小程序應(yīng)用。

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

本申請(qǐng)涉及應(yīng)用開發(fā)技術(shù)領(lǐng)域，特別是涉及一種跨瀏覽器和小程序的webGL開發(fā)方法、裝置、計(jì)算機(jī)設(shè)備和存儲(chǔ)介質(zhì)。

背景技術(shù)

隨著網(wǎng)頁web技術(shù)迅猛發(fā)展，各類web開發(fā)技術(shù)棧層出不窮，從“靜態(tài)網(wǎng)頁”、“動(dòng)態(tài)頁面”到“單頁Web應(yīng)用(single page web application，SPA)”、“漸進(jìn)式網(wǎng)頁應(yīng)用(Progressive Web App，PWA)”，web技術(shù)棧衍生出眾多優(yōu)秀思想和框架。此外，近年來小程序應(yīng)用開發(fā)需求逐漸擴(kuò)大，但是傳統(tǒng)的基于H5標(biāo)準(zhǔn)的瀏覽器技術(shù)創(chuàng)新不斷，也并不會(huì)被歷史丟棄。對(duì)于web應(yīng)用制作團(tuán)隊(duì)來說顯然已無法避免同時(shí)開發(fā)htlm5標(biāo)準(zhǔn)應(yīng)用和小程序應(yīng)用，與此同時(shí)各家小程序技術(shù)存在較大差異、其接口定義與實(shí)現(xiàn)各成體系，Webview技術(shù)雖具備web頁面能力，但對(duì)于依賴系統(tǒng)硬件參數(shù)的應(yīng)用來說，不得不使用小程序原生技術(shù)重構(gòu)一版，這使得開發(fā)成本幾乎是雙倍。

針對(duì)相關(guān)技術(shù)中，瀏覽器與小程序的應(yīng)用開發(fā)不兼容的問題，目前尚未提出有效的解決方案。

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

基于此，有必要針對(duì)上述技術(shù)問題，提供一種跨瀏覽器與小程序的webGL開發(fā)方法、裝置、計(jì)算機(jī)設(shè)備和存儲(chǔ)介質(zhì)。

第一方面，本申請(qǐng)實(shí)施例提供了一種跨瀏覽器與小程序的webGL開發(fā)方法，其特征在于，所述方法包括：

通過聲明canvas對(duì)象并補(bǔ)充window全局對(duì)象和document全局對(duì)象進(jìn)行標(biāo)記文檔適配；

設(shè)置所述canvas對(duì)象尺寸，通過所述canvas對(duì)象的getContext函數(shù)獲取WebGL的上下文環(huán)境；

通過將所述小程序中的request與webGL中的XMLHttpRequest對(duì)象對(duì)應(yīng)實(shí)現(xiàn)網(wǎng)絡(luò)資源加載適配。

在其中一個(gè)實(shí)施例中，補(bǔ)充window全局對(duì)象包括：設(shè)置bindCanvas函數(shù)綁定所述canvas對(duì)象，并使用全局變量存儲(chǔ)所述canvas對(duì)象；定義requestAnimationFrame和cancelAnimationFrame作為window的驅(qū)動(dòng)函數(shù)。

在其中一個(gè)實(shí)施例中，所述補(bǔ)充document全局對(duì)象包括：通過bindpage函數(shù)將小程序當(dāng)前頁面綁定至document對(duì)象；定義符合html5標(biāo)準(zhǔn)的getElementById函數(shù)；根據(jù)所述getElementById函數(shù)提供的id查找所述當(dāng)前頁面中的元素；根據(jù)所述元素返回所述canvas對(duì)象和image對(duì)象。

在其中一個(gè)實(shí)施例中，所述設(shè)置所述canvas對(duì)象尺寸包括：構(gòu)建HTMLCanvasElement函數(shù)，所述HTMLCanvasElement函數(shù)包括style參數(shù)，所述style參數(shù)包括寬屬性和高屬性；傳入所述canvas對(duì)象，獲取所述canvas對(duì)象寬度設(shè)置為所述寬屬性，獲取所述canvas對(duì)象高度設(shè)置為所述高屬性。

在其中一個(gè)實(shí)施例中，所述將所述小程序中的request與webGL中的XMLHttpRequest對(duì)象對(duì)應(yīng)之后，所述方法還包括：將所述小程序的緩存API與html5標(biāo)準(zhǔn)的localstorage進(jìn)行適配。