跟着官网学 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...

相关推荐
teeeeeeemo1 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末20 分钟前
React——基础
前端·react.js·前端框架
福柯柯27 分钟前
Android ContentProvider的使用
android·contenprovider
不想迷路的小男孩27 分钟前
Android Studio 中Palette跟Component Tree面板消失怎么恢复正常
android·ide·android studio
餐桌上的王子29 分钟前
Android 构建可管理生命周期的应用(一)
android
aklry31 分钟前
uniapp三步完成一维码的生成
前端·vue.js
菠萝加点糖33 分钟前
Android Camera2 + OpenGL离屏渲染示例
android·opengl·camera
Rubin9338 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子39 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982439 分钟前
使用three.js实现3D地球
前端·three.js