写个hoc来应付小程序的审核！

背景

做过微信小程序的同学都知道，小程序的审核很严格，经常会让人心态爆炸，以各种各样的理由打回，譬如说“页面无运营内容”、“无实质内容”等等，然后就要反复改反复提审，直至心态彻底崩溃。

如果这个时候，产品给你提了个需求，让你新增一个图标、功能之类的上去，但是现在暂时不要有实际的功能，只是提示“暂未开放”;或者说新做了一整套功能，但其中部分还未定下来，却又希望展示出去，也是提示“暂未开放”。

那么恭喜你，提审的时候大概会被打回，因为你提示了“暂未开放”。或者有的时候碰到的审核人员比较不死板，直接给你过了，但你得赌。

咋搞呢？

解决方法

🤓👆诶，有了。审核的时候审核人员只能看到开发版（develop）和体验版（trial），那我如果只让某些无实质内容的组件仅在正式版（release）展示，而在开发版和体验版中隐藏，这样不就达到了需求？

但是要是一个个组件都去手动写判断条件还不得累死啊。

鉴于我们使用的是Taro + React的开发，可以用高阶组件来包一下（hoc），应该就好些。

说干就干！

import { getEnvVersion } from '@/utils/common';
import { forwardRef } from 'react';

const ENV_VERSION_LEVEL_MAP = {
  develop: 0, // 开发版
  trial: 1, // 体验版
  release: 2, // 正式版
};

/**
 * 这是一个跟据当前环境来确认是否显示的高阶组件
 * 为了过审，可能需要在体验版或开发版来隐藏而在正式版显示出来，跟据envLevel来判断是否显示
 * develop、trail、release级别依次递增
 * @param envLevel {develop|trial|release} 渲染的环境等级
 */
const withEnv = (Component, envLevel = 'develop') => {
  return forwardRef(({ ...props }, ref) => {
    const currentEnv = getEnvVersion();
    if (ENV_VERSION_LEVEL_MAP[currentEnv] < ENV_VERSION_LEVEL_MAP[envLevel]) {
      return null;
    }
    return (
      <Component
        {...props}
        ref={ref}
      />
    );
  });
};

export default withEnv;

代码的内容比较简单，就是传入了一个组件和envLevel，如果传入的envLevel级别小于当前环境级别，这个hoc就会返回null。

至于getEnvVersion是获取当前的环境，具体的，值就是__wxConfig.envVersion。

使用的时候只需要像这样就可以了

const ReleaseView = withEnv(View, 'release');
const Demo = () => <ReleaseView>something</ReleaseView>;

这样的话这个View中的内容就会只在正式版才会显示出来，那么提审的时候，审核人员看不见这个组件，也就不会存在暂未开放的提示了🤪

结语

虽然是能应付审核了，但如果存在使用ref的情况下，可能要注意ref.current可能为null。

另外，我不确定这么做会不会违反小程序的政策...