感谢大家的关注,"我的第一个上线小程序" 三篇博文已经更新结束 (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() {
- }
- }
是不是以为到了这一步就结束了, 别着急, 还有关键的一个步骤, 就是把 helloworld.JS 和我们的场景关联起来.
最后一步: 拖拽 helloworld.JS 到场景的 runtime 字段中
到了这一步, 才算大功告成, 我们启动 F8 编译, F5 启动调试.
效果图
是不是很简单呀, 第一篇 LayaAir 开发教程就到这里, 若是喜欢, 就关注我吧, 我们一起交流成长.
后面的实战案例我会把手里的几个项目的模块分享出来给大家. 我也会尽快更新小程序, 实现教程数据同步.
欢迎大家体验我的小程序, 留言交流.
来源: https://www.cnblogs.com/wyang/p/10277128.html