Taro3.x 快速开发微信小程序以及minidebug 小程序调试工具使用

Question

如题所述

Answer 1

前言

最近公司准备开发一款扫码开票类型的微信小程序，时间紧迫。首先，我查阅了小程序开放平台，但官方组件较少，考虑是否需要手动编写。经过调研，我了解到Uniapp和Taro是市面上流行的开发框架。考虑到公司技术栈是react hooks + ts，我选择了Taro。

Taro简介

Taro是一个支持React/Vue/Nerv等框架的跨端跨框架解决方案，可用于开发微信、京东、百度、支付宝、字节跳动、QQ小程序、H5、RN等应用。在业务需求同时在多个端展示时，编写一套代码适配多端的能力极为重要。

安装及使用

Taro项目基于node，需确保具备较新的node环境（>=12.0.0），推荐使用nvm管理node。首先，使用npm或yarn全局安装@tarojs/cli或直接使用npx创建模板项目。

运行及启动项目

使用编译命令编译微信小程序，运行小程序，导入项目，定义项目名称和目录，使用测试号AppId。

快速创建新页面及增加TabBar

Taro create --name [页面名称] 可快速生成新的页面文件，并填充基础代码。配置app.config.ts，增加subpackages配置，详细讲解其作用。

路由

Taro提供switchTab、reLaunch、redirectTo、navigateTo、navigateBack等方法实现页面跳转。

请求封装

使用Taro.request定义统一状态，定义错误输出方法，定义request.ts和baseUrl.ts，在组件中使用Dva集成。

页面适配问题

Taro默认按照designWidth：750的尺寸进行自动转换，如UI设计稿是375宽度，可修改config/index.js。

扫二维码功能

扫码功能可直接调用官方提供的方法。

调试技巧

minidebug功能包括环境切换、身份Mock、应用信息获取、位置模拟、缓存管理、扫一扫、H5跳转、更新版本等。