三、安装 Taro 4.1 npm install -g @tarojs/cli 安装成功后,检查 taro 是否生效: taro --version 预期输出: Taro v4.1.1 4.1.1 四、安装鸿蒙插件 cd taro-ohos 然后使用 npm 安装: npm i @tarojs/plugin-platform-harmony-cpp 或者使用 pnpm 安装: pnpm i @ tarojs/plugin-platform-harmony-cpp 五、修改编译配置 找到 config/index.ts 文件,在 plugin 处添加 @tarojs/plugin-platform-harmony-cpp /cli CLI 工具 @tarojs/service 插件化内核 @tarojs/taro-loader Webpack loaders @tarojs/helper 工具库,主要供 CLI、编译时使用 @tarojs/runner-utils 工具库,主要供小程序、H5 的编译工具使用 @tarojs/shared 工具库,主要供运行时使用 @tarojs/taro 暴露各端所需要的 Taro 对象
更新到 Taro Next 首先需要更新项目依赖:# 更新 CLI$ npm i -g @tarojs/cli@next# 在项目目录更新项目依赖$ npm i @tarojs/runtime@next @tarojs/mini-runner@next @tarojs/components@next @tarojs/taro@next$ npm i react @tarojs/react@next # 各种头疼"techarts": "^3.0.3" 对于demo的版本是"@tarojs/cli": "3.0.7","@tarojs/components": "3.0.7","@tarojs/react ": "3.0.7","@tarojs/runtime": "3.0.7","@tarojs/taro": "3.0.7",现在最新的版本是"@babel/runtime": "^7.7.7","@tarojs /components": "3.3.9","@tarojs/react": "3.3.9","@tarojs/runtime": "3.3.9","@tarojs/taro": "3.3.9",最的新版本
cli 工具安装 首先,你需要使用 npm 或者 yarn 全局安装@tarojs/cli,或者直接使用npx: # 使用 npm 安装 CLI $ npm install -g @tarojs @tarojs/plugin-csso: ^1.2.0-beta.3 => 1.2.0-beta.3 @tarojs/plugin-sass: ^1.2.0-beta.4 => -beta.4 => 1.2.0-beta.4 @tarojs/router: ^1.2.0-beta.3 => 1.2.0-beta.3 @tarojs/taro: ^1.2.0 -beta.3 => 1.2.0-beta.3 @tarojs/taro-alipay: ^1.2.0-beta.3 => 1.2.0-beta.3 @tarojs/taro-h5 : ^1.2.0-beta.3 => 1.2.0-beta.3 @tarojs/taro-swan: ^1.2.0-beta.3 => 1.2.0-beta.3 @tarojs/
/index.less'; import { View } from '@tarojs/components'; import Taro, { Component, Config } from '@tarojs /async-await: 1.2.7 => 1.2.7 @tarojs/components: 1.2.7 => 1.2.7 @tarojs/mobx: 1.2.7 => 1.2.7 @tarojs/mobx-h5: 1.2.7 => 1.2.7 @tarojs/mobx-rn: 1.2.7 => 1.2.7 @tarojs/plugin-babel @tarojs/plugin-sass: 1.2.7 => 1.2.7 @tarojs/plugin-uglifyjs: 1.2.7 => 1.2.7 @tarojs @tarojs/taro-alipay: 1.2.7 => 1.2.7 @tarojs/taro-h5: 1.2.7 => 1.2.7 @tarojs/taro-swan
**cli 工具安装** 首先,你需要使用 npm 或者 yarn 全局安装@tarojs/cli,或者直接使用npx: # 使用 npm 安装 CLI $ npm install -g @tarojs @tarojs/plugin-csso: ^1.2.0-beta.3 => 1.2.0-beta.3 @tarojs/plugin-sass: ^1.2.0-beta.4 => 1.2.0-beta.4 @tarojs/plugin-uglifyjs: ^1.2.0-beta.3 => 1.2.0-beta.3 @tarojs/rn-runner : ^1.2.0-beta.4 => 1.2.0-beta.4 @tarojs/router: ^1.2.0-beta.3 => 1.2.0-beta.3 @tarojs/taro @tarojs/taro-weapp: ^1.2.0-beta.3 => 1.2.0-beta.3 @tarojs/webpack-runner: ^1.2.0-beta.3 => 1.2.0
安装 要使用Taro,需要安装Taro 开发工具 @tarojs/cli。我们可以使用NPM 与或者Yarn的来安装@tarojs/cli。 NPM :npm install -g @tarojs/cli Yarn:yarn global add @tarojs/cli 安装完成后,测试一下是否安装成功:taro -V ? taro -V 使用 安装完taro开发工具之后,我们可以使用tarojs/cli来进行开发。 更新 taro-cli 工具: taro:taro update self npm:npm i -g @tarojs/cli@latest 更新项目中Taro相关的依赖:taro update project
login.jsx import Taro from '@tarojs/taro'; import { View, Input, Button } from '@tarojs/components'; products.jsx import Taro from '@tarojs/taro'; import { View, Image, Text, Button } from '@tarojs/components cart.jsx import Taro from '@tarojs/taro'; import { View, Text, Button } from '@tarojs/components'; import checkout.jsx import Taro from '@tarojs/taro'; import { View, Button } from '@tarojs/components'; import /taro'; import { View, Text } from '@tarojs/components'; import '.
安装依赖: yarn add preact @tarojs/plugin-framework-react 复制代码 修改 Taro 编译配置: const config = { // ... 提供了 Composition API 版本的小程序生命周期钩子,让开发者更方便地使用 setup 语法,例子: <script setup> import { useDidShow } from '@tarojs taro' useDidShow(() => console.log('onShow')) </script> 复制代码 运行时体积优化 目前 Taro 对于前端框架的适配层代码都放在了运行时库 @tarojs 安装 v3.4.0-beta 的 CLI 工具: npm i -g @tarojs/cli@beta 复制代码 2. /plugin-framework-react 使用 Vue2,请安装 @tarojs/plugin-framework-vue2 使用 Vue3,请安装 @tarojs/plugin-framework-vue3
作为运行时的基础,每一个 Taro 的 H5 端应用都需要引入 @tarojs/components 和 @tarojs/taro-h5 等基础依赖包。 事实上,@tarojs/components 的源码本身是使用 ESM 规范的: ? 对 @tarojs/taro-h5 进行模块化改造的思路与 @tarojs/components 相同。 希望 @tarojs/taro-h5 模块本身遵守 ESM 模块规范,那就只需要标记一下 sideEffects,再修改一下模块入口就好。 ? 粗略一看,@tarojs/taro-h5 还挺 “ESM” 的,但这还不够。
首先需要全局安装 @tarojs/cli: # 使用 npm 安装 CLI $ npm install -g @tarojs/cli # OR 使用 yarn 安装 CLI $ yarn global add @tarojs/cli # OR 安装了 cnpm,使用 cnpm 安装 CLI $ cnpm install -g @tarojs/cli 如果你的本地已经安装了 @tarojs/cli,并且版本是 但是如过你的版本是 2.x,你需要先将它卸载了,再进行上述安装,卸载如下: $ npm uninstall -g @tarojs/cli # 或者 $ yarn global remove @tarojs
安装 Taro 4.xyarn global add @tarojs/cli安装成功后检查 taro 是否生效➜ ~ taro --version Taro v4.0.74.0.7初始化项目taro 安装鸿蒙插件yarn add @tarojs/plugin-platform-harmony-etsyarn add path修改编译配置找到 config/index.ts 文件, 在 plugin 处添加 @tarojs/plugin-platform-harmony-ets, 在 rn 下方添加 harmony 配置:import path from 'path'... ... plugins: [ '@tarojs/plugin-platform-harmony-ets' ], ... 注意事项运动 Taro 时报错 throw new Error(不存在编译平台 ${platform}),config/index.ts文件中没有添加 @tarojs/plugin-platform-harmony-ets
{ View, Button, Textarea } from "@tarojs/components"; import ". /taro"; import { View, Text, Image } from "@tarojs/components"; import ". /taro"; import { View, Text } from "@tarojs/components"; import ". /taro"; import { View, Text } from "@tarojs/components"; import ". /taro"; import { View, Text, Image } from "@tarojs/components"; import ".
12.0.0 # 本地使用的node版本 node => 14.17.1 node版本推荐使用nvm进行管理 安装CLI # 使用 npm 安装 CLI $ npm install -g @tarojs /cli # OR 使用 yarn 安装 CLI $ yarn global add @tarojs/cli # OR 安装了 cnpm,使用 cnpm 安装 CLI $ cnpm install -g @tarojs/cli 项目初始化 两种方式初始化项目 $ taro init myApp npm5.2+可以直接使用npx初始化项目(不用全局安装CLI) # npm5.2+ $ npx @tarojs/cli init my_app 安装依赖 # 进入项目根目录 $ cd myApp # 使用 yarn 安装依赖 $ yarn # OR 使用 cnpm 安装依赖 $ cnpm install
可以看到,我们上面的文件中主要有五处改动: 首先我们从 @tarojs/taro 里面导出 useState Hooks。 '@tarojs/redux' import Logout from '.. 现在就打开这个文件,对其中的内容作出如下的修改: import Taro, { useEffect } from '@tarojs/taro' import { View } from '@tarojs ' import { useDispatch, useSelector } from '@tarojs/redux' import '. { View } from '@tarojs/components' import { useSelector } from '@tarojs/redux' import { PostCard }
安装依赖 首先我们先来安装使用 Redux 必要的依赖: $ yarn add redux @tarojs/redux @tarojs/redux-h5 redux-logger # 或者使用 npm $ npm install --save redux @tarojs/redux @tarojs/redux-h5 redux-logger 除了我们熟悉的 redux 依赖,以及用来打印 Action 的中间件 redux-logger 外,还有两个额外的包,这是因为在 Taro 中,Redux 原绑定库 react-redux 被替换成了 @tarojs/redux 和 @tarojs/redux-h5 /taro' import { Button } from '@tarojs/components' import { useDispatch } from '@tarojs/redux' import /taro' import { Button } from '@tarojs/components' import { useDispatch } from '@tarojs/redux' import
就是一个用于装饰类和类的方法,我们完全可以写一个share的装饰器去装饰不同的页面(类), 后面只需要维护share的装饰器即可 直接上代码: withShare.js import Taro from '@tarojs return WithShare; }; } export default withShare; 使用方法: import Taro, { Component } from '@tarojs /taro'; import { View } from '@tarojs/components'; import withShare from '.
代码示例 import Taro, { Component } from "@tarojs/taro"; import { View, Button } from "@tarojs/components "; import { connect } from "@tarojs/redux"; import ". Github Repo: https://github.com/canisminor1990/canisminor-wxapp 使用 npm 或者 yarn 全局安装 $ npm install -g @tarojs /cli # or $ yarn global add @tarojs/cli 使用 npm 或者 yarn 安装依赖 $ npm install # or $ yarn 启动 / 编译小程序 #
"@tarojs/taro": "3.2.1", "@tarojs/components": "3.2.1", "taro-ui": "^3.0.0-alpha.4" 海报组件的代码如下: // 生成海报 import React, { useState, useEffect } from 'react'; import Taro from '@tarojs/taro'; import { View, Image, Canvas } from '@tarojs/components' import '. "@tarojs/cli": "2.2.1", "@tarojs/components": "2.2.1", "@tarojs/mobx": "2.2.1", 页面的大体逻辑是实现了 taro/mobx
新建项目CLI 工具安装# 使用 npm 安装 CLI$ npm install -g @tarojs/cli# OR 使用 yarn 安装 CLI$ yarn global add @tarojs/cli npx 创建模板项目$ npx @tarojs/cli init myApp安装依赖# 进入项目根目录$ cd myApp# 使用 yarn 安装依赖$ yarn# OR 使用 cnpm 安装依赖$ import React, { Component } from 'react'import { View, Text } from '@tarojs/components'export default 配置插件1.首先下载安装插件 @tarojs/plugin-htmlyarn add @tarojs/plugin-html2.然后在项目配置中添加使用插件// config/index.jsconfig plugins: ['@tarojs/plugin-html']}注:如果遇到不支持的标签可以使用Taro提供的组件,详见Taro组件库。