rax 框架开发钉钉小程序实践问题

开发环境

Mac + Node 16.14.0 + Rax 1.1.0 + fusion mobile 2.6.6

问题及解决方案

IOS 输入中文无法输入

使用钉钉原生的textarea组件或者rax-textarea组件并启用composition,受控组件需要禁用native

更多方案详见：https://qianduan.shop/blogs/detail/52

无法自定义tabbar

自定义组件托管tabbar, 在自定义组件内控制tabbar的切换，这种方式目前有个问题是tab切换无法写入history,导致小程序的返回操作无法返回到上一个tab

小程序真机不支持CSS gap 属性

小程序真机不支持css float属性,::before伪元素设置float表现与模拟器不一致

小程序真机不支持 Promise.allSettle方法

小程序显然很小的节点会出现形状与预期不符的情况

比如宽高为10rpx的圆，真机上显示可能是圆或椭圆或正方形，解决办法是增加宽高，通过缩放实现想要的效果

滚动穿透

安卓可以在遮罩层的View组件上加disable-scroll属性达到效果，但这种方式在IOS不生效，IOS中目前发现能用的方法就是动态修改滚动元素的样式禁止滚动：overflow:hidden

Rax文档中ScrollView提供的scrollIntoView方法和scrollTo方法不起作用，原因未知，

替代方案是使用页面的pageScrollTo方法

Rax 监听onPageScroll和onReachBottom编译后有时候不生效，修改对应文件任何代码再次编译又可以生效，原因未知，

替代方案是使用ScrollView来做相应的锚点效果和滚动加载实现

原理上，registerNativeEventListeners 其实不是运行时方法，我们是通过文件扫描的方式发现该页面组件用到了这个方法，然后通过 AST 解析到需要注册哪些生命周期，最后再添加到 Page 对象上，比如的上述的代码，用到了 registerNativeEventListeners(Index, ['onReachBottom'])，最终到小程序上就是：

Page({
onReachBottom() {
// 派发事件
}
});
如果没有注册的事件，最终不会出现在 Page 对象上，比如上述示例，onPageScroll 就不会被注册在 Page 上

参考资料：https://github.com/alibaba/rax/issues/2171

设置input placehoder颜色

原生钉钉组件：

<input placeholder='请输入' placeholder-style="color:red" placeholder-class="className" />

rax-textinput组件

<TextInput placeholder='请输入' placeholder-style="color:red"  placeholder-class="className" />