我的第一個上線小程序，案例實戰篇一

感謝大家的關注，”我的第一個上線小程序“三篇博文已經更新結束（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開發教程就到這里，若是喜歡，就關注我吧，我們一起交流成長。

后面的實戰案例我會把手里的幾個項目的模塊分享出來給大家。我也會盡快更新小程序，實現教程數據同步。

歡迎大家體驗我的小程序，留言交流。