大概背景介绍下。
在手机端新增一个知识付费的模块，同时运行在微信小程序端和app端。
微信小程序是个比较老的项目，使用的是原生小程序编码。app用的是 纯原生nvue编码。
新增的模块几乎一模一样，写过 nvue的同学应该知道它的编码模式跟常规的是不一样的，一则nvue是纯flex垂直布局，二则方法调用方式不一致。为了减少工作量，让代码可以复用60%-80%，本人做了一些总结，分享出来跟大家交流。
当然新项目可以完全在生态中完成编码，就只需要关注排版布局就行了。
前期准备，认真阅读官方关于 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，不然也会乱，这对自适应布局也有好处。
二.各自对双向绑定赋值编码
小程序使用的方式，vnue是直接双向绑定。这边还是需要各自定义下赋值的方法的。
三.事件绑定
nvue使用的是vue的方式，@click，小程序使用的是等，需要修改。调用的api可能也是来自不同的sdk，这边看各自的需求吧。
另外就是一些方法类可以抽出公共类库 直接进来就行
四.第三方组件
这是个头大的问题，两者生态圈不一致，组件的编码模式也不一样，不是我们能控制的，可能在小程序里用了一套，在中要用他自己的某个组件，这边省不了，只能看能不能找到两者通用的，但是如果都是使用生态开发的就好很多了，但是遇到不支持nvue的组件就只能采用的内嵌形式了，好的是只是部分页面有这种情况不会影响app的整体性能。
———END———
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，永久会员只需109元，全站资源免费下载 点击查看详情
站 长 微 信： nanadh666
