【前言】
就目前而言,为降低应用的开发成本(学习成本)和满足多平台需求,选择 React-Native 框架作为开发根本。
=====================zbc-rn框架1.0=======================
基于zbc对于react-native的理解而定下的基本开发思路和原则。始建于2020-05-26/广西金川
========仓促起兵,一切以实现为最优先,然后再考虑优化性能=======
一、核心思路:
由于rn框架调用原生组件的方式不够灵活、功能不够完善、不能多样化、且样式调整局限性太高,虽然其性能颇佳,但是放弃使用。
改为每一界面均采用react-native-webview调用本地页面文件来实现多彩缤纷的页面。
二、开发原则:
1.所有固定网页均存放于本地(动态页面除外)
动态页面:即逢年过节、特殊事件,无需更新app即可实现首页等部分页面发生外观变化。
2.所有页面均采取数据驱动页面变化及显示等,即页面代码只负责渲染逻辑而不包含任何非渲染逻辑。
3.所有页面内应该放置一个外部的样式引用(地址固定),以实现外部动态样式实现(如国丧就会变为黑白风格,春节可变为过年风)
4.组件代码应尽可能傻瓜化,但又不能过度封装。
5.组件封装过程中应该使之自动继承上一层props,而不是将之声明然后再赋值传入子组件(僵化封装)。固定必传字段例外。
6.所有props获得的数据执行逻辑前应事先判断其数据类型与格式是否规范或为空,然后给出错误提示或者继续执行逻辑。
7.布置所有传入给子组件的props内容应该尽可能扁平化,不要取数中数/值中值然后操作逻辑
8.网络通信(myFetch.js):因后台技术不稳定,暂时采用分而治之的策略避免要素过多。
分离原则:
a.首先有一个共同的最为规范的四方合集(GET
,PUT
,POST
,DELETE
)请求方法。
b.然后如果有其他不符合规范的请求方式,选择另建文件局部整改。
c.最后将所有请求组件代码当中的地址牵引至统一文件以便一键修改。
9.组件实现:因现在未能专职投入到自框架开发,所以挑选性能好的第三方开源组件作为基建板。
10.组件代码:应该包含一个统一类名的外壳。
三、规范:
1.RN与web通信模式统一为
【!】RN=>web
向web端发送一个对象
//此为使web端发动setState()动作,内容为除etype外的所有内容
{
etype:"data",
...
}
//此为使web端发出动作(调用某方法,即this.xxx(...args)),
//每次只能调用一个
{
etype:"action",
name:"xxx",
args:[]
}
【!】web=>RN
发回一个对象
//
{
etype:"内容不限",此字段表示你触发了什么东西。
...
}
四、关键技术/实现方案:
1.调用摄像头发生照相或录像动作
2.调用摄像头扫码(二维码)
3.手势动作监听(摇、横/竖屏、滑动、长按)
4.观看视频
5.播放音乐
6.访问相册/拿取图片、视频文件
7.接收推送信息业务
=================================
实现方案:
1.xxxxxxxxxxxx
2.react-native-camera
3.摇--------xxxxxxxx
横竖------程序自带调整,可配置以禁用此
滑动------xxxxxxxxxxxx
长按------xxxxxxxxx
4.react-native-video==============react-native-zbc-video-player
5.xxxxxxxxxxxxxxx
6.antd-mobile
7.jpush
五、组件库以及实现细节
1.下拉刷新的列表(web)
【预留接口】
a.应该可以触发事件(下拉、下滑到底部)
b.每一项应该可以随意渲染
c.每一项应该可以响应左右滑动事件(额外选项键)
网友评论