一套代码小程序&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会将代码与模板做一个绑定,大概可以这样:

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

从相似度上来说比React高得多,但是仍然有很多区别:

① class&style一块的处理

② 属性的传递

③ setData….

这些等我们后续代码写完看看如何处理之,能不能达到一套代码三端运行,这里做首页的简单实现。

首页逻辑的实现

这里简单的组织了下目录结构,做了最简单的实现,这里大家注意我这里对Vue不是很熟悉,不会遵循Vue的最佳实践,我这里是在探索能不能借助Vue让一套代码三端运行,所以这里写法会尽量靠近小程序写法:

如此我们首页页面框架就出来了,后续只需要完成对应的几个组件,如日历组件以及城市列表,这里为了更完整的体验,我们先完成日历组件

日历组件

之前我们做日历组件的时候做的比较复杂,这里可以看到小程序中里面的模板代码:

小程序模板代码

我思考了下,应该还是尽量少在模板里面调用js方法,所以我们这里将粒度再拆细一点,实现一个单日的表格组件,所以我们这里的日历由两部分组成:

① 日历-月组件

② 日历-天组件,被月所包裹

所以我们这里先来实现一个天的组件,对于日历来说,他会拥有以下特性:

① 是否过期,这个会影响显示效果

② 是否特殊节日,如中秋等,也会影响显示

③ 点击事件响应……

④ 是不是今天

好像也没多少东西…

这里先简单些个demo将日历单元格展示出来:



形成的html结构如下:

简单来说,关于天的处理似乎处理完成,我们现在来开始月的处理,于是日历雏形就已经出来了:

这样分解下来,似乎代码变得更加简单了,接下来我们花点功夫完善这个组件,最后形成了这样的代码:

至此虽然,我们这块代码简陋,却完成了一个简单日历组件,至此我们第一阶段的探索结束,明天继续研究。

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部