Taro 跨端开发小程序 #

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

# 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli

# 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

npm install -g mirror-config-china

taro init myApp

// config/index.js中
outputRoot: `dist/${process.env.TARO_ENV}`

# yarn
$ yarn dev:weapp
$ yarn build:weapp

# npm script
$ npm run dev:weapp
$ npm run build:weapp

# 仅限全局安装
$ taro build --type weapp --watch
$ taro build --type weapp

# npx 用户也可以使用
$ npx taro build --type weapp --watch
$ npx taro build --type weapp

# watch 同时开启压缩
$ set NODE_ENV=production && taro build --type weapp --watch # CMD
$ NODE_ENV=production taro build --type weapp --watch # Bash

# yarn
$ yarn dev:tt
$ yarn build:tt

# npm script
$ npm run dev:tt
$ npm run build:tt

# 仅限全局安装
$ taro build --type tt --watch
$ taro build --type tt

# npx 用户也可以使用
$ npx taro build --type tt --watch
$ npx taro build --type tt

# watch 同时开启压缩
$ set NODE_ENV=production && taro build --type tt --watch # CMD
$ NODE_ENV=production taro build --type tt --watch # Bash

const config = {
  // 项目名称
  projectName: 'projectName',
  // 项目创建日期
  date: '2023-2-14',
  // 设计稿尺寸
  designWidth: 640,
  // 设计稿尺寸换算规则
  deviceRatio: {
    375: 2 / 1,
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
  },
  ...
}

Taro.pxTransform(40) // 小程序：rpx，H5：rem
//在小程序上40会被转换成40rpx

例：
import { Button } from '@tarojs/components';
import Taro from '@tarojs/taro';

return (
  <Button style={{ fontSize: Taro.pxTransform(40) }}>
      Add
  </Button>
);

export default definePageConfig({
  navigationBarTitleText: '首页'
})

import { View } from '@tarojs/components'

definePageConfig({
  navigationBarTitleText: '我的'
})

const Mine = () => {
  return <View>Mine</View>
}
export default Mine

├── config
├── src
|   ├── pages
|   |   └── index
|   ├── moduleA
|   |   └── pages
|   |       └── homeA
|   ├── app.css
|   ├── app.json
|   └── app.js
└── package.json

subPackages: [
  {
    root: 'pages/moduleA',
    pages: ['pages/homeA/index'],
    independent: true
  }
]

├── src                         源码目录
|   ├── pages
|   |   └── index
|   |       ├── index.js
|   |       ├── index.css
|   |       └── index.config.js
|   |   └── moduleA             分包页面目录
|   |       ├── index.js
|   |       ├── index.css
|   |       └── index.config.js
|   |
|   ├── app.js                  项目入口文件
|   ├── app.css                 项目总通用样式
|   └── app.config.js           项目入口配置
|
├── project.config.json         微信小程序项目配置 project.config.json
├── project.tt.json             字节跳动小程序项目配置 project.tt.json
|
└── package.json

// 从 'react' 包中获取 React API
import React, { Component, useState, useEffect } from 'react'

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

yarn add @tarojs/plugin-html
//Or
npm i @tarojs/plugin-html

// config/index.js
config = {
  // ...
  plugins: ['@tarojs/plugin-html']
}

const Mine = () => {
  return <div>Mine</div>
}
export default Mine

import { useState } from 'react'
import { View, Text, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'

const Home = () => {
  const [count, setCount] = useState(1)

  const handleAdd = (e) => {
    e.stopPropagation() //阻止事件冒泡
    setCount(count + 1)
  }

  const handleSub = () => {
    setCount(count - 1)
  }

  const handleOuterClick = () => {
    console.log('outer')
  }

  return (
    <View onClick={handleOuterClick}>
      <Text>{count}----------</Text>
      <Button onClick={(e) => handleAdd(e)} style={{ fontSize: Taro.pxTransform(40) }}>
        Add
      </Button>
      <Button onClick={handleSub}>Sub</Button>
    </View>
  )
}

export default Home

# 以混合模式进行打包
$ taro build --type [platform] --blended

如编译微信小程序
taro build:weapp -- --watch --blended

npm install --dev @tarojs/plugin-indie
// Or
yarn add --dev @tarojs/plugin-indie

// config/index.js
const config = {
  // ...
  plugins: ['@tarojs/plugin-indie']
  // ...
}

const fs = require('fs-extra')
const path = require('path')

export default (ctx, options) => {
  ctx.onBuildFinish(() => {
    // Taro v3.1.4
    const blended = ctx.runOpts.blended || ctx.runOpts.options.blended

    if (!blended) return

    console.log('编译结束！')

    const rootPath = path.resolve(__dirname, '../..')
    const miniappPath = path.join(rootPath, 'fx-mini-mmmw')
    const outputPath = path.resolve(__dirname, '../dist/weapp')
    // 在原生小程序项目下的路由文件夹
    const destPath = path.join(miniappPath, 'taro')

    if (fs.existsSync(destPath)) {
      fs.removeSync(destPath)
    }
    fs.copySync(outputPath, destPath)

    console.log('拷贝结束！')
  })
}

// config/index.js
const path = require('path')
const config = {
  // ...
  plugins: [path.join(process.cwd(), '/plugin/index.js')]
  // ...
}

// 必须引用 Taro 项目的入口文件
const taroApp = require('./taro/app.js').taroApp

App({
  onShow() {
    // 可选，调用 Taro 项目 app 的 onShow 生命周期
    taroApp.onShow()
  },

  onHide() {
    // 可选，调用 Taro 项目 app 的 onHide 生命周期
    taroApp.onHide()
  }
})