美文网首页程序员@IT·互联网
从开发微信小程序看开发模式

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

作者: yubang | 来源:发表于2017-04-08 23:47 被阅读315次

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

    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),轮子开发结构如下:

    轮子的开发模式

    相关文章

      网友评论

        本文标题:从开发微信小程序看开发模式

        本文链接:https://www.haomeiwen.com/subject/ljfrattx.html