怎么简化交互代码

[zrcoder]

原始交互描述

原始百度Amis中用json来描述交互，比如 form 组件中有个 api 字段：

{
  "type": "page",
  "body": {
    "type": "form",
    "api": "/xxx",
    "body": [
      {
        "type": "input-text",
        "name": "name",
        "label": "姓名："
      },
      {
        "name": "email",
        "type": "input-email",
        "label": "邮箱："
      }
    ]
  }
}

当点击提交按钮后，会把name和email组合成json数据，post请求/xxx 这个 api。api可以是本进程（和amis前端相同的进程）的，也可以是其他地方的其他进程的。

简化诉求

以上json对应的 amisgo 代码是：

comp.Page().Body(
	comp.Form().Api("xxx").Body(
		comp.InputText().Label("姓名").Name("name"),
		comp.InputEmail().Label("邮箱").Name("email"),
	),
)

假设我们直接用当前进程来处理。需要在当前进程 serve 一个 xxx 的api才行。

有没有办法简化这个过程？

[zrcoder]

一个简单直接的做法，amisgo 在 form 组件中定义一个 方法：

func (f form) Go(action func(map[string]any)) form

用户就可以这样写提交方法了：

comp.Page().Body(
	comp.Form().Body(
		comp.InputText().Label("姓名").Name("name"),
		comp.InputEmail().Label("邮箱").Name("email"),
	).Go(func(m map[string]any) {
		fmt.Println(m["name"])
		fmt.Println(m["email"])
		// save name and email to db
		// ...
	}),
)

[zrcoder]

这个方法有所帮助，但还是不太完全，比如如果提交后的动作是要对输入做一定转换后渲染到另一个组件（比如 Edirot组件里用户输入的代码，做一定转换生成一张图片渲染到页面的图片组件中），这个方法还搞不定。

[zrcoder]

@ddkwork amis确有其短板：较复杂的交互做不了（这块可能amisgo能改进～）；定制较多的UI做不了，比如完全符合你需求的树形表格。

[ddkwork]

[zrcoder]

我倒觉得不用反射，一是增加了复杂度，二是对用户的使用并没有增色什么；map[string]any 简单明白。

[ddkwork]

[zrcoder]

感谢提供这些思路。我得先研究清楚baidu amis是怎么玩的。

[zrcoder]

看了amis的文档，好像还并不支持类似修改一个组件作为输入，经过一定转换得到输出渲染到另一个组件的交互。在 amis 提了 issue：

baidu/amis#10826

[ddkwork]

[zrcoder]

amis、amisgo 都是web UI，最终在浏览器运行（动态或静态网站）。

你要的原生apk包，不是这个库要做的事情了。倒是可以考虑在静态网站的基础上，做pwa包装，这样不但浏览器，也可以下载到设备上当原生app用。

[zrcoder]

不，安卓上我使用webview，所以只要html或者其他js css文件即可，当前的话就是这个仓库的最后一步，渲染之前调用的那个html文件即可，将它传给webview就行了。

可以的，你看看 GenerateStaticWebSite那个函数。

[zrcoder]

有两个主要的API：

GenerateStaticWebSite 会落地成一个个html文件，也就是最终生成静态网站。

ListenAndServe 不会，仅仅是访问/xxx，返回模板渲染后的html，是动态的。

[ddkwork]

[zrcoder]

好的，编译apk的事情交给我完成即可

GenerateStaticWebSite 这个方法最终支持的交互会比较有限，和baidu amis等同。

ListenAndServe 会有更多的支持——至少可以本进程起 api 来做一些事情。

[ddkwork]

[zrcoder]

这样啊，看起来还有很多坑要挖，呵呵🙂

应该说还有一些对百度amis的优化要做。就当前这个版本，功能上已经和baidu amis等同了。

[ddkwork]

[zrcoder]

毕竟是基于百度 amis的，在其基础上做文章。你可以看看form组件那个Go函数的实现，底层还是amis的 Api 属性。

[zrcoder]

可以从这个示例开始：https://github.com/zrcoder/amisgo/blob/main/examples/submit/main.go

[ddkwork]

[zrcoder]

对了，经过我和老外的轮番对阵， https://github.com/ddkwork/json2go 现在已经0错误0警告，我琢磨着amis这个活跃项目升级勤奋，所以我将抽空实现一个自动化生成绑定sdk的模块，以便后续轻松升级版本。绑定代码将参照您目前的实现做调整。

赞。那这块我先放一放，等你的好消息。

[zrcoder]

落地模式成功了，但是表格内容加载失败。我将抽空研究下内存模式是否可行，以及文件拖放，表格右键上下文菜单，排序，这些。

你是说这个 “404 page not found” 问题吗？
你应该是用了 form 的 Api或Go 方法（或者page 的 InitApi 或 InitData）吧？最后又生成的静态页面。那么原因就是：这些方法都是在本进程起的api，生成静态页面后，这些api都没有导致的。这其实就要求有一个“后端”服务serve这些api才行。这就是静态页面的局限。

[zrcoder]

是的，顶部提示的404应该就是指向底部表格的空数据。我再次对内存模式进行测试，闪退了，很奇怪。落地交互按您刚刚说的意思的话，需要生成其他页面是吧？然后增加一个路由页面，最后目前的index.html调用路由页面，路由再控制其它页面。

根据您的描述，这个过程目前在api内隐式完成了，所以落地模式要完全工作的话需要生成以上所述的所有html

今天我细看了amid的多页应用，然后一下子简化了amisgo，以后无论如何，都是生成一个html文件，哪怕是多页应用。

[zrcoder]

此外，sdk cdn模式加载第一次很慢，您是否打算本地embed它呢?

apk模式步骤有点多，从环境配置到样板代码生成到插入此仓库的业务布局代码，整个过程我想需要一个模块来自动化执行这个过程。等它足够稳定的时候我将创建一个pr，目前Windows11上有点问题，以前是正常的，很诡异。

cdn 的问题这么严重吗？我这边还好。不过后续确实可以考虑内嵌amis的sdk。

[zrcoder]

我确认amisgo不涉及证书问题。

[ddkwork]

[zrcoder]

不是的，是通用的交互方法的提问。

[zrcoder]

一个组件的输入经过转换渲染到另一个组件的方法也搞清楚了。

我在wiki写了目前为止所做的优化： 怎么简化交互代码

[ddkwork]

[zrcoder]

没有吧，百度amis就是写网页的，没有弄过包装成native app的事情。

我是这样理解的：你的问题在于生成的静态前端代码需要的后端api不存在，那么你就要起一个 api 服务器，前端仅仅是配置 api、initapi而已（domain是可以配置的，不一定就是 locaohost）。——试图把前后端合二为一，基本不是amis做的事情。

amisgo 包装了几个方法， Go、InitApi、Transform action等，实际上是前后端在同一个进程而已，底层还是走的 amis 的 api、initapi、 ajax api