本发明属于多端跨平台，具体为一种多端跨平台解决方案。
背景技术：
1、跨平台开发的使命就是围绕着开发性能和用户体验两个方向去打造的，在特定场景不同实现在用户体验和研发效能上面临取舍，再跨平台技术出现前前端技术栈主要有ios，android原生开发及web开发。前者用户体验更好，但由于技术割裂多端同时开发，工作量会按端加倍。后者一人开发即可用于多端使用，节省了成本，但由于web承载的原因并不能给用户满意的用户体验。大多数移动端app跨平台解决方案，通常是采用reactnative生成ios和android端。
2、但是reactnative允许开发者使用javascript和react来编写代码，并通过原生组件来构建用户界面，从而在保持原生性能的同时实现了跨平台开发，然而，对于h5页面的渲染，基于完整reactnative开发的方案并不能直接解决混合开发内容生成h5页面的问题，目前许多开发者采用了混合开发的策略，即同时使用reactnative进行原生界面的开发，并使用webview或其他技术来渲染h5页面，这种方式虽然可以在一定程度上降低开发成本，但由于双端都需要开发且桥接原生类无法进行直接生成页面，开发效率和用户体验较低，因此需要对其进行改进和优化。
技术实现思路
1、本发明的目的在于提供一种多端跨平台解决方案，以解决上述背景技术中提出的问题。
2、为了实现上述目的，本发明提供如下技术方案：一种多端跨平台解决方案，包括业务代码分离方式、多模块入口打包、原生渲染的桥接代码适配、基础业务适配、特殊兼容适配和打包产物接入。
3、优选地，所述原生渲染的桥接代码适配、基础业务适配和特殊兼容适配的适配方式为:
4、s1,通过：
5、if(platform.os＝＝'web'){return<view/>
6、}else{
7、.........}对基础平台进行判断；
8、s2，通过reactnative代码：
9、<view nativeid＝'che168elonestopimganimation'></view>使vue代码生成相关js文件；
10、s3，js文件先id替换法对rn-web关键点进行替换，然后通过交互采用方法挂着window实现：
11、vue.prototype.$eventbus＝new vue()；//注册eventbus new vue({
12、el:'#che168elonestopimganimation',
13、render:h＝>h(index)
14、})；
15、s4，通过提供的reactnative代码类ahrnbannerview代码，使reactnative多平台实现相同效果，完成汽车之家原生渲染的桥接代码适配；
16、s5，采用同类名和同方法名在util.js进行转换，使两工程分别引入原有reatctnative的插件包和重写的usedcar-web-lib的目录文件来实现对接，完成基础业务适配；
17、s6，h5端通过增加{position:'fixed'}方法，保证弹窗位置，还能通过reatctnative实现，完成针对页面弹窗代码的适配；
18、s7，通过在reactnative-web中视图采用监听document的scroll属性，完成区别于reactnative滚动视图为scrollview的针对滚动视图适配。
19、优选地，所述业务代码分离方式采用两套独立的git管理工程文件，将core业务代码放在两个独立的git仓库中管理，将两组平台的独立特性做分离。
20、优选地，所述多模块入口打包，采用webpack技术打包，并且按照文件夹动态给多个项目同时打包，引入各自配置，并上传静态js的方式来实现。
21、优选地，所述多模块入口打包方式为：
22、步骤1，通过routerconfig.js引入dev调试入口；
23、步骤2，通过upload.js处理静态文件上传；
24、步骤3，通过entry设计独立目录，然后通过文件目录结构引入打包；
25、步骤4，通过routerconfigprod.js配置和自定义的myconfigplugin.js使各个业务动态引入；
26、步骤5，通过配置文件注入title、注入引入div的独立id和注入预加载js，完成多个项目动态打包。
27、优选地，通过采用同名类ahrnbannerview自行保证轮播图、动态引入css样式和通过reactnative实现swiper，这三种适配可行方案，来使reactnative多平台实现相同效果。
28、优选地，所述打包产物接入的方式为：
29、a1，选车控件通过window上挂载方法提供给宿主端调用；
30、a2，用户操作完成后通过callback返回数据；
31、a3，数据通过reactnative-web进行打包，打包产物为js文件和html文件。
32、优选地，所述基础业务适配分为业务处理类和ui类，以定位为例，在app端与原生桥接交互获取原生定位的方式为：
33、b1，使用android或ios的原生定位api；
34、b2，在原生应用中实现一个javascript可调用的接口，该接口封装了定位功能；
35、b3，在javascript代码中，通过jsbridge调用原生实现的定位接口；
36、b4，原生端将定位结果传递给javascript，javascript进行相应的处理，完成定位。
37、优选地，在h5端通过(window as any).navigator.geolocation.getcurrentposition((position:any)来获取定位信息。
38、优选地，所述业务代码分离方式采用ts开发，降低字段错误风险。
39、本发明的有益效果如下：
40、1、本发明通过react native和react native web的整合，实现了在移动端和web端使用同一套代码基进行开发，从而大大减少了开发工作量，与原生开发+web开发相比，减少了2人次的工作量；与单独的react native+web开发相比，也减少了1人次的工作量，这种技术选型使得三端开发仅需投入1人即可完成，极大地降低了开发成本和工作量。
41、2、本发明通过react native web技术，对现有web应用进行了改造，使得在移动端使用react native渲染，相比纯webview渲染拥有更好的性能和用户体验，这种改造不仅提升了应用的响应速度和流畅度，还使得移动端和web端在界面和交互上更加一致，增强了用户的整体使用感受。
42、3、本发明由于采用了统一的代码基和技术栈，降低了开发团队之间的沟通成本，提高了开发效率，同时，由于减少了代码量和复杂性，也降低了测试团队对业务的测试工作量，这种跨平台技术选型不仅实现了降本增效的目的，还为用户提供了更加优秀的产品体验。
1.一种多端跨平台解决方案，其特征在于：包括业务代码分离方式、多模块入口打包、原生渲染的桥接代码适配、基础业务适配、特殊兼容适配和打包产物接入。
2.根据权利要求1所述的一种多端跨平台解决方案，其特征在于：所述原生渲染的桥接代码适配、基础业务适配和特殊兼容适配的适配方式为:
3.根据权利要求1所述的一种多端跨平台解决方案，其特征在于：所述业务代码分离方式采用两套独立的git管理工程文件，将core业务代码放在两个独立的git仓库中管理，将两组平台的独立特性做分离。
4.根据权利要求1所述的一种多端跨平台解决方案，其特征在于：所述多模块入口打包，采用webpack技术打包，并且按照文件夹动态给多个项目同时打包，引入各自配置，并上传静态js的方式来实现。
5.根据权利要求4所述的一种多端跨平台解决方案，其特征在于：所述多模块入口打包方式为：
6.根据权利要求2所述的一种多端跨平台解决方案，其特征在于：通过采用同名类ahrnbannerview自行保证轮播图、动态引入css样式和通过reactnative实现swiper，这三种适配可行方案，来使reactnative多平台实现相同效果。
7.根据权利要求1所述的一种多端跨平台解决方案，其特征在于：所述打包产物接入的方式为：
8.根据权利要求1所述的一种多端跨平台解决方案，其特征在于：所述基础业务适配分为业务处理类和ui类，以定位为例，在app端与原生桥接交互获取原生定位的方式为：
9.根据权利要求8所述的一种多端跨平台解决方案，其特征在于：在h5端通过
10.根据权利要求3所述的一种多端跨平台解决方案，其特征在于：所述业务代码分离方式采用ts开发，降低字段错误风险。
