LuaViewSDK入门指南：构建你的第一个跨平台Lua应用-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00333/article/details/148552892

LuaViewSDK入门指南：构建你的第一个跨平台Lua应用

LuaViewSDK A cross-platform framework to build native, dynamic and swift user interface - 强大轻巧灵活的客户端动态化解决方案项目地址: https://gitcode.com/gh_mirrors/lu/LuaViewSDK

前言

LuaViewSDK是一个强大的跨平台框架，它允许开发者使用Lua脚本语言快速构建原生移动应用界面。本文将详细介绍如何从零开始构建你的第一个LuaView应用，涵盖Android和iOS双平台的搭建过程，以及Lua业务代码的编写方法。

环境准备

在开始之前，请确保你已经具备以下开发环境：

Android Studio（用于Android开发）
Xcode（用于iOS开发）
Lua基础语法知识

Android平台集成

1. 创建Android工程

首先在Android Studio中创建一个新的Android项目，选择适合的项目模板。

2. 添加LuaView依赖

将LuaView模块导入到你的项目中：

通过File -> New -> Import Module，选择LuaViewSDK目录下的Android/LuaView子目录
在项目的build.gradle文件中添加依赖：

dependencies {
    implementation project(':LuaView')
}

3. 配置基础Activity

创建一个继承自LuaViewBasicActivity的Activity：

public class MainActivity extends LuaViewBasicActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
    
    // 可选：自定义Lua入口页面
    @Override
    public String getMainPage() {
        return "App"; // 默认App.lua
    }
    
    // 可选：自定义Lua代码主入口
    @Override
    public String getLuaViewEntry() {
        return "kit/main.lua"; // 默认路径
    }
}

iOS平台集成

1. 创建iOS工程

在Xcode中创建一个新的iOS项目，选择Single View Application模板。

2. 使用CocoaPods添加依赖

创建Podfile文件并添加以下内容：

target 'YourProjectName' do
    pod 'LuaViewSDK'
end

然后在终端执行pod install命令安装依赖。

3. 配置基础ViewController

创建一个继承自LViewController的自定义ViewController：

#import "LViewController.h"

@interface MyLuaViewController : LViewController
@end

在AppDelegate中设置根视图控制器：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    
    MyLuaViewController* controller = [[MyLuaViewController alloc] 
        initWithPackage:[[NSBundle mainBundle] resourcePath] 
        mainScript:@"kit/main.lua"];
    
    self.window.rootViewController = [[UINavigationController alloc] 
        initWithRootViewController:controller];
    [self.window makeKeyAndVisible];
    
    return YES;
}

Lua业务代码开发

1. 理解LuaView架构

LuaViewSDK采用了一种独特的架构设计：

使用XML定义界面布局
使用Lua编写业务逻辑
两者通过pica模块进行绑定

2. 创建基础页面

在assets目录下创建App.lua文件：

local meta = object:new()

function meta:onCreate()
    -- 渲染XML布局并获取视图对象
    self.views = pica:getInstance():render("app.xml")
end

return meta

3. 编写XML布局

创建app.xml文件：

<View frame="0, 0, sys.contW, sys.contH" css="{justify-content='center', align-items='center'}">
    <Text css="{width=sys.contW/2, height=sys.contW/8}" 
          text="Hello World" 
          fontSize="18" 
          textAlign="TextAlign.CENTER"/>
</View>

4. 运行效果

完成上述步骤后，运行应用将看到一个简单的"Hello World"界面。

进阶示例：电影列表应用

让我们扩展这个基础应用，创建一个显示豆瓣电影列表的功能。

1. 改进XML布局

创建新的list.xml文件：

<View id="root" frame="0, 0, sys.contW, sys.contH">
    <List id="tableView" frame="0, 0, sys.contW, sys.contH" bg="0xeeeeee"/>
    <Load id="loading" color="0xF06292" 
          frame="0, sys.contH/2 - sys.contW/8, sys.contW, sys.contW/8"/>
</View>

2. 实现列表功能

更新App.lua文件：

local meta = object:new()

function meta:onCreate()
    self.views = pica:getInstance():render("list.xml")
    self.loading = self.views["loading"]
    self.list = self.views["tableView"]
    
    self:fetchMovieData()
end

function meta:fetchMovieData()
    self.loading:show()
    Http():get("http://api.douban.com/v2/movie/in_theaters", function(response)
        self.loading:hide()
        if response:code() == 200 then
            local data = Json:toTable(tostring(response:data()))
            self:setupListView(data)
        else
            Toast("请求失败")
        end
    end)
end

function meta:setupListView(data)
    self.list:initParams({
        Section = {
            SectionCount = function() return 1 end,
            RowCount = function() return data["count"] end
        },
        Cell = {
            Id = function() return "MovieCell" end,
            MovieCell = {
                Size = function() return sys.contW, sys.contH/3 end,
                Init = function(cell)
                    cell.objs = pica:getInstance():render("app.xml")
                end,
                Layout = function(cell, _, row)
                    local movie = data["subjects"][row]
                    cell.objs["profile"]:image(movie["images"]["large"])
                    cell.objs["movieName"]:text(movie["title"])
                    -- 其他UI更新...
                end
            }
        }
    })
    self.list:reload()
end

return meta