ArgoUI环境搭建
搭建MLNUI开发环境，操作步骤如下：
1. 安装IDE开发环境，IntelliJ IDEA 、Xcode 、 Android Studio；
2. 在IDEA中新建 ArgoUI 工程，创建 .Argo 文件，打包 ArgoUI工程；
3. 客户端配置打包的 Argo 工程，并加载界面完成通信；
-
IDEA下载Version 2020.1版本，其他版本可能存在适配问题，可选择社区版本，无需注册码，下载安装包后，一路默认安装即可。
-
下载ArgoUI，依次选择 IntelliJ IDEA -> Preferences -> Plugins -> ⚙ -> Install Plugin from Disk...，选择下载好的ArgoUI插件，然后重启Idea即可。
⚠️ 注：ArgoUI插件中已经集成了EmmyLua，如果安装了EmmyLua或Lua插件，需要先将其卸载。(若已产生冲突，可进入/Users/XXX/Library/Application Support/JetBrains/IdeaIC2020.1/plugins目录下删除EmmyLua或Lua插件相关，重启Idea即可。)
-
可从AppStore中自行下载。
-
下载地址 ，推荐使用3.5版本。
-
在Idea中，依次选择 File -> New -> Project，工程类型选择
ArgoUI，点击Next，工程命名为HelloWorld，点击Finish。 -
在
src目录下，右键 -> New -> New Argo File，文件名命名为HelloWorld。此时，
src目录下会生成HelloWorld.ag和对应的HelloWorld.lua文件，其中，在.ag文件里写声明式布局，.lua文件里会生成与声明式布局对应的lua代码。
复制如下代码到helloworld.ag文件后，在模拟器里可以即时查看运行效果。
--HelloWorld.ag
model(userData)
---
--- UI
ui {
--- layout views
VStack()
.widthPercent(100)
.heightPercent(100)
.mainAxis(MainAxis.CENTER)
.subs(
Label(userData.title)
.crossSelf(CrossAxis.CENTER)
.fontSize(40)
)
}
---
--- preview
local function preview()
userData.title = "Hello World"
endstep4.png)
可通过热重载功能，真机同步UI效果。即PC模拟器、Android、iOS三端同时查看UI。
* 点击`Devices Info`一栏。选择可连接设备。
* `src`下，将与`ag`文件同名的`preview_.lua`右键`Mark As Entry File`；
* 点击`Entry File`一栏，将该`preview_.lua`作为入口，点击刷新即可。（自动同步开启后，ag修改，ui会立即同步。若关闭，需手动点击刷新去同步ui）
点击前往热重载详细教程
-
这里以
HelloWorld.ag为例对打包流程进行说明。 打包成功后，会在工程目录下生成output包，包目录下有对应的lua文件和OC类及java类。
其中lua文件是ui部分。OC类是iOS的model部分。java类是Android的model部分。
打包生成的这些文件将用于原生工程中。- 切到
Packet一栏，选择要打包的平台，及CPU架构（对应手机设备的32操作系统与64位的操作系统）。如图步骤3。 - 选择打包相关路径。如图步骤567
lua路径：打包后生成的lua文件将放在该路径下。（勾选打包packet目录）
VM路径：打包后生成的ViewModel文件将放在该路径下。
入口文件：要进行打包操作的ag文件。
设置完成后，点击打包即可。
- 切到
-
- 在
Podfile中添加pod 'ArgoUI','0.4.4'
⚠️ 注意：若出现如下图algorithm file not found报错信息，需将Podfile中use_frameworks此行注释掉。- 将打包生成的
lua文件和OC类(ViewModel文件夹下的内容)拖到iOS工程目录中，Added folders选择Greate groups。
- 在
1） 在ViewController.m中添加如下代码：
#import "UserDataModel.h"
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
// 1. 创建一个ArgoViewController示例
ArgoViewController *viewController = [[ArgoViewController alloc] initWithModelClass:[UserDataModel class]];
// 2. 创建数据流，并做绑定。提供defaultUserData方法，将argo源文件中的preview数据作为初始数据，即手动装配
UserData *model = [UserData defaultUserData];
[viewController bindData:model];
// 3.添加到指定的控制器上.
[viewController argo_addToSuperViewController:self frame:self.view.bounds];
// 4. 设置定时器，
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
model.title = @"welcome";
});
}
2）效果图
3）debug调试
在MDVChatMovieSearchPageModel.m文件中找到-(BOOL)argo_compareKeyPath方法，修改返回值为YES，表示打开测试”开关“，当服务器找不到我们所需要的数据资源时，可通过打印日志来进行提示，便于代码调试。默认值NO表示不会打印。
.png)
.png)
1）添加maven库地址
//内部配置陌陌maven库。在工程根目录的下`build.gradle`文件中 添加maven库地址及版本号：
allprojects {
repositories {
maven {
url "http://bjrw-platform-android.dev.bjrw.momo.com:8083/artifactory/momo-dev"
credentials {
username NEXUS_USERNAME
password NEXUS_PASSWORD
}
}
}
ext {
lua_debug = false
implementation_debug = true
compileSdkVersion = 28
buildToolsVersion = "28.0.3"
minSdkVersion = 19
targetSdkVersion = 26
androidxVersion = "1.1.0-alpha01"
protobufVersion = '3.0.1'
broadcastchannel = '0.3.20190811.1450'
mlnCoreVersion = 'mmui_1.0.0_01272'
mlnsVersion = 'mmui_1.0.0_01272'
processorVersion = 'mmui_1.0.0'
annotationVersion = 'mm_1.0.0'
hotreloadVersion = 'mmui_1.0.0_01211'
mmuiVersion = 'mmui_1.0.0_01274'
yogaVersion = 'mmui_1.0.0_01211'
}
}2）添加核心依赖库：
//在 `app/build.gradle`文件中 添加核心依赖库：
dependencies {
implementation 'androidx.legacy:legacy-support-v4:1.0.0'
implementation 'com.google.android.material:material:1.2.0'
implementation "com.immomo.broadcastchannel:broadcastchannel:$broadcastchannel"
implementation "com.immomo.mlncore:core:$mlnCoreVersion"
implementation "com.immomo.mls:mln:$mlnsVersion"
implementation "com.immomo.mmui:mmui:$mmuiVersion"
debugImplementation "com.immomo.luanative:hotreload:$hotreloadVersion"
releaseImplementation "com.immomo.luanative:hotreload_empty:$hotreloadVersion"
annotationProcessor "com.immomo.mls:processor:$processorVersion"
implementation "com.google.protobuf:protobuf-lite:$protobufVersion"
//implementation 'com.github.bumptech.glide:glide:4.6.1' //图片加载等根据需求自行添加
}
3）application初始化 新建一个全局类继承Application，并在onCreate中初始化Argo Engine，如下：
//初始化
ArgoEngine.init(getApplicationContext());
//lua加载图片工具，根据需要自行添加
ArgoEngine.setImageProvider(new GlideImageProvider()); 注意：
-
ImageProvider需自行定义图片加载类。
可执行命令：
git clone https://github.com/momotech/MLN，参考项目中MLN-Android的GlideImageProvider类实现。 -
记得在AndroidManifest.xml中注册该Application。
4）AndroidManifest.xml配置文件中申请权限
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> 注意：运行app时，需要在手机端手动开启存储和相机权限。
5）将打包生成的lua文件放在assets文件夹下，将java文件放在自定义的model目录下
-
在Activity、Fragment或任意view中显示LuaView及Databingding使用
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//声明对象
argo = new Argo(this);
//是否打开debug按钮
argo.showDebugButton(true);
//ViewModel绑定，提供defaultUserData方法，将argo源文件中的preview数据作为初始数据,即手动装配
UserDataViewModel viewModel = UserDataViewModel.defaultUserData();
argo.bind(viewModel);
}
@Override
protected void onPause() {
super.onPause();
argo.onPause();
}
@Override
protected void onResume() {
super.onResume();
argo.onResume();
}
@Override
protected void onDestroy() {
super.onDestroy();
argo.onDestroy();
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (argo.onActivityResult(requestCode, resultCode, data))
return;
super.onActivityResult(requestCode, resultCode, data);
}注意：
- 三个生命周期记得调用argo相关方法。
- argo.bind会自动加载打包的入口文件，项目run起来即可展示对应lua界面。
效果图：
