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

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

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），轮子开发结构如下：

轮子的开发模式