一套代码小程序&Web&Native运行的探索(1)

来自:叶小钗

前言

前面我们对微信小程序进行了研究:【微信小程序项目实践总结】30分钟从陌生到熟悉

并且用小程序翻写了之前一个demo:【组件化开发】前端进阶篇之如何编写可维护可升级的代码

之前一直在跟业务方打交道后面研究了下后端,期间还做了一些运营、管理相关工作,哈哈,最近一年工作经历十分丰富啊,生命在于不断的尝试嘛。

当然,不可避免的在前端技术一块也稍微有点落后,对React&Vue没有进行过深入一点的研究,这里得空我们便来一起研究一番(回想起来写代码的日子才是最快乐的),因为我们现在也慢慢在切React、想尝试下React Native,但是我这边对于到底React还是Vue还是比较疑惑,所以我这里研究下,顺便看看能不能解决小程序一套代码的问题

我们现在就来尝试,是否可以用React或者Vue让一套代码能在三端同时运行

我们这里依旧使用这个我觉得还算复杂的例子,做一个首页一个列表页,后面尝试将这套代码翻译成React Native以及微信小程序,于是便开始我们这次的学习吧

PS:我这里对React&Vue熟悉度一般,文中就是demo研究,有不妥的地方请各位指正

React的开发方式

工欲善其事必先利其器,我们这里依旧先做UI组件,首先我们做一个弹出层提示组件alert,这里我们尽量尝试与小程序开发模式保持一致点

我们这里先来创建一个组件:

生成的HTML结构为:

这里view显然不会被识别,我们简单做下处理(这里顺便升级下我们React的版本):

于是我们生成了这个样子的代码,没有额外添加span也没有添加id标识了:

我们这里依旧以一个实际的例子来说明React的各种细节,这里我们索性来做一个提示框组件吧,这里我们先实现一个遮盖层:

这里简单说下React中状态以及属性的区别(我理解下的区别):

这句话说的好像比较抽象,这里具体表达一下是:

① 属性可以从父组件获取,并且父组件赋值是组件的主要使用方式

② 一个组件内部不会有调用setProps类似的方法期望引起属性的变化

③ 总之属性便是组件的固有属性,我们只能像函数一样使用而不是想去改变

④ 如果你想改变一个属性的值,那么说明他该被定义为状态

⑤ 反之如果一个变量可以从父组件中获取,那么他一定不是一个状态

这里以我们这里的遮盖层组件为例说明:

遮盖层的z-index以及是否显示,对于遮盖层来说就是最小原子单元了,而且他们也是父组件通过属性的方式传入的,我们看看这里提示框的代码:

为了方便调试,我们这里给提示框组件定义了很多“状态”,而这里面的状态可能有很多是“不合适”的,可以看到我们遮盖层UIMask使用的几个属性全部是这里传入的,然后我们这里想象下真实使用场景,肯定是全局有一个变量,或者按钮控制显示隐藏,所以我们这个组件进行一轮改造:

如此一来,我们这个组件便基本结束了,可以看到,事实上我们页面组件所有的状态全部汇集到了顶层组件也就是页面层级来了,在页面层级依旧需要分块处理,否则代码依旧可能会很乱

阶段总结

我们这里回顾小程序中的弹出层组件是这样写的:

简单研究到这里,感觉要使用React完成一套代码三端运行有点困难,小程序中的模板全部不能直接调用就是,除非是有wxs,而React支持的就是模板中写很多js,除非给React做很多的规则限制,或者由React编译为小程序识别的代码,否则暂时是不大可能的,所以我们现在研究下Vue是不是合适

Vue的开发方式

这里先不考虑mpvue框架,否则一点神秘感都没有了,我们依旧使用弹出层组件为例,用纯纯的Vue代码尝试是否做得到,首先Vue会将代码与模板做一个绑定,大概可以这样:

这块与小程序还比较类似,于是我们来完成我们的提示框组件: