taro多端框架

2025-03-13
前端

安装软件包管理器pnpm

windows 下安装Chocolatey

1
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

通过Chocolatey安装pnpm

1
choco install pnpm

安装taro，初始化项目

Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 / 快手小程序 / H5 / RN 等应用。

1
pnpm.exe install -g @tarojs/cli
2
taro.cmd init myApp
3
#进入项目根目录
4
cd myApp
5

6
# 使用 pnpm 安装依赖
7
pnpm.exe install

微信小程序编译预览

1
pnpm.exe run dev:weapp

用微信开发者工具打开dist文件夹查看效果

安装组件库taro-ui

Taro UI 是一款基于 Taro 框架开发的多端 UI 组件库。

1
pnpm.exe install taro-ui

H5需要添加额外的配置

1
h5: {
2
  esnextModules: ['taro-ui']
3
}

在 app.scss 样式文件中 import 组件样式

1
@import "~taro-ui/dist/style/index.scss"; // 引入组件样式 - 方式二

示例，在 /myApp/src/pages/index/index.tsx 文件添加以下代码

1
import Taro, { Component, Config } from '@tarojs/taro'
2
import { View } from '@tarojs/components'
3
import { AtButton } from 'taro-ui'
4
import './index.scss'
5
export default class Index extends Component {
6
  config: Config = {
7
    navigationBarTitleText: '首页'
8
  }
9
  render () {
10
    return (
11
      <View className='index'>
12
         <AtButton type='primary'>按钮文案</AtButton>
13
      </View>
14
    )
15
  }
16
}

集成tailwindcss

tailwindcss是一个无需写CSS的CSS框架；

weapp-tailwindcss，将tailwindcss带给小程序。

1
pnpm.exe install -D tailwindcss@3 postcss autoprefixer
2
pnpm i -D weapp-tailwindcss

完整示例，github