介绍

采用taro小程序框架，react底层框架语法

快速开始

安装

• pnpm -v 如果不存在 npm i -g pnpm
• npm i -g @tarojs/[email protected] 全局安装taro
• pnpm i 安装全部依赖

版本说明

• 本插件版本 v1.4.0 for taro 3.3.19
• 本插件版本 v1.5.0 for taro 3.6.2

命令

• 启动 pnpm dev
• 打包 pnpm build
• 预发布 pnpm release

技术栈

• 学习资料
• 注意事项
• taro开发遇到的坑

图片

• 服务器图片目录

  public/static/miniprogram/

  服务器图片调用相对 public/static/miniprogram/

尺寸单位

• 使用大写'PX'或者对应1的rem

计算精度（财务方面）

• 需求使用插件计算

  import calc from 'calculatorjs'

• 正常计算和插件计算对比

  > 2.1 + 2.2
  4.300000000000001
  > calc(' 2.1 + 2.2 ')
  4.3

• 其它示例

    calc(' 1 + (2 * 3 - 1) / 4 * -1 ')
    calc.add(0.1, 0.2) // 0.3
    calc.sub(0.1, 0.2) // -0.1
    calc.mul(0.1, 0.2) // 0.02
    calc.div(0.1, 0.2) // 0.5
    calc.round(0.555, 2) // 0.56

eslint配置

module.exports = {
    extends: ['taro/react', './node_modules/ysyc_miniprogram/eslintrc'],
}

config配置

./config/index改为

const getConfig = require('ysyc_miniprogram/config/getConfig')

module.exports = function(merge) {
  const config = getConfig(merge)
  // console.log('config :>> ', config)
  return merge({}, config,)
}

环境变量

• 运行命令根目录会自动生成.env.development, 开发者需要使用自己的配置
• development 开发
• production 生产，线上
• release 预发布

常见问题

• eslint Cannot read property 'range' of null
  • 安装最新版本的@babel/eslint-parser
  • 配置eslintrc.js

    parser: "@babel/eslint-parser",

• 缺少 tml_0_button
  • pages/index/test中将import { Button } from '@tarojs/components'导入，更新下缓存
• 报3221225477 package.json加

  "resolutions": {
    "@swc/core": "1.3.42"
  }

• 删除包报错
  • 清空./node_modules/.cache/webpack缓存
• tabbar相关
  • custom-tab-bar里只能用cover系列标签cover-view, 不然在页面上如果有canvas，z-index不对
  • cover-view 不支持iconfont
  • custom-tab-bar的图标只能用本地图片，base64不行
  • 图标请放在assets/tabbar目录下，打包时会自动复制到dist/assets/tabbar