跟着官网学 Lynx 之搭建 Lynx todo-list app

接下来，我们将会跟着官网学习，编写一个简易的 todo-list APP页面，并且使用上一篇文章的构建的Android APP，将 todo-list 跑起来。

第一步：创建 Lynx 工程

注意系统要求：

Lynx 工程目前要求 Node.js 18 或更新的版本

当使用 TypeScript 作为配置文件时，需要使用 Node.js 18.19 或更新的版本

Lynx 有一个名为 Rspeedy 的构建工具，所以我们将会跟随官网创建 Lynx 工程。

首先执行：npm create rspeedy@latest

键入项目名称：todo-list

接下来选择语言：可见Lynx推荐使用ts，那我们也选择ts

接下来是选择一些代码检查、格式化等工具，我们全选即可。

至此，完成了 todo-list 工程的创建，我们就可以开始进行 Lynx 编码了

我们先按照步骤，将工程跑起来。

第二步：下载 Lynx-Explore 工具查看产物情况

在同一网络环境下，输入上面产出的本地地址到 Explore 工具中，点击 Go 即可看到 Lynx 页面的情况：

第三步：修改 Lynx 工程代码，完成 todo-list 的编写

需求分析

首先我们分析 todo-list 需要什么能力：

添加 Item 的能力
每一个 item 有一个标题
每一个 item 有一个删除的能力

完成上面几个述求，主要需要以下能力：

列表组件：
文本组件

大概样式这样子：

代码改造

那么，我们可以学习一下Lynx的list组件的Demo，来完成这些能力的构建：

github.com/lynx-family...

我们只需要把上述的 Lynx 工程的App.tsx进行改造即可，代码如下：

less 复制代码

export function App() {
  const [todos, setTodos] = useState<string[]>(['0', '1'])
  const [itemCount, setItemCount] = useState<number>(2)

  useEffect(() => {
    console.info('Hello, ReactLynx')
  }, [])

  const addTodo = useCallback(() => {
    setItemCount(itemCount + 1)
    setTodos([...todos, itemCount.toString()])
  }, [todos])

  const deleteTodoCurrentItem = useCallback((index: number) => {
    const newTodos = todos.filter((_, i) => i !== index)
    setTodos(newTodos)
  }, [todos])

  return (
    <view style={{
      backgroundColor: "white",
      padding: "20px",
      width: "100%",
      height: "100vh",
      border: "2px solid black",
      borderRadius: "10px"
    }}>
      <view style={{
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        marginBottom: "20px"
      }}>
        <view
          style={{
            backgroundColor: "#f0f5ff",
            border: "2px solid black",
            borderRadius: "10px",
            padding: "15px",
            width: "100%",
            alignItems: "center",
            justifyContent: "center"
          }}
          bindtap={addTodo}
        >
          <text style={{ textAlign: "center", fontSize: "18px", color: "black" }}>Add</text>
        </view>
      </view>

      <view style={{
        backgroundColor: "#f0f5ff",
        border: "2px solid black",
        borderRadius: "10px",
        padding: "15px",
        marginBottom: "10px",
        alignItems: "center",
        justifyContent: "center"
      }}>
        <text style={{ textAlign: "center", fontSize: "18px", color: "black" }}>todo-list</text>
      </view>
      <list
        scroll-orientation="vertical"
        list-type="single"
        span-count={1}
        style={{
          width: "100%",
          height: "100vh",
          listMainAxisGap: "0px",
        }}
      >
        {todos.map((item, index) => {
          return (
            <list-item
              item-key={`list-item-${index}`}
              key={`list-item-${index}`}
              style={{
                marginBottom: "10px",
              }}
            >
              <view style={{
                display: "flex",
                flexDirection: "row",
                width: "100%",
              }}>
                <view style={{ 
                  width: "50%", 
                  backgroundColor: "#f0f5ff",
                  border: "2px solid black",
                  borderRadius: "10px",
                  padding: "15px",
                  alignItems: "center", 
                  justifyContent: "center" 
                }}>
                  <text style={{ textAlign: "center", fontSize: "18px", color: "black" }}>item {item}</text>
                </view>
                <view style={{ 
                  width: "50%", 
                  backgroundColor: "#f0f5ff",
                  border: "2px solid black",
                  borderRadius: "10px",
                  padding: "15px",
                  alignItems: "center", 
                  justifyContent: "center" 
                }}>
                  <text
                    style={{ textAlign: "center", fontSize: "18px", color: "black" }}
                    bindtap={() => deleteTodoCurrentItem(index)}
                  >deleteItem</text>
                </view>
              </view>
            </list-item>
          );
        })}
      </list>
    </view>
  )
}

运行项目

在 terminal中执行：pnpm run dev，Lynx 有热更新能力，如果你之前的项目没有关闭，则只需要保存一下文件，就会自动编译更新。

运行效果如下：

第四步：将 todo-list 转移到我们的 Android Demo 中

可以发现在 dist 目录中，经过项目的编译，生成了一个 mian.lynx.bundle 的文件，我们只需要将该文件转移到我们的Android demo中，替换掉 assets 目录中的 mian.lynx.bundle 即可。

运行效果如下：

下一步

经过上面的步骤，我们已经将 Lynx 的简易 todo-list 搭建完成，但是目前数据还没有做更多的固化，每一次打开数据之前的 item 数据都会消失，所以我们接下来就要学习如果在 Lynx 环境中，借助客户端原生能力，来完成数据的固化存储，在这个过程中，我们将会学习到类似 Webview 的 JavascriptInterface 的能力，打破 Lynx 的前端局限。

项目代码

Android Demo：github.com/shuhaoLIN/l...

Lynx todo-list：github.com/shuhaoLIN/l...

跟着官网学 Lynx 之 搭建 Lynx todo-list app