关于多端开发Taro

最新推荐文章于 2024-04-17 10:58:31 发布

HcwDavid12

最新推荐文章于 2024-04-17 10:58:31 发布

阅读量161

点赞数

文章标签： react

本文链接：https://blog.csdn.net/hcwdavid12/article/details/119000215

版权

本文详细介绍了如何使用Taro进行项目初始化、安装依赖、运行开发环境以及项目结构和配置。强调了在Taro中使用Flex布局、BEM样式编写和style属性覆盖组件样式的统一多端样式管理策略。同时，提到了Taro的CLI命令、版本更新方法以及项目组织方式，并展示了部分关键代码示例，帮助理解Taro开发流程。

摘要由CSDN通过智能技术生成

一把项目先跑起来

git remote add origin <你的项目地址>
git clone git@gitee.com:shanghai_fire_code/newRetail-b.git
把代码拉下来之后
先安装taro  全局安装Taro: `npm install -g @tarojs/cli`
npm install -g @tarojs/cli
安装依赖: `npm install`
npm install
再进入微信开发环境
npm run dev:weapp
执行npm run dev:weapp之后文件根目录才会生成dist文件夹，这个文件夹就是导入微信开发者工具的文件夹，vscode中的左侧源代码管理会显示已更改package.json文件
此时再在微信开发者工具中导入dist文件夹
这里需要管理员给你对应的权限，公司大佬已经给我公司项目的权限了

项目详细说明

上面是公司项目的项目说明，已经打不开了好像。（0.0）

样式上 H5 最为灵活，小程序次之，RN 最弱，统一多端样式即是对齐短板，也就是要以 RN 的约束来管理样式，同时兼顾小程序的限制，核心可以用三点来概括：

使用 Flex 布局
基于 BEM 写样式
采用 style 属性覆盖组件样式

RN 中 View 标签默认主轴方向是 column

常用cli命令
查看 Taro 所有命令及帮助
$ taro --help
更新项目中 Taro 相关的依赖
$ taro update project
环境及依赖检测
$ taro info
Taro Doctor像一个医生一样，可以诊断项目的依赖、设置、结构，以及代码的规范是否存在问题
taro doctor
快速创建新页面
Taro create --name [页面名称] 能够在当前项目的pages目录下快速生成新的页面文件
CLI 配置  Taro 会在用户根目录下创建 .taro 文件夹，其中 .taro/index.json 用于存放 CLI 相关配置。

所有项目源代码请放在项目根目录 src 目录下，项目所需最基本的文件包括 入口文件 以及 页面文件

入口文件为 app.js
页面文件建议放置在 src/pages 目录下

一个可靠的 Taro 项目可以按照如下方式进行组织

├── config                 配置目录
|   ├── dev.js             开发时配置
|   ├── index.js           默认配置
|   └── prod.js            打包时配置
├── src                    源码目录
|   ├── components         公共组件目录
|   ├── pages              页面文件目录
|   |   ├── index          index 页面目录
|   |   |   ├── banner     页面 index 私有组件
|   |   |   ├── index.js   index 页面逻辑
|   |   |   └── index.css  index 页面样式
|   ├── utils              公共方法库
|   ├── app.css            项目总通用样式
|   └── app.js             项目入口文件
└── package.json

实际开发中：src下有以下文件

api                    下是一些api，以及心跳检测等
comm                   是一些纯函数，关于优惠券和会员
components             公共组件目录
const                  是一些常数比如银行名、城市地名和404
decorators             修饰，比如logo和reload以及下拉刷新单独拎出来方便跨平台是统一处理刷新逻辑
pages                  所有页面
res                    所有图片
store                  全局变量
utils                  校验以及格式的处理
app.js                 入口文件 里面只进入<Index />
app.lss                项目总通用样式
config.js              配置目录
ext.json               "extAppid": "wx0ed42dcee2b852e2"
index.html             html模板
takecloud-theme.less   一些样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Eq5Hfvek-1626938629513)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210630152544637.png)]

在 Taro 中，我们使用 JSX 作为一种 DSL 进而编译成各端通用的语法。 JSX 是一种看起来很像 XML 的 JavaScript 语法扩展

和 React/Nerv 不一样的地方在于，Taro 不支持使用 点表示法 和运行时指定类型来引用组件，例如 <MyComponents.DatePicker /> 这样的写法在 Taro 中是无法正确编译的。

地方在于，Taro 不支持使用点表示法和运行时指定类型来引用组件，例如 <MyComponents.DatePicker /> 这样的写法在 Taro 中是无法正确编译的。

##### 对taro版本更迭的修改

taro 已更新3.0 可用代码在这里
import React, { useState, useEffect } from react
import { getCurrentInstance } from @tarojs/taro
import Taro, {Current}  from '@tarojs/taro'

export default function Index(props) {
  const 【userName, setUserName】 = useState(Hello World!!!!)
  const 【blogTitle, setBlogTitle】 = useState()
  // getCurrentInstance().router 和 useRouter 返回的内容也一样
  // const router = useRouter()
  useEffect(() = {
    // console.log(getCurrentInstance().router)
    setBlogTitle(Current.router.params.blogTitle)
    setBlogTitle(getCurrentInstance().router.params.blogTitle)
  }, 【】)