@wanmi/ui-taro

wanmi ui for taro

Usage no npm install needed!

<script type="module">
  import wanmiUiTaro from 'https://cdn.skypack.dev/@wanmi/ui-taro';
</script>

README

wanmi mobile taro

整体介绍

  • 组件:对页块以及逻辑的封装;
  • 模板:对页块以及逻辑的总结;
  • 组件与模板都是对项目中可复用代码的提取;不同点在于组件侧重于通过被引用来复用(代码控制权在组件内),模板则通过被复制来复用(代码控制权在业务中)。

配合开发插件来使用

  • 在业务代码中,利用模板/组件可以快速编写页面整体结构,然后通过开发插件一键生成相关代码
  • 对于符合约定的页面,也可以通过模板块增加地添加逻辑

组件/模板设计原则

  • 对于组件的封装,要保证其的单一职责、高内聚;对于一些不常用的、关联性不大的特性,可以单独提取成模板;
  • 对于强交互类的组件,由于这类组件不易提取代码,所以要考虑周全组件的各种使用场景;
  • 对于模板的封装:
    1.要充分考虑模板之间的上下级关系,以及模板是如何组合成页面的;(添加的模板要符合组件描述语言的文法);
    2.添加模板时要从业务出发、充分理解背后的数据状态后,尽可能的覆盖常见的页面场景;
    3.模板的属性(props)要尽可能的精简:能用一个属性描述的、不要用两个(如 FormItem.label)、非重要属性不要封装进来;
    4.要了解模板的作用是:通过简单的配置来拼装并生成相应的代码块,细节部分可以提取代码后再调整;

组件/模板开发原则

  • 使用 react hook 开发,组件的 props、state 要用 ts 明确申明,非必传 props 要有默认值;
  • 多余的包引入、console.log、alert需及时清理掉;
  • && 前需要为明确的boolean类型;
  • 类型定义需要明确是否必传, 非必传的需要做非空判断, 或者是业务处理,或者是有默认值;
  • 注释部分要补全;
  • 变量名要有可读性;
  • 对于 hook 中出现状态不同步问题时,可以先用 common/hooks/use-ref-state.ts 来解决;
  • 逻辑不是太复杂的组件,建议直接在 index.tsx 中封装;
  • 对于模板、可提取组件,编写时逻辑要尽量清晰、简约、不用奇怪的语法,从而有利于提取算法的识别;
  • classNames名、文件名统一用脊柱命名
  • 样式命名规则:第一层样式名为 wm-{compName} wm-{compName}-{status};其余层样式名尽量简约不用加 wm-{compName}前缀;
  • 样式命名要利于 props 解析,如 longText、largeText、middleText 可以直接用${size}Text来解析
  • 单个文件原则上不超过150行,过长的话进行拆分
  • 内部方法变量不需要以"_"开头,内部渲染方法以renderXXX命名

组件模型

props对应input、props.onChange对应output、state对应inner; 元信息(meta):对输入参数(input)、输出参数通道(output)、内部状态的描述(inner); 组件默认信息(defaultInfo):props、state、meta的默认值; 组件初始信息(initialInfo):由props和defaultValue合并,表示props、state、meta的初始值;

connect方法的作用

计算当前组件的initialValue,以及传入的内部组件的initialValue; 这样组件内可用的确定量就不止props了,还有meta;

插件算法

在extract-parts时,识别输入props、组件内的defaultValue,子组件的props、defaultValue,然后计算initialValue(复用);