跟着官网学 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 需要什么能力:

  1. 添加 Item 的能力
  2. 每一个 item 有一个标题
  3. 每一个 item 有一个删除的能力

完成上面几个述求,主要需要以下能力:

  1. 列表组件:
  2. 文本组件

大概样式这样子:

代码改造

那么,我们可以学习一下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>
  )
}
  1. 运行项目

在 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...

相关推荐
吃饺子不吃馅4 分钟前
了解微前端:为何 Web Component 是绕不开的关键技术?
前端·javascript·架构
恋猫de小郭9 分钟前
第一台 Andriod XR 设备发布,Jetpack Compose XR 有什么不同?对原生开发有何影响?
android·前端·flutter
muyouking1110 分钟前
Tailwind CSS 小白快速入门速查手册
前端·css·css3
社恐的下水道蟑螂17 分钟前
用 n8n 打造 AI 科技新闻速览工作流:自动化获取、总结,每天高效充电
前端
陈随易24 分钟前
PaddleOCR-VL可太强了,图片识别转文字的巅峰之作
前端·后端·程序员
盗德24 分钟前
紧急项目下,前端是“先乱炖”还是“慢火煲汤”?我选第三条路
前端·程序员
zmirror27 分钟前
Monorepo单仓多包&独立部署
前端
Linsk27 分钟前
为什么BigInt无法通过Babel降级?
前端·typescript·前端工程化
Asort28 分钟前
JavaScript设计模式(十八)——备忘录模式:状态保存与恢复的艺术
前端·javascript·设计模式