Taro小程序开发技能

Taro + React + TypeScript 微信小程序开发框架技能。适用于：(1) 从零初始化 Taro 项目并编译为微信小程序；(2) 创建页面、组件、样式；(3) 搭建 services 请求层（接入真实后端或 Mock 数据）；(4) 配置 TabBar、页面路由、设计系统。触发关键词：小程序开发、...

Security Scan

The skill's files, instructions, and required actions are consistent with a Taro + React + TypeScript WeChat mini-program starter/template and do not request unrelated credentials or privileged system access.

Purpose & Capability

The name/description (Taro + React + TypeScript 小程序 开发) matches the included project template, page/component examples, services stubs, build/init scripts, and documentation. There are no environment variables, binaries, or config paths requested that are unrelated to initializing/building a Taro project.

Instruction Scope

SKILL.md provides concrete developer instructions (npx @tarojs/cli init, npm install, npm run dev/build) and references only project files and local mock/BASE_URL placeholders. It does not instruct reading unrelated system files, exfiltrating secrets, or posting data to unexpected external endpoints. The only external URLs are placeholder API/base URLs and image placeholders used in UI assets.

Install Mechanism

There is no install spec (instruction-only), so nothing is auto-downloaded during install. The skill contains a project template and shell scripts (init_project.sh, build_project.sh) that copy and modify files. Those scripts use standard cp/sed operations on local files; they do not fetch code from untrusted URLs or create nonstandard system binaries.

Credentials

The skill declares no required environment variables, no credentials, and no config paths. The code contains expected development placeholders (IS_MOCK, BASE_URL) and a test AppID ('touristappid') appropriate for development. No unrelated tokens/keys are requested.

Persistence & Privilege

always:false and model invocation are normal. The included init script will create a project directory (copies template to ../<project>) and uses sed to replace placeholders — this writes files to disk outside the skill folder when the script is run. This is expected for a project initializer but the user should be aware it will modify the filesystem in the working area where it's executed.

Assessment

This package appears to be a coherent Taro mini-program starter. Before running anything: 1) Review the template files and scripts (init_project.sh, build_project.sh) so you know what will be copied/modified and where (init script copies to ../<projectName>). 2) Run scripts from a controlled working directory to avoid accidentally creating files in an unexpected location. 3) Inspect and update placeholders: set IS_MOCK appropriately, change BASE_URL to your backend, and do not use 'touristappid' in production. 4) npm install will fetch third-party packages — check package.json versions for known vulnerabilities and run in a network/trusted environment. 5) The README suggests enabling '不校验合法域名' in the WeChat dev tools for development; only do this for local testing, not for production builds. If you want extra assurance, run the init steps manually rather than executing the provided shell scripts.

基于 Taro 3 + React + TypeScript 的微信小程序开发框架。

项目初始化

# 创建项目目录
mkdir my-project && cd my-project

# 初始化 Taro 项目
npx @tarojs/cli init . --framework react --typescript

# 安装依赖
npm install

# 开发模式
NODE_OPTIONS=--openssl-legacy-provider npm run dev:weapp

# 生产构建
NODE_OPTIONS=--openssl-legacy-provider npm run build:weapp

⚠️ Node.js ≥ 18 时，webpack 需要 --openssl-legacy-provider。

目录结构

src/
├── app.config.js       # 全局配置（页面注册、TabBar、窗口样式）
├── app.tsx             # 应用入口
├── styles/
│   └── global.scss     # 全局样式 + 设计系统变量
├── pages/              # 页面
│   └── {module}/
│       └── {page}/index.tsx + index.scss
├── services/           # 接口层（接入时创建）
│   ├── api/           # API 接口定义（按模块拆分）
│   ├── utils/
│   │   └── request.ts # 请求封装
│   └── mock.ts        # Mock 数据
└── assets/            # 静态资源

页面开发

详见 references/pages.md

// pages/demo/index.tsx
import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import './index.scss'

export default class DemoPage extends Component {
  state = { data: null as any, loading: false }

  componentDidMount() {
    // TODO: 加载数据
  }

  render() {
    const { data } = this.state
    return (
      <View className="page">
        <Text>页面内容</Text>
      </View>
    )
  }
}

接口层接入

详见 references/api-design.md

// services/utils/request.ts
const IS_MOCK = true           // 切换 Mock/真实接口
const BASE_URL = 'https://api.example.com'

// services/api/index.ts
import { get, post } from '../utils/request'

export function getUserInfo() {
  return get<UserInfo>('/api/auth/user-info')
}

export function login(params: LoginParams) {
  return post<LoginResult>('/api/auth/login', params)
}

设计系统

详见 references/design-system.md

全局样式变量：$bg, $pink, $pink-deep, $ink, $muted, $line

组件类名：.card, .btn-primary, .btn-ghost, .pill, .bottom-nav

编译说明

微信开发者工具导入 dist/ 目录，AppID 先用测试号 touristappid，开发阶段开启"不校验合法域名"。

常用命令

命令	说明
npm run dev:weapp	微信小程序开发模式
npm run build:weapp	微信小程序生产构建
npm run dev:h5	H5 开发模式