For cocos creator to remotely load pictures, many methods provided on the Internet are now outdated. If you use it, you will either report an error or fail to compile. Because the latest version is 3.7.2, so I have tossed and summarized the correct method. Another problem is how to implement asynchronous access to the network API in the WeChat cloud function. I thought it was very simple, but I encountered a problem in practice and solved it by the way.
1. Remote image loading
The methods given on the Internet basically have problems. After repeated tests, the specific success codes are as follows:
assetManager.loadRemote(res.avatarUrl, { ext: '.png' }, (err: any, asset: ImageAsset) => {
//资源加载成功
if (err === null) {
this.avatarUrl.spriteFrame =
SpriteFrame.createWithImage(asset);
}
});It's very simple, but it's very important to have an ext parameter, otherwise it will go wrong anyway! Here res.avataUrl is the avatar address of the picture, you can replace it with any url, this.avataUrl is the sprite that displays the avatar. It can be replaced according to the actual content.
2. WeChat cloud function realizes synchronous network api access
In cloud hosting, it can return asynchronously, so the network return content can be set asynchronously in the code, which depends on the language and web service. It is different in the cloud function, the return content is determined by the return value of the main function. The methods provided on the Internet are all solved by the combination of wait/async, but in my actual problem, simply adding wait is invalid. In fact, it returns immediately after calling, without waiting for the end of the function. After repeated testing, it is found that due to coding reasons, there are more layers of asynchronous calls in the function call chain. If you only use the combination of wait and async in the outermost layer, you will not be able to wait completely.
So the solution is: all asynchronous functions and calling parts involved in the call chain need to be transformed. That is, all functions are changed to async prefix, and the call part is added with the wait keyword. For example, the main function calls functionA, functionA calls functionB, and there is an asynchronous call implementation in functionB, so functionA and functionB must add the async keyword; the part of main calling functionA and functionA calling functionB must add the wait parameter.
export async function main(event: any, context: any) {
let rc = {};
await functionA( (res) => {
rc = res;
});
return rc;
}
public async functionA( successCallback: (res: any) => void = null){
await functionB(successCallback);
}
public async functionB(successCallback: (res: any) => void = null){
await otherAsyncfunction(successCallback);/*异步调用其他函数*/
}The following is an example of my game, you can try it:
