小程序多端开发

以下是关于 Taro 和 Uni-App 小程序多端开发的基本知识点总结：

---

一、框架核心概念对比

维度	Taro	Uni-App
开发语言	React/Vue/Nerv	Vue语法（类小程序模板语法）
多端支持	微信/支付宝/百度/字节/QQ/京东等小程序+H5+React Native	小程序+H5+App（iOS/Android）
编译方式	静态编译 + Babel转换	条件编译 + 动态模板生成
生态体系	社区驱动 + 官方插件市场	DCloud官方支持 + 插件市场
性能优化	虚拟DOM优化 + 按需构建	原生渲染引擎 + 自定义组件优化

---

二、基础开发流程

1. Taro 项目创建

# 安装 CLI
npm install -g @tarojs/cli

# 创建项目
taro init myApp
cd myApp

# 启动微信小程序开发
npm run dev:weapp

2. Uni-App 项目创建

# 使用 HBuilderX 创建项目
文件 → 新建 → 项目 → Uni-App

# 或使用 CLI
vue create -p dcloudio/uni-preset-vue my-project

3. 通用组件开发示例

<!-- Taro (React语法) -->
import { View, Text } from '@tarojs/components'
function Hello() {
  return <View><Text>Hello Taro</Text></View>
}

<!-- Uni-App (Vue语法) -->
<template>
  <view>
    <text>Hello Uni-App</text>
  </view>
</template>

---

三、多端适配方案

1. 条件编译机制

// Taro 条件编译
if (process.env.TARO_ENV