我的第一个上线小程序,案例实战篇一

感谢大家的关注,”我的第一个上线小程序“三篇博文已经更新结束(PS:我的第一个上线小程序,三篇其三 喜欢的可以跳转)。

我前面的文章是写我的小程序是如何实现的,本来应该更新小程序版本同时发布,更新的内容主要是底部tabar,切换基础篇和实战篇内容。先把实战篇的在博客园连续发下去,希望大家和我一起探讨成长。

我这个系列主要是分享基于LayaBox开发微信小游戏系列,开篇我先用一个经典案例——HelloWorld 教程,带大家熟悉下Laya。

开发工具大家可以自己度娘,直接下载2.0版本。

本片为了凑字数(PS:上一篇就以为文字内容过少,被博客园下架了,请审核的手下留情!!!)。

正式开始

窗体程序大家应该都接触过,LayaAir IDE也实现了拖拽式编程。

第一步:新建一个空的LayaAir 空项目

我的第一个上线小程序,案例实战篇一

输入项目名称,大家随意呀,选择一个路径,编程语言选择JavaScript即可,点击创建即可。

PS:整个项目结构大家可以边学习边熟悉,不着重讲解,相信大家经过两三个小练习就可以熟悉了。

第二步:我们把窗口切换到IDE的编辑模式,在Scenes文件夹右键-》新建-》页面/场景,输入场景名HelloWorld(也可以自行修改),点击创建就行

我的第一个上线小程序,案例实战篇一

经过这一步,我们的游戏场景就创建出来了。

下面我们在场景中添加一个按钮,窗口依然是编辑模式,在Basics目录下找到UI目录,在UI目录里面找到Button并拖拽到场景中,修改它的通用属性var为btnShow,常用属性label为helloworld

我的第一个上线小程序,案例实战篇一

经过这两步我们的游戏场景就大功告成了。

第三步:我们把窗口切换到IDE的代码模式,在src目录下面新建一个scripts的文件夹,在scripts文件夹右键-》新建模板文件-》新建脚本文件,点击确定生成脚本文件

我的第一个上线小程序,案例实战篇一

我们在HelloWorld.js文件中复制下面的javascript代码,并保存。

代码的主要功能是点击helloworld按钮弹出一个对话框,对话框里面展示 Hello World!

export default class HelloWorld extends Laya.Scene { constructor() { super(); HelloWorld.instance = this; } onBtnShowClick(){ var dialog = new Laya.Dialog(); dialog.width=300; dialog.height=600; //var bg = new Laya.Image('comp/img_bg.png'); //dialog.addChild(bg); var button = new Laya.Button('comp/button.png'); button.label='Hello World!'; button.name = Laya.Dialog.CLOSE; button.width=260; button.height=500; button.pos(35, 35); dialog.addChild(button); dialog.dragArea = '0,0,300,600'; dialog.show(); } onEnable() { this.btnShow.on(Laya.Event.CLICK,this,this.onBtnShowClick); } onDisable() { } }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsxfdz.html