4、前端框架入门：Taro/uni-app选型对比、项目创建、基础配置

好，咱们进入实战环节了。说实话，很多做抖音电商的朋友，一开始都会纠结一个问题：到底用 Taro 还是 uni-app？

我当年也纠结过。记得第一次接抖音小程序项目时，团队里吵了三天。最后我拍板选了其中一个，结果踩了不少坑。今天我把这些经验全盘托出，你听完就能少走弯路。

4.1 Taro vs uni-app：到底怎么选？

先看一张对比表，心里有个底：

对比维度	Taro	uni-app
开发语言	React（JSX）	Vue（模板语法）
多端支持	微信、抖音、支付宝、H5、RN	微信、抖音、支付宝、H5、App
抖音适配	官方插件支持，较成熟	内置支持，开箱即用
社区生态	京东团队维护，插件丰富	DCloud维护，插件市场大
学习成本	需懂React	需懂Vue
打包体积	相对较小	相对较大
热更新	支持	支持

我个人习惯用 Taro。为什么？因为抖音电商场景下，很多交互需要精细控制，Taro 的 React 生态让我能更灵活地处理状态管理。但如果你团队全是 Vue 选手，那 uni-app 也是好选择。

4.2 项目创建：从零开始搭一个抖音小程序

好，咱们直接动手。我以 Taro 为例，因为它在抖音生态上我踩坑最多，经验也最足。

4.2.1 环境准备

先确保你装了 Node.js（推荐 16+ 版本）。然后全局安装 Taro CLI：

npm install -g @tarojs/cli

嗯，这里要注意。我曾经遇到过版本冲突问题，建议用 npx 来创建项目，避免全局污染：

npx @tarojs/cli init my-douyin-shop

4.2.2 创建项目

运行上面命令后，会进入交互式问答。我一般这样选：

• 框架： React
• 模板： 默认模板
• CSS 预处理器： Sass（我习惯用）
• 包管理工具： npm 或 yarn

创建完成后，目录结构大概长这样：

my-douyin-shop/
├── src/
│   ├── pages/
│   │   └── index/
│   │       ├── index.jsx
│   │       ├── index.scss
│   │       └── index.config.js
│   ├── app.jsx
│   ├── app.scss
│   └── app.config.js
├── config/
│   ├── index.js
│   └── dev.js
├── package.json
└── project.config.json

看到这个结构，你可能会问：怎么没有抖音特有的配置？别急，往下看。

4.2.3 配置抖音小程序

关键一步来了。在 project.config.json 里，要指定抖音小程序的 AppID：

{
  "appid": "你的抖音小程序AppID",
  "projectname": "抖音电商小程序",
  "setting": {
    "urlCheck": false,
    "es6": true,
    "postcss": true,
    "minified": true
  },
  "condition": {
    "miniprogram": {
      "list": []
    }
  }
}

然后在 src/app.config.js 里配置页面路径：

export default {
  pages: [
    'pages/index/index',
    'pages/goods/list',
    'pages/goods/detail',
    'pages/cart/index',
    'pages/order/index'
  ],
  window: {
    navigationBarTitleText: '我的抖音小店',
    navigationBarBackgroundColor: '#ff6a00'
  }
}

4.3 基础配置：让项目跑起来

配置完项目结构，接下来是让代码真正跑在抖音小程序上。

4.3.1 安装抖音插件

Taro 官方提供了抖音适配插件：

npm install @tarojs/plugin-platform-douyin

然后在 config/index.js 里注册：

const config = {
  plugins: ['@tarojs/plugin-platform-douyin'],
  // ...其他配置
}

我曾经犯过一个低级错误：忘了注册插件，结果编译出来的包在抖音开发者工具里一片空白。排查了整整两个小时，最后发现是插件没装。嗯，这种坑你记住就行。

4.3.2 编译与预览

配置完成后，运行编译命令：

npm run dev:douyin

这会生成一个 dist 目录。打开抖音开发者工具，导入这个目录，就能看到你的小程序了。

为什么会生成 dist 而不是直接在源码里跑？说白了，Taro 做了代码转换，把 JSX 转成抖音小程序能识别的 WXML + JS。这个过程叫「编译」。你想想看，如果没有这层转换，我们得手写抖音的模板语法，那得多痛苦。

4.3.3 基础配置清单

我整理了一份「抖音电商小程序必配清单」，你照着做就行：

• 网络请求： 配置 request 域名白名单（抖音后台设置）
• 用户登录： 接入 tt.login 获取 code
• 支付能力： 配置抖音支付参数
• 分享功能： 设置 onShareAppMessage
• 客服消息： 接入抖音客服组件

4.4 第一个页面：Hello 抖音电商

咱们写个最简单的页面，验证整个链路通不通。

在 src/pages/index/index.jsx 里：

import { View, Text, Button } from '@tarojs/components'
import './index.scss'

export default function Index() {
  const handleClick = () => {
    tt.showToast({
      title: '欢迎来到抖音电商',
      icon: 'success'
    })
  }

  return (
    <View className='index'>
      <Text>Hello，抖音电商小程序！</Text>
      <Button onClick={handleClick}>点我试试</Button>
    </View>
  )
}

对应的样式文件 index.scss：

.index {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, #ff6a00, #ee0979);
  color: #fff;
  font-size: 32px;
}

保存后，抖音开发者工具会自动热更新。你会看到一个渐变背景的页面，点击按钮会弹出提示。

这个例子虽然简单，但验证了三件事：

1. Taro 能正常编译到抖音小程序
2. 抖音原生 API（tt.showToast）能正常调用
3. 样式和交互都没问题

4.5 本章小结

好，咱们捋一下这章的核心：

• 选型： Taro（React）或 uni-app（Vue），选团队熟悉的
• 创建： 用 CLI 脚手架，注意注册抖音插件
• 配置： AppID、页面路径、网络域名，一个都不能少
• 验证： 写个简单页面，跑通编译和预览流程

下一章，咱们会深入抖音电商的页面结构设计。到时候我会分享一个我自己在用的「高转化页面模板」，保证让你少走弯路。

对了，如果你在配置过程中遇到任何问题，欢迎随时交流。毕竟，踩坑这种事，一个人踩就够了。