LineBot.pro
教程

LIFF应用开发指南：构建LINE前端框架应用

构建LIFF（LINE前端框架）应用的完整指南。创建在LINE内无缝运行的Web应用程序，具备用户认证、个人资料访问和消息发送功能。

LineBot.pro Team16 分钟阅读
LIFF应用开发指南：构建LINE前端框架应用

#什么是LIFF？

LIFF（LINE前端框架）是一个用于构建在LINE应用内运行的Web应用程序的平台。LIFF应用在使用标准Web技术的同时提供类似原生应用的体验。

#主要功能

  • 无缝认证：无需登录表单即可访问用户的LINE个人资料
  • 消息发送：直接从应用向聊天发送消息
  • 分享目标选择器：让用户向好友和群组分享内容
  • 二维码扫描器：内置条形码/二维码扫描功能
  • 原生体验：在LINE内的全屏体验

#使用场景

使用场景示例优势
电商产品目录、结账无需下载应用
预约餐厅预订、预约通过LINE快速访问
会员会员卡、积分系统自动认证
表单调查问卷、注册丰富的用户体验、预填数据
游戏小游戏、问答病毒式分享功能

了解更多关于LINE应用开发服务。

#项目设置

#步骤1：在LINE控制台创建LIFF应用

  1. 前往LINE开发者控制台
  2. 选择您的提供商和频道
  3. 导航到LIFF选项卡
  4. 点击"添加LIFF应用"
  5. 配置：
    • LIFF应用名称：您的应用名称
    • 大小：Full、Tall或Compact
    • 端点URL：您的应用URL（必须是HTTPS）
    • 权限范围：profile、openid、chat_message.write

#步骤2：设置React/Next.js项目

bash
npx create-next-app@latest my-liff-app --typescript
cd my-liff-app
npm install @line/liff

#步骤3：初始化LIFF SDK

创建LIFF工具文件：

typescript
// lib/liff.ts
import liff from '@line/liff';

const LIFF_ID = process.env.NEXT_PUBLIC_LIFF_ID!;

export async function initLiff() {
  try {
    await liff.init({ liffId: LIFF_ID });
    console.log('LIFF初始化成功');
    return true;
  } catch (error) {
    console.error('LIFF初始化失败:', error);
    return false;
  }
}

export function isLoggedIn() {
  return liff.isLoggedIn();
}

export function login() {
  liff.login();
}

export function logout() {
  liff.logout();
}

export async function getProfile() {
  if (!liff.isLoggedIn()) return null;
  return liff.getProfile();
}

export { liff };

#用户认证

#获取用户资料

tsx
// components/UserProfile.tsx
'use client';

import { useLiff } from './LiffProvider';
import Image from 'next/image';

export function UserProfile() {
  const { isReady, isLoggedIn, profile, login, logout } = useLiff();

  if (!isReady) {
    return <div>加载中...</div>;
  }

  if (!isLoggedIn) {
    return (
      <button onClick={login} className="btn-primary">
        使用LINE登录
      </button>
    );
  }

  return (
    <div className="flex items-center gap-4">
      {profile?.pictureUrl && (
        <Image
          src={profile.pictureUrl}
          alt={profile.displayName}
          width={48}
          height={48}
          className="rounded-full"
        />
      )}
      <div>
        <p className="font-semibold">{profile?.displayName}</p>
        <button onClick={logout} className="text-sm text-gray-500">
          退出登录
        </button>
      </div>
    </div>
  );
}

#消息集成

#发送消息

typescript
// 向当前聊天发送消息
async function sendMessage(text: string) {
  if (!liff.isInClient()) {
    alert('此功能仅在LINE内可用');
    return;
  }

  await liff.sendMessages([
    {
      type: 'text',
      text: text
    }
  ]);
}

#分享目标选择器

让用户向好友或群组分享内容：

typescript
async function shareToFriends() {
  if (!liff.isApiAvailable('shareTargetPicker')) {
    alert('分享功能不可用');
    return;
  }

  const result = await liff.shareTargetPicker([
    {
      type: 'flex',
      altText: '看看这个产品！',
      contents: {
        type: 'bubble',
        hero: {
          type: 'image',
          url: 'https://example.com/product.jpg',
          size: 'full',
          aspectRatio: '20:13'
        },
        body: {
          type: 'box',
          layout: 'vertical',
          contents: [
            { type: 'text', text: '超棒的产品', weight: 'bold' },
            { type: 'text', text: '¥999', color: '#06C755' }
          ]
        }
      }
    }
  ]);

  if (result) {
    console.log('分享成功');
  }
}

#最佳实践

#1. 处理外部浏览器

LIFF应用可以在外部浏览器中打开。优雅地处理这种情况：

typescript
function App() {
  const { isReady, isInClient, isLoggedIn, login } = useLiff();

  if (!isReady) return <LoadingScreen />;

  // 如果不在LINE内且未登录，显示登录按钮
  if (!isInClient && !isLoggedIn) {
    return (
      <div className="text-center p-8">
        <h1>欢迎！</h1>
        <p>使用LINE登录以继续</p>
        <button onClick={login} className="btn-primary">
          使用LINE登录
        </button>
      </div>
    );
  }

  return <MainApp />;
}

#2. LIFF尺寸的响应式设计

css
/* Compact: 约50%屏幕高度 */
/* Tall: 约75%屏幕高度 */
/* Full: 100%屏幕 */

.liff-container {
  min-height: 100vh;
  min-height: 100dvh; /* 动态视口高度 */
}

/* 刘海设备的安全区域 */
.liff-content {
  padding-bottom: env(safe-area-inset-bottom);
}

#3. 深度链接

创建可分享的URL，打开特定页面：

typescript
// LIFF URL格式：https://liff.line.me/{liffId}/{path}
const productUrl = `https://liff.line.me/${LIFF_ID}/product/${productId}`;

#部署

#部署到Vercel

bash
# 安装Vercel CLI
npm install -g vercel

# 部署
vercel --prod

#环境变量

在Vercel仪表板或.env.local中设置：

env
NEXT_PUBLIC_LIFF_ID=your-liff-id

#测试清单

  • 在LINE应用中测试（iOS和Android）
  • 在外部浏览器中测试
  • 测试登录/退出流程
  • 测试消息发送（如适用）
  • 测试分享目标选择器（如适用）
  • 在不同屏幕尺寸上测试

#结论

LIFF实现了Web应用与LINE之间的强大集成。关键要点：

  • 在应用生命周期早期初始化LIFF
  • 处理客户端内和外部浏览器两种场景
  • 使用分享目标选择器实现病毒式传播功能
  • 始终在后端验证访问令牌
  • 在实际设备上进行彻底测试

准备好构建您的LIFF应用了吗？

试用LineBot.pro，使用我们的模板和工具快速开发LIFF。通过预构建组件更快地构建LINE小程序。

相关资源：

相关服务

line app development
line development
line automation
LineBot.pro

准备好自动化您的LINE业务了吗？

立即使用LineBot.pro开始自动化您的LINE通信。

开始免费试用查看价格