如何让代码在微信小程序和uniapp+nvue上复用

大概背景介绍下。

在手机端新增一个知识付费的模块，同时运行在微信小程序端和app端。

微信小程序是个比较老的项目，使用的是原生小程序编码。app用的是uniapp 纯原生nvue编码。

新增的模块几乎一模一样，写过uniapp nvue的同学应该知道它的编码模式跟常规的是不一样的，一则nvue是纯flex垂直布局，二则方法调用方式不一致。为了减少工作量，让代码可以复用60%-80%，本人做了一些总结，分享出来跟大家交流。

当然新项目可以完全在uniapp生态中完成编码，就只需要关注排版布局就行了。

前期准备，认真阅读官方关于uniapp nvue部分的介绍，至少有个大致的了解。

一.html部分完全采用flex布局

小程序标签语言和nvue标签是一样的，这边不做过多描述。差异在于排班方式上，这边我是先在小程序里完成的。

nvue默认是垂直方向布局，小程序默认是水平方向，所以在写flex布局时需要明确布局方向，不要因为是默认的就省去。我这边把他们都单独定义了，在写html时可以任意组合。这样在移植代码时可以完全复用。

.flex-wap{ display:  flex}
.flex1{ flex: 1}
.flex1{ flex: 2}
.flex1{ flex: 3}
.flex1{ flex: 4}
.flex1{ flex: 5}
.flex-row{ flex-direction: row; }
.flex-column{ flex-direction: column }
.flex-row-center{ flex-direction: row; justify-content: center; }
.flex-row-middle{ flex-direction: row; align-items:center}
.flex-row-end{flex-direction: row; justify-content: flex-end;}
.flex-middle{ justify-content: center;}

补充

1.nvue中不识别百分比的写法，所有在编码的时候就要屏蔽。

2.vnue中css有些简写的写法是不支持的，建议认真阅读nvue的说明，不然复用过来的时候你会发现乱了。

3.尺寸单位都需要使用rpx，不然也会乱，这对自适应布局也有好处。

二.各自对双向绑定赋值编码

小程序使用的setData方式，vnue是直接双向绑定。这边还是需要各自定义下赋值的方法的。

三.事件绑定

nvue使用的是vue的方式，@click，小程序使用的是bindtap等，需要修改。调用的api可能也是来自不同的sdk，这边看各自的需求吧。

另外就是一些方法类可以抽出公共类库 直接import进来就行

四.第三方组件

这是个头大的问题，两者生态圈不一致，组件的编码模式也不一样，不是我们能控制的，可能在小程序里用了一套，在uniapp中要用他自己的某个组件，这边省不了，只能看能不能找到两者通用的，但是如果都是使用uniapp生态开发的就好很多了，但是遇到不支持nvue的组件就只能采用webview的内嵌形式了，好的是只是部分页面有这种情况不会影响app的整体性能。