美文网首页Cocos Creator
(详谈)Cocos Creator之自定义项目提示文件

(详谈)Cocos Creator之自定义项目提示文件

作者: 喜欢桃子的阿狸 | 来源:发表于2019-03-28 12:15 被阅读113次

    很多小伙伴们都知道Creator用JavaScript写项目是没有代码提示的,可能对于习惯有代码提示的童鞋不友好,想要代码有提示的童鞋,我建议你使用TypeScript写项目。这篇也是针对TypeScript项目的。

    1.准备阶段

    新建一个'test'空白项目,并打开其根目录 image.png 我们会发现根目录有creator.d.ts这个文件,这个是引擎自带的api提示文件,我们如果想自定义的话,必须取一个和它后缀名相同的文件。例如:wx.d.ts,并放在根目录。 image.png 接下来我们用编辑器打开这个文件进行编辑,因为我们开发的是微信小游戏,经常会用到微信的一些api,但是这些api是没有提示的,我们经常要去翻文档,很不方便。首先我们先声明wx一个模块。 image.png declare是声明的意思,module是模块的意思,wx是模块名字。我们以wx.showShareMenu()和wx.shareAppMessage()为例。 image.png wx.showShareMenu()是显示右上角转发按钮的意思,可以看到这个函数是可以带参数的。wx.shareAppMessage()也是一样带有参数,它是点击右上角按钮触发事件,废话不多说开干。 image.png 我在脚本中写"wx"是有提示的,还不会报错,如果没有声明wx,会报红。 image.png 下一步。我们把调用下方法,看见没有提示出来了,还有注释和参数。 image.png

    下面上代码

    wx.d.ts

    interface _showShareMenuObject{
        /**
         * 是否使用带 shareTicket 的转发[详情]
         */
        withShareTicket?: boolean;
    
        /**
         * 接口调用成功的回调函数
         */
        success?: () => void;
    
        /**
         * 接口调用失败的回调函数
         */
        fail?: () => void;
    
        /**
         * 接口调用结束的回调函数(调用成功、失败都会执行)
         */
        complete?: () => void;       
        }
    
    
    interface _ShareInfo{
            /**
             * 转发标题,不传则默认使用当前小游戏的昵称。
             */
            title: string,
            /**
             * 转发显示图片的链接,可以是网络图片路径或本地图片文件路径或相对代码包根目录的图片文件路径。显示图片长宽比是 5:4
             */
            imageUrl: string;
            /**
             * 查询字符串,必须是 key1=val1&key2=val2 的格式。从这条转发消息进入后,可通过 wx.getLaunchOptionSync() 或 wx.onShow() 获取启动参数中的 query。
             */
            query: string,
            /**
             * 审核通过的图片 ID
             */
            imageUrlId?: string
        }
    
    declare module wx{
    
        /**
         * 显示当前页面的转发按钮
         * @param object 参数
         */
        export function showShareMenu(object?:_showShareMenuObject):void;
    
        /**
         * 监听用户点击右上角菜单的「转发」按钮时触发的事件
         */
        export function onShareAppMessage(callback:Function):void;
        
    }
    

    test.ts,这个脚本挂在场景的Canvas下

    
    const {ccclass, property} = cc._decorator;
    
    @ccclass
    export default class NewClass extends cc.Component {
    
        onLoad () {
            if (CC_WECHATGAME) {
                let shareObj:_showShareMenuObject = {withShareTicket:true};
                wx.showShareMenu(shareObj);
                wx.onShareAppMessage(()=>{
                    console.log("点击转发按钮");
                    let shareInfo:_ShareInfo = {
                        title:"aa",
                        imageUrl:"http://img.manew.com/data/attachment/forum/201812/17/101356eauvqvm5b3u0zr9m.png.thumb.jpg",
                        query:null
                    };
                    return shareInfo;
                });
            }
        }
    
        start () {
    
        }
    
        // update (dt) {}
    }
    

    然后是 构建发布
    打开->项目->构建发布


    image.png

    然后打开我们发布的项目,点击预览,使用微信扫扫就可以测试我们的项目了


    image.png 测试结果如下图 image.png image.png

    相关文章

      网友评论

        本文标题:(详谈)Cocos Creator之自定义项目提示文件

        本文链接:https://www.haomeiwen.com/subject/vqpfbqtx.html