前端开发框架“taro”从入门到爆哭--入门边缘试探篇

目录

项目目录结构

编译配置

配置文件说明

设计稿及尺寸单位说明 

Page页面代码

APP主体、入口、全局配置

全局配置

window

 tabBar

subPackages​

常用CLI命令

环境检测和依赖检测

快速创建page


注意:下文都以taro-react-tpyescript项目为例

项目目录结构

├── dist                                    编译结果目录
 |
├── config                                项目编译配置目录
 |   ├── index.ts                        默认配置
 |   ├── dev.ts                           开发环境配置/项目预览配置
 |   └── prod.ts                         生产环境配置/项目打包配置
 |
├── src                                   源码目录
 |   ├── pages                         页面文件目录
 |   |   └── index                       index 页面目录
 |   |       ├── index.tsx             index 页面逻辑
 |   |       ├── index.scss          index 页面样式
 |   |       └── index.config.ts    index 页面配置
 |   |
 |   ├── app.tsx                       项目入口文件
 |   ├── app.scss                    项目全局通用样式
 |   └── app.config.ts              项目入口配置、全局配置
 |
├── project.config.json          微信小程序项目配置 project.config.json
├── project.tt.json                  抖音小程序项目配置 project.tt.json
 |
├── babel.config.js                Babel 配置
├── tsconfig.json                   TypeScript 配置
├── .eslintrc                          ESLint 配置
 |
└── package.json

编译配置

 上述标黄部分为编译配置,用于配置taro项目的编译行为、打包的配置等。

配置文件说明

// config/index.js

const config = {
  // 项目名称
  projectName: 'my-taro-project',
  // 项目创建日期
  date: '2023-12-16',
  // 设计稿尺寸
  designWidth: 750,
  // 设计稿尺寸换算规则
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2
  },
  // 项目源码目录
  sourceRoot: 'src',
  // 项目产出目录
  outputRoot: 'dist',
  // Taro 插件配置
  plugins: [],
  // 全局变量设置
  defineConstants: {
    GLOBAL_CONSTANT = '全局可用'
  },
  // 文件 copy 配置
  copy: {
    patterns: [],
    options: {}
  },
  // 框架,react,nerv,vue, vue3 等
  framework: 'react',
  compiler: 'webpack5',
  cache: {
    enable: false // Webpack 持久化缓存配置,建议开启。默认配置请参考:https://docs.taro.zone/docs/config-detail#cache
  },
  // 小程序端专用配置
  mini: {
    postcss: {
      // 像素转换规则,参考:https://nervjs.github.io/taro-docs/docs/size
      pxtransform: {
        enable: true,
        config: {}
      },
      // 小程序端样式引用本地资源内联配置
      url: {
        enable: true,
        config: {
          limit: 1024,
        }
      },
      cssModules: {
        enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
        config: {
          namingPattern: 'module', // 转换模式,取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  },
  // H5 端专用配置
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    postcss: {
      autoprefixer: {
        enable: true,
        config: {}
      },
      cssModules: {
        enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
        config: {
          namingPattern: 'module', // 转换模式,取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
}

设计稿及尺寸单位说明 

在上节配置文件中有这样几行配置:

  // 设计稿尺寸
  designWidth: 750,
  // 设计稿尺寸换算规则
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2
  },

taro中,尺寸单位建议使用px和%(百分比)。按照上述配置就是设计稿750px,那么实际开发过程中,最好就是设计稿开发成750px的,然后view设置宽高的时候,就直接按照设计稿上的尺寸进行设置就可以了。

在转换成小程序的时候,px会对应转换成小程序的尺寸单位,如px->rpx等。如果希望不被转换,那么可以用Px/PX,自动转换只会针对px(大小写区分)进行转换。

而在deviceRatio中,则是根据你的designWidth来匹配的,如果 designWidth = 640,那么taro会按照2.34/2的比例进行转换。如果你的设计稿尺寸在里面没有,则可以新增,如常见的375,那么需要再deviceRatio里面新增:

  // 设计稿尺寸
  designWidth: 375,
  // 设计稿尺寸换算规则
  deviceRatio: {
    375: 2 / 1
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2
  },

Page页面代码

上述标蓝部分为实际展示的page页面的代码目录。

xx.tsx(页面逻辑) - xx.scss(页面样式) - xx.config.ts(页面配置),三个文件组成了一个page页面。

APP主体、入口、全局配置

上述标绿部分为APP的主体入口,以及全局样式和配置。

全局配置

// app.config.ts

export default defineAppConfig({
  // 页面路径列表
  // 每次新增页面,都需要在pages数组中添加新的路径!
  pages: ['pages/index/index'],
  // 默认窗口表现
  window: {
    // 
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black',
  },
  // 底部tab栏表现
  tabBar: {
  },
  // 分包结构配置
  subPackages: {
  }
})
window
引用自官网
属性类型默认值描述
navigationBarBackgroundColorHexColor(十六进制颜色值)#000000导航栏背景颜色,如 #000000
navigationBarTextStyleStringwhite导航栏标题颜色,仅支持 black / white
navigationBarTitleTextString导航栏标题文字内容
navigationStyleStringdefault导航栏样式,仅支持以下值:default 默认样式;custom 自定义导航栏,只保留右上角胶囊按钮
backgroundColorString窗口的背景色
backgroundTextStyleStringdark下拉 loading 的样式,仅支持 dark / light
backgroundColorTopString#ffffff顶部窗口的背景色,仅 iOS 支持
backgroundColorBottomString#ffffff底部窗口的背景色,仅 iOS 支持
enablePullDownRefreshbooleanfalse是否开启当前页面的下拉刷新。
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位为 px
pageOrientationStringportrait屏幕旋转设置,支持 auto / portrait / landscape 详见 响应显示区域变化

 各端支持程度如下

属性微信百度字节跳动支付宝H5RN
navigationBarBackgroundColor✔️✔️✔️✔️✔️✔️
navigationBarTextStyle✔️✔️✔️✔️✔️
navigationBarTitleText✔️✔️✔️✔️✔️✔️
navigationStyle✔️(微信客户端 6.6.0)✔️(百度 App 版本 11.1.0)✔️
backgroundColor✔️✔️✔️
backgroundTextStyle✔️✔️✔️
backgroundColorTop✔️(微信客户端 6.5.16)✔️
backgroundColorBottom✔️(微信客户端 6.5.16)✔️
enablePullDownRefresh✔️✔️✔️✔️
onReachBottomDistance✔️✔️✔️
pageOrientation✔️ 2.4.0 (auto) / 2.5.0 (landscape)
 tabBar

引用自官网:

如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

其配置项如下

属性类型必填默认值描述
colorHexColor(十六进制颜色值)tab 上的文字默认颜色,仅支持十六进制颜色
selectedColorHexColor(十六进制颜色值)tab 上的文字选中时的颜色,仅支持十六进制颜色
backgroundColorHexColor(十六进制颜色值)tab 的背景色,仅支持十六进制颜色
borderStyleStringblacktabbar 上边框的颜色, 仅支持 black / white
listArraytab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab
positionStringbottomtabBar 的位置,仅支持 bottom / top
customBooleanfalse自定义 tabBar

其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:

属性类型必填描述
pagePathString页面路径,必须在 pages 中先定义
textStringtab 上按钮文字
iconPathString图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
当 position 为 top 时,不显示 icon。
selectedIconPathString选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
当 position 为 top 时,不显示 icon。

各端支持程度如下

属性微信百度字节跳动支付宝H5RN
color✔️✔️✔️✔️✔️✔️
selectedColor✔️✔️✔️✔️✔️✔️
backgroundColor✔️✔️✔️✔️✔️✔️
borderStyle✔️✔️✔️✔️✔️
list✔️✔️✔️✔️✔️✔️
position✔️✔️
custom✔️(基础库 2.5.0 以上)
subPackages

引用自官网:

H5 和 RN 会把 subPackages 合入 pages

启用分包加载时,声明项目分包结构

在上文基础上,还有一部分个别小程序特有的属性,大家可以自行去官网查阅:全局配置 | Taro 文档

常用CLI命令

环境检测和依赖检测

# 会打印出项目的开发环境、依赖等,方便开发人员快速定位问题。
taro info 

# 开发环境检测、项目依赖、设置等检测、代码规范检测
# 与flutter doctor等工具效果类似
taro doctor

快速创建page

# 能够在pages目录下快速生成新页面,并填充基础代码
# 方便,得会!
taro create --name[页面名称]

会自动尝试同步修改app.config.ts文件中的pages字段

  • 26
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值