Taro4.x搭建小程序项目

感谢引用的全部链接的作者^-^
1、概述

项目地址：taro-template​​​​​​​​​​​​​​。底子搭建(参见readme.md)：如Nutui、redux等。业务搭建如下。
技能栈：Taro 4.x、NutUI-React 2.x、Redux 5.x、Tailwindcss 3.x、Typescript 5.x。
兼容：微信小程序、H5端。
2、业务搭建

常量

（1）全局变量：utils/globalData.ts，api  eg 存app实例、主题，小型应用
（2）常量：constants，eg 枚举、字典常量等​​​​​​​
（3）接口、资源地址等，步调：​​​​​​​​​​​​​​api、api2​​​​​​​​​​​​​​

• .env[.development|.xx]，TARO_APP_xx开头，eg TARO_APP_ID固定(必填)
  
• config/index.ts配置defineConstants + process.env.TARO_APP_xx串，全局可访问
  
• types/global.d.ts，声明 DOMAIN_URL、RESOURCE_URL类型
  
• 页面直接利用：DOMAIN_URL、RESOURCE_URL地址、IS_H5是否h5
  

布局

tabbar（分2种）

• 默认布局，图片都放cdn，app.config.ts内tabBar配置。
  
• ​​​​​​​自界说布局​​​​​​​，步调如下，eg 滤镜结果
  
  
  • app.tsx 先存 app 实例，全局通用
    
  • tabBar主包页面，都配置 usingComponents:{}
    
  • 刷新页面tabBar高亮：主包各页面调用tarBar?.setSelected(idx)，或者布局内同一调用
    
  • H5不支持自界说tabbar，app.config.ts配置custom:true时需判断为false
    
  • config/index.js 需配置 designWidth(input), 自界说tabbar尺寸为 2 倍[缘故原由?]
    
  • 底部需添加如下，序次不可变 api(h5)​​​​​​​
    1. padding-bottom: constant(safe-area-inset-bottom);
    2. padding-bottom: env(safe-area-inset-bottom);

    复制代码
  
  

 ​​​​​​​

layouts

• 封装缘故原由：（1）全局加载、悬浮框、全局弹框... （2）小程序默认有头部标题栏，而h5默认没有，若产物需求显示，则需手动设置​​​​​​​
  
• 滚动布局，layouts/ScrollLayout：各页面需手动设置标题。 eg 全屏布局头部渐变
  
  
  • 顶部padding：状态栏高度+导航栏高度（导航栏的值为：ui框架头部写死的高度，或者界说id类，用Taro.createSelectorQuery()动态盘算）
    
  • 底部padding：设置<SafeArea />组件，或id类+Taro.createSelectorQuery()动态盘算
    
  • 写布局时需区分：主包、非主包页面，h5、小程序页面、底部有按钮，底部没有按钮
    
  
  

​​​小程序端 api​​​​​​​：

​​​​​​​

​​​​​​​h5端：

详情页：

页面

分包：app.config.ts里subPackages，分包可放pages/下，也可跟pages/平级，建议平级。
分包目录：/pkList/  components + pages / detail/index.tsx+index.config.ts+index.scss
组件

举例：加载更多组件，分2种，1是用小程序自带的加载。2是封装scrollView组件加载

1. //小程序自带加载
3. index.config.ts：
4. export default definePageConfig({
5.   enablePullDownRefresh: true,
7. index.tsx：
8. usePullDownRefresh(async () => {
9.   await getList() // 请求列表接口
10.   Taro.stopPullDownRefresh()
11. })

复制代码

封装scrollView组件加载，留意分页hook跟组件分开封装，对页面调用方法，获取数据较方便：
​​​​​​​​​​​​​​

区别1对置顶友好，2因为在地区内滚动，对置顶利用不友好，需自行在组件内新增置顶组件做判断
其他组件的封装，根据业务代码而定，自行处置惩罚。
请求

拦截器、错误、重复请求、超时请求、缓存、刷新token，这里仅简单封装错误、刷新token，可正常请求，更具体的封装见Taro-hooks的useRequest（后续文章专门研究原理​​​​​​​）
错误处置惩罚

2种错误都要捕捉：
捕捉react渲染中的错误：全局组件新增错误界限 api​​​​​​​
捕捉react渲染之外的错误：app.tsx内利用useError、usePageNotFound处置惩罚全局错误
hooks

usePage.ts分页hook，useUser用户登录、登出hook​​​​​​​
npm包

eg lodash-es、dayjs等，根据业务自行安装
兼容H5

api，多端开发留意几个部分：​​​​​​​
1样式
（1）h5没有page，只有body，因此某些样式需同时设置page，body
（2）h5需设置最大宽度
（3）h5编译设置根字体大小，需在config/index.ts里同时设置以下才有用[缘故原由?]

1. pxtransform: {
2.     enable: true,
3.     config: {
4.         baseFontSize: 16, // 只配置这个无效，原因？
5.         maxRootSize: 16,
6.     },
7. },

复制代码

2业务，h5主要引流到小程序，没有的功能，只能通过跳转小程序打开等等，具体业务后续连续总结。eg 登录功能：h5没有微信的授权手机号，只能跳转新页面，通过账号+密码/手机号登录。
换肤

layouts/ScrollLayout组件内，切换按钮，赋值theme，结合状态管理存theme变量



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。