Taro 官方示例集深度指南混合开发、自定义 TabBar 与分包实践【免费下载链接】taro开放式跨端跨框架解决方案支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/项目地址: https://gitcode.com/NervJS/taro本指南以 examples/README.md 为核心骨架系统梳理 Taro 官方收录的全部示例工程从「Taro 与原生小程序混合开发」「编译为原生自定义组件」到「自定义 TabBar」「独立分包与依赖分包」「PreBundle 预构建」等进阶特性。读完本文你将掌握每个示例的适用场景、开发/生产环境的编译流程、关键配置文件的作用并能对照仓库源码理解其底层实现直接把这些方案迁移到自己的项目中。一、示例集总览十个官方实战样例examples目录是 Taro 官方维护的「示例合集」覆盖了跨端开发中最典型、最容易被开发者绕路的几类问题与存量原生小程序共存、组件复用、TabBar 定制、分包性能优化等。下表汇总了 examples/README.md 中列出的全部示例及其核心主题示例目录主题核心能力blended-apart把 Taro 项目作为原生项目中的一个分包单独使用独立分包 产物自动搬运blended-basic在原生小程序项目中使用 Taro 生成的页面主包/分包混用、双向调用blended-taro-component把 Taro 项目编译为原生自定义组件组件化复用、props、virtualHostblended-taro-component-vue3把 Taro-Vue3 项目编译为原生自定义组件同上Vue3 技术栈版本build-weapp-plugin开发微信小程序插件文档条目对应目录当前未收录于 examplescustom-tabbar-react微信小程序自定义 TabBarReactTaro.getTabBar状态管理custom-tabbar-vue3微信小程序自定义 TabBarVue3Vuex 状态管理external-prebundle第三方使用 PreBundle 特性依赖预构建、构建加速mini-split-chunks-plugin智能提取分包依赖分包公共依赖自动去重weapp-independent-subpackages微信小程序独立分包功能演示独立分包配置实战这些示例并非孤立的小 demo它们与仓库内packages、tests中的实现代码相互印证是理解 Taro 编译链路的最佳「活教材」。下面按场景分组逐一深入。二、混合开发系列让 Taro 与原生小程序共存混合开发Blended是 Taro 面向「存量原生小程序项目渐进式迁移」给出的官方方案共包含 4 个示例分别对应三种不同的共存粒度。2.1 blended-apartTaro 项目作为原生项目的一个分包场景原生小程序项目已经存在希望把新增的 Taro 业务作为一个完整分包嵌入进去互不干扰。目录结构上分为taro-projectTaro 工程与miniapp原生小程序工程两部分见 examples/blended-apart。开发期推荐在 Taro 项目中调试生产期再放到原生项目中预览。其编译流程为# 开发环境 $ npm run dev # 生产环境 $ npm run build开发期预览小程序开发者工具导入blended-apart/taro-project生产期预览小程序开发者工具导入blended-apart/miniapp。关键实现集中在taro-project/config/index.js见 examples/blended-apart/taro-project/config/index.jsconst path require(path) const config { projectName: test, date: 2021-1-18, designWidth: 750, deviceRatio: { 640: 2.34 / 2, 750: 1, 828: 1.81 / 2 }, sourceRoot: src, outputRoot: dist, plugins: [ path.join(process.cwd(), /plugin-mv/index.js), tarojs/plugin-indie ], framework: react, mini: { enableSourceMap: false, postcss: { 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: { publicPath: /, staticDirectory: static, postcss: { autoprefixer: { enable: true, config: {} }, cssModules: { enable: false, config: { namingPattern: module, generateScopedName: [name]__[local]___[hash:base64:5] } } } } }这段配置揭示了两个关键机制tarojs/plugin-indieTaro 官方提供的「独立分包编译」插件。它负责把 Taro 项目按「独立分包」的形态输出使产物可以在原生小程序中作为独立分包被加载本地插件plugin-mvexamples/blended-apart/taro-project/plugin-mv一个位于plugins配置里的本地 JS 插件作用是把 Taro 编译出的dist产物自动移动/拷贝到miniapp原生工程对应的分包目录省去手工搬运。这正是「开发期在 Taro 工程内调试、生产期在原生工程预览」两条链路能顺畅衔接的桥梁。2.2 blended-basic原生项目的主包与分包使用 Taro 页面与「整包作为分包」不同blended-basic 演示的是更细粒度的共存在原生小程序的主包和分包中分别嵌入 Taro 生成的页面原生页面与 Taro 页面可以混合导航。其 README 明确列出了两个核心特性主包场景Taro 页面调用原生项目里暴露的方法Taro 页面使用原生项目里的原生自定义组件分包场景分包依赖细分原生分包与 Taro 页面分包可以独立拆分。这个示例验证了 Taro 混合开发的双向能力不仅 Taro 页面能「用」原生的能力方法、组件原生的分包结构也能「装」下 Taro 页面。编译与预览流程与 blended-apart 一致开发期导入taro-project生产期导入miniapp。2.3 blended-taro-component 系列把 Taro 项目编译为原生自定义组件当复用粒度进一步缩小到「组件」时可以用 blended-taro-componentReact与 blended-taro-component-vue3Vue3两个示例。它们把 Taro 工程编译输出为标准的微信原生自定义组件从而可以被任何原生页面甚至 H5 工程引用。两个示例 README 列出的特性完全一致基本使用方法给组件传递 props为组件添加自定义组件的配置如virtualHost该配置用于控制组件节点在页面结构中的虚拟化层级避免额外包裹节点影响样式布局。除小程序端外两个示例还演示了「编译后的原生组件如何应用到 H5」的完整验证链路# 1. 编译原生组件在 taro-project 内 $ cd taro-project $ npm run build:h5 # 2. 编译 H5 项目验证在 H5 中 import 使用 $ cd h5 $ yarn dev:h5 # 3. 编译 H5-HTML 项目验证 H5 全局引用 $ yarn global add http-server $ cd h5-html $ http-server -c-1由此形成三种使用形态的对照H5 import 引用、H5 全局引用、微信小程序原生页面引用。仓库中 examples/blended-taro-component/h5、examples/blended-taro-component/h5-html、examples/blended-taro-component/miniapp 三个目录分别对应这三类宿主工程可以直接对照阅读。注原文档中还列出了build-weapp-plugin开发微信小程序插件条目不过当前仓库的examples目录中已不包含对应子目录该主题可参阅 Taro 官方插件开发文档。三、自定义 TabBarReact 与 Vue3 双实现微信小程序自基础库 2.5.0 起支持自定义 TabBar但需要开发者自行实现组件并用框架管理其状态。Taro 官方为此提供了 React 与 Vue3 两个示例。3.1 配置侧开启 custom 模式无论使用哪种框架第一步都是在应用配置中开启custom: true。examples/custom-tabbar-react/src/app.config.ts 给出了完整配置export default defineAppConfig({ pages: [ pages/index/index, pages/cate/index, pages/cart/index, pages/my/index ], window: { backgroundTextStyle: light, navigationBarBackgroundColor: #fff, navigationBarTitleText: WeChat, navigationBarTextStyle: black }, tabBar: { custom: true, color: #000000, selectedColor: #DC143C, backgroundColor: #ffffff, list: [ { pagePath: pages/index/index, selectedIconPath: images/tabbar_home_on.png, iconPath: images/tabbar_home.png, text: 首页 }, { pagePath: pages/cate/index, selectedIconPath: images/tabbar_cate_on.png, iconPath: images/tabbar_cate.png, text: 分类 }, { pagePath: pages/cart/index, selectedIconPath: images/tabbar_cart_on.png, iconPath: images/tabbar_cart.png, text: 购物车 }, { pagePath: pages/my/index, selectedIconPath: images/tabbar_my_on.png, iconPath: images/tabbar_my.png, text: 个人中心 } ] } })注意custom: true开启后list数组中的iconPath/selectedIconPath仍必须保留微信要求与原生 tabBar 配置保持一致只是实际渲染交给自定义组件完成。示例的图标资源8 张 PNG统一放在src/images下。3.2 React 版用 Taro.getTabBar 管理状态custom-tabbar-react 的 README 明确指出本示例演示了使用 React 编写微信小程序自定义 TabBar 组件并通过Taro.getTabBar去管理 TabBar 的状态。这是微信自定义 TabBar 的标准交互姿势——页面在onShow等生命周期中调用Taro.getTabBar()拿到 TabBar 组件实例再调用其暴露的方法如setSelected(index)同步选中态。3.3 Vue3 版用 Vuex 管理状态custom-tabbar-vue3 采用同样的自定义 TabBar 思路但状态管理选用了VuexTabBar 的选中索引、徽标等状态放入 store各页面通过提交 mutation 更新TabBar 组件通过 mapState 响应式读取。仓库中 examples/custom-tabbar-vue3/src 下 5 个.vue文件与 Vuex 相关声明vuex-shim.d.ts共同构成了完整的 Vue3 Vuex 版本实现。两个示例的对比价值在于无论 React 还是 Vue3自定义 TabBar 的骨架config 配置 自定义组件 状态管理是通用的差异只在框架层的状态管理方式。四、分包进阶独立分包与依赖分包小程序分包能力直接关系到首屏加载性能Taro 的两个示例分别覆盖了「独立分包」与「依赖分包优化」两个方向。4.1 weapp-independent-subpackages独立分包独立分包是微信小程序提供的特殊分包类型它可以不依赖主包、随用随下载适合放置低频或可延迟加载的业务。weapp-independent-subpackages 的 README 说明了其核心要点Taro 支持使用微信小程序的独立分包功能配置方法和微信小程序中一致。也就是说你无需学习新的 DSL只需在app.config的分包配置里按微信规范声明independent: true即可。快速开始命令# 安装依赖 $ yarn # 编译预览 $ taro build --type weapp --watch其中taro build --type weapp --watch是 Taro CLIpackages/taro-cli的标准构建命令--type指定目标平台为weapp--watch开启监听模式实现增量编译。示例的src下同时包含普通页面与独立分包页面用于对比两者在产物与加载行为上的差异。4.2 mini-split-chunks-plugin智能提取分包依赖分包虽好但「分包间公共依赖重复打包」会显著增大体积。mini-split-chunks-plugin 演示的正是解决这一问题的「智能提取分包依赖」能力构建时自动分析各分包引用的公共模块将公共依赖提取为独立 chunk避免每个分包都重复携带一份。该能力在仓库中有对应的端到端测试用例 tests/tests/mini-split-chunks.spec.ts测试会针对包含多个分包与公共依赖的 fixture 工程执行构建并对产物中 chunk 的划分与依赖归属做快照断言——这为你在自己的项目中验证「公共依赖是否被正确提取」提供了可直接参考的断言思路。示例工程本身位于 examples/mini-split-chunks-plugin包含config、src等标准目录。五、PreBundle 特性external-prebundle 示例external-prebundle 对应 Taro 的PreBundle依赖预构建特性。该特性的落地实现在 packages/taro-webpack5-prebundle在正式构建前先将 node_modules 中的稳定依赖预构建prebundle为可复用的缓存产物后续构建直接复用从而显著缩短冷启动编译时间并让依赖缓存与业务代码解耦。示例工程中config目录下 10 个配置文件即为开启与调优该特性的配置样例scripts目录存放配套的脚本。注意示例内的README.md是脚手架Create React App自动生成的模板说明与 PreBundle 主题无关请以config与scripts目录中的实际配置为准。六、如何高效使用这些示例把官方示例迁移到自己的项目建议遵循以下路径按场景选型存量原生小程序要接 Taro先看 blended-basic页面级与 blended-apart分包级要把单个业务封装成组件复用看 blended-taro-component要做 TabBar 定制对照两个 custom-tabbar 示例先跑通双链路每个混合开发示例都遵循「开发期在taro-project内npm run dev、生产期npm run build后在miniapp原生工程预览」的规范先用官方命令跑通再改造读配置理解机制混合开发的精髓在config/index.js的plugins配置如tarojs/plugin-indie、本地plugin-mv改配置前先对照 examples/blended-apart/taro-project/config/index.js 理解插件职责用测试兜底涉及分包拆分的改动参考 tests/tests/mini-split-chunks.spec.ts 的断言方式在自建工程中补充构建产物校验。七、小结examples/README.md 虽是一份精简的示例索引但它勾勒出了 Taro 在「工程化落地」层面的完整版图混合开发blended 系列解决存量项目迁移自定义 TabBar 双框架示例覆盖 UI 定制独立分包与依赖分包优化直击小程序体积与加载性能PreBundle 特性优化构建效率。结合各示例目录下的配置文件与仓库内packages、tests的实现你可以把每一条能力从「会用的示例」升级为「可复用的工程方案」。【免费下载链接】taro开放式跨端跨框架解决方案支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/项目地址: https://gitcode.com/NervJS/taro创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考