天天看點

cocos creator 導出web項目如何對接H5 SDK

最近在工作中遇到了接入H5 SDK, 之前一般都為原生sdk的接入,這個已經衆所周知了,随便百度或者Google一下就能找到接入的方案。在接入h5sdk的時候查閱了很多的文檔,但一直處于一知半解的狀态,下面我将如何接入h5sdk的步驟總結下來。

1. 如何将h5sdk導入到web項目中。

在此我以mac為例:将h5sdk遠端url位址嵌入到工程中。

Cocoscreator H5 jsSDK引入步驟:

一、找到cocoscreator打包H5的模版檔案所在位置。在mac中的操作是,打開應用程式,在cocoscreator處右鍵,點選顯示包内容。

cocos creator 導出web項目如何對接H5 SDK

二、進入模版檔案夾,在我電腦中是/Applications/CocosCreator.app/Contents/Resources/static/build-templates/,同學們可以參考着找到自己電腦上的這個檔案夾。

這個檔案夾中,内容如下

cocos creator 導出web項目如何對接H5 SDK

進入web-mobile檔案夾,web-mobile裡有兩個檔案夾,見下圖:

cocos creator 導出web項目如何對接H5 SDK

這兩個檔案夾裡面,是打包h5之後網頁的入口檔案,從

main.js

進入這個檔案。這兩個檔案夾下都含有一個

index.html

cocos creator 導出web項目如何對接H5 SDK
cocos creator 導出web項目如何對接H5 SDK

打開index.html 将jssdk 路徑寫入到檔案中,如下圖

cocos creator 導出web項目如何對接H5 SDK

兩個檔案都需要更改哦,導出後就可以直接在項目中通路到jssdk中的接口了。

2. 如何在cocos creator 中點選預覽可以直接調試

找到上述所說的static檔案夾下

cocos creator 導出web項目如何對接H5 SDK

點開後修改index.jade檔案,按第一步格式修改,在creator預覽中下圖位置就可以找到jssdk是否加載成功了

cocos creator 導出web項目如何對接H5 SDK

導入成功後,直接在項目中調取jssdk export的對象,不需要require js檔案。例如:我的jssdk導出的對象是gwGame,我直接調取gwGame.h5PaySdk(),打斷點可以調試是否走到jssdk檔案中。最後感謝大家的支援,希望能夠幫助到大家。

繼續閱讀