wanmi mobile rn

dev

yarn android
yarn ios

dev doc

yarn docz:dev

test

yarn test

compile && publish

yarn compile
npm publish

整体介绍

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

配合开发插件来使用

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

组件/模板设计原则

• 对于组件的封装，要保证其的单一职责、高内聚；对于一些不常用的、关联性不大的特性，可以单独提取成模板；
• 对于强交互类的组件，由于这类组件不易提取代码，所以要考虑周全组件的各种使用场景；
• 对于模板的封装： 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命名