从开发微信小程序看开发模式

不讨论微信小程序的商业价值,单纯从开发微信小程序来看,它的开发模式是很先进的。

1.一个页面一个文件夹

项目目录结构

小程序每一个页面都由一个wxml(其实就是html),一个wxss(其实就是css)和一个js文件构成。并且页面之间样式和js都是隔离开的,而路由统一由根目录下的app.json配置而成。这样子的结构在后期是非常有利于维护的。

2.内置了常用组件

以前我们还没有使用vue等框架的时候,我们页面的组件都是一堆html片段构成的,看起来就繁杂。让我们看看下面这两幅图对比一下(都是为了实现进度条组件):

以前的开发方法

小程序的开发方法

是不是小程序的开发方式看起来就是赏心悦目呢?

3.小程序本质

可以看成,VUE + 内置一堆JS方法 + 禁止使用JQUERY。而微信小程序的开发者工具可以看作配置好的vue开发环境,不得不吐槽一下前端的环境配置不是一般的难(这句话对于后端同学来说的)。

禁止jquery意思是微信小程序不允许直接操作dom,而修改页面的方式跟vue的API差不多,总的来说也是便于维护。

4.聊聊前端页面的进化史

  • 最原始的阶段,代码里面拼接出html字符串。
  • 进化一下,使用后端的模板引擎,苦了前端的娃,还得配置后端环境。
  • 然后前后端理论出来了,前后端通过ajax通讯,而前端从依靠字符串拼接到使用js创建dom对象来动态渲染页面。
  • 再接着,前端也开始有自己的模板引擎了,比较出名的就是企鹅家的artTemplate(当然出名的还有挺多的)。
  • 到了现在,前端用Vue,React 和Angular等框架来模块化开发。
  • 接下来,会不会是组件化开发方式呢?(就是堆积木的方式开发网页)

组件化的开发方式

5.小程序开发方式相对于Vue开发方式的优势

  • 单单从配置开发环境来说,就甩开vue几条街了。当然这样子比较是不对的,毕竟微信开发者工具是工具,当然只需要一直点next即可。而vue的插件大部分非官方,所以安装过程必然繁琐一些。
  • 小程序的路由处理仅仅需要在配置文件加入一行字符串,而vue的路由处理还需要引入组件(涉及到es的语法或者别的办法引入组件代码),然后注册等繁琐操作。
  • 从整体开发来说,小程序就像以前后端开发整套系统一样简单方便,而vue却是在前期会加大团队的开发量。

从开发小程序得到的开发模式

  1. 一个文件夹(包含html,css,js文件)包含一个页面的所有代码

  2. 路由仅仅需要两个值,一个页面的url,一个代码地址

  3. 一个文件夹包含一个组件的相关代码

  4. 整个系统,只需要写组件,页面(由组件堆砌起来),和路由配置文件即可,开发环境需要一行命令就可以安装完成,配置要几乎为0。

为了实现这种开发模式,特地尝试造了一个轮子,代码放在github(https://github.com/yubang/applet),轮子开发结构如下:

轮子的开发模式

交流技术请点击这里