微信小程序制作
当前位置:网站首页 > 小程序热文 > 微信小程序的底层框架 返回列表

微信小程序的底层框架

作者:admin 时间:2018-12-14 浏览量:1601
 前端的框架太多让人眼花缭乱,很多相似的地方,优秀的地方大家都会借鉴,同时又会有各自的一些特点。小程序也好,其他框架也好,理解他们的设计缘由、实现原理,还是能学到很多很多东西的。技术选型目前来说,页面渲染的方式主要有三种:一、Web 渲染。二、Native 原生渲染。三、Web 与 Native 两者掺杂,也即我们常说的 Hybrid 渲染。
前面也说过,小程序最终的呈现形式,是 WebView + 原生组件,Hybrid 方式。我们结合之前对小程序的期望来看:开发门槛:Web 门槛低,不过 Native 也有像 RN 这样的框架支持,体验:Native 体验比 Web 不要好太多,Hybrid 在一定程度上比 Web 接近原生体验,版本更新:Web 支持在线更新,Native 则需要打包到微信一起审核发布,管控和安全:Web 可跳转或是改变页面内容,存在一些不可控因素和安全风险由于小程序的宿主是微信,如果用纯客户端原生技术来编写小程序 ,那小程序代码需要与微信代码一起编包,跟随微信发版本,这种方式跟开发节奏必然都是不对的。所以方向应该是需要像 Web 技术那样,有一份随时可更新的资源包放在云端,通过下载到本地,动态执行后即可渲染出界面。如果用纯 Web 技术来渲染小程序,在一些有复杂交互的页面上可能会面临一些性能问题。这是因为在 Web 技术中,UI渲染跟 JavaScript 的脚本执行都在一个单线程中执行,这就容易导致一些逻辑任务抢占UI渲染的资源。
总地看来,小程序选择了 Hybrid 的渲染方式,可以用一种近似 Web 的方式来开发,并且还可以实现在线更新代码。同时,引入原生组件有以下好处:
一、扩展 Web 的能力。比如像输入框组件(input, textarea)有更好地控制键盘的能力
二、体验更好,同时也减轻 WebView 的渲染工作
三、绕过 setData、数据通信和重渲染流程,使渲染性能更好
现在,我们还剩下一个很重要的问题:管控性和安全性。于是,双线程的设计被提出来了。
双线程的小程序,也不知道是哪位大佬,能想出双线程这样的模型,反正我是佩服得666的。
双线程是什么?我们先来看个官方的图:
小程序的渲染层和逻辑层分别由 2 个线程管理:渲染层的界面使用了 WebView 进行渲染,逻辑层采用 JsCore 线程运行 JS 脚本。为什么要这么设计呢?前面提到的管控和安全,为了解决这些问题,我们需要阻止开发者使用一些浏览器提供的,诸如跳转页面、操作 DOM、动态执行脚本的开放性接口。
我们可以使用客户端系统的 JavaScript 引擎,iOS下的 JavaScriptCore 框架,安卓下腾讯 x5 内核提供的 JsCore 环境。通过提供一个沙箱环境来运行开发者的 JavaScript 代码来解决。这个沙箱环境只提供纯 JavaScript 的解释执行环境,没有任何浏览器相关接口。
这就是小程序双线程模型的由来:
逻辑层:创建一个单独的线程去执行 JavaScript,在这个环境下执行的都是有关小程序业务逻辑的代码
渲染层:界面渲染相关的任务全都在 WebView 线程里执行,通过逻辑层代码去控制渲染哪些界面。一个小程序存在多个界面,所以渲染层存在多个 WebView 线程。
双线程通信
把开发者的 JS 逻辑代码放到单独的线程去运行,但在 Webview 线程里,开发者就没法直接操作 DOM。那要怎么去实现动态更改界面呢?
前面我们知道,逻辑层和渲染层的通信会由 Native (微信客户端)做中转,逻辑层发送网络请求也经由 Native 转发。这是不是意味着,我们可以把 DOM 的更新通过简单的数据通信来实现呢?
Virtual DOM 相信大家都已有了解,大概是这么个过程:用JS对象模拟DOM树 -> 比较两棵虚拟DOM树的差异 -> 把差异应用到真正的DOM树上。
在这里我们可以用上,如图:在渲染层把 WXML 转化成对应的 JS 对象。
在逻辑层发生数据变更的时候,通过宿主环境提供的 setData 方法把数据从逻辑层传递到 Native,再转发到渲染层。
经过对比前后差异,把差异应用在原来的 DOM 树上,更新界面。
我们通过把 WXML 转化为数据,通过 Native 进行转发,来实现逻辑层和渲染层的交互和通信。而这样完整的一套框架,基本上都是通过小程序的基础库来完成的。
小程序的基础库小程序的基础库是 JavaScript 编写的,它可以被注入到渲染层和逻辑层运行。主要用于:
在渲染层,提供各类组件来组建界面的元素
在逻辑层,提供各类 API 来处理各种逻辑
处理数据绑定、组件系统、事件系统、通信系统等一系列框架逻辑
由于小程序的渲染层和逻辑层是两个线程管理,两个线程各自注入了基础库。小程序的基础库不会被打包在某个小程序的代码包里边,它会被提前内置在微信客户端。这样可以降低业务小程序的代码包大小,单独修复基础库中的 Bug,无需修改到业务小程序的代码包。
Exparser 框架
Exparser 是微信小程序的组件组织框架,内置在小程序基础库中,为小程序的各种组件提供基础的支持。小程序内的所有组件,包括内置组件和自定义组件,都由 Exparser 组织管理。Exparser 特点包括:
基于 Shadow DOM 模型:模型上与 WebComponents 的 ShadowDOM 高度相似,但不依赖浏览器的原生支持,也没有其他依赖库;实现时,还针对性地增加了其他API以支持小程序组件编程。
可在纯JS环境中运行:这意味着逻辑层也具有一定的组件树组织能力。高效轻量:性能表现好,在组件实例极多的环境下表现尤其优异,同时代码尺寸也较小。
这节里大概讲了小程序设计中比较重要的一个模型——双线程,关于双线程的出现、设计、数据通信,到基础库、Exparser 框架,都是一个个相关而又相互影响的选择。
关于小程序的底层框架设计,其实还涉及更多更多我们未能一时半会掌握完的内容,自定义组件、原生组件,还有他们做了很多的性能优化工作,都不是只言片语能讲完的。我们能做的,就是多去思考。
联系方式:18066528545   029-89298792

阅读过此文章的读者,还阅读过下面的文章

  • 现如今对于企业来说到底是做小程序好,还是说做app好,现如今很多企业选择的关注之一。

    对于小程序来说,其推广速度快,不管说分享到朋友圈,还是说分享给好友,直接快速的点击就可以使用了。并且它还有一个好处,就是它不用像app一样去上架到各个应用商店。像如果上架到苹果的话,还需要一个九十九美金注册一个这样的账号,可能比较麻烦。但是小程序的弊端啊,对那种着急上线的人可能就不太友好了,因为它多了一个小程序备案,这个时间啊可能也很久。你像a p p的话,它最大的弊端就是推广起来不方便。都知道下载app它没有小程序那么灵活,但是app的好处呢,它就是可以想怎么改就怎么改,没有像小程序那样改,一次,要审核一次,改一次,要审核一次,比较慢,比较麻烦。

    对于用户来说,现如今还是毕竟推荐建设小程序的,毕竟现如今的小程序在推广和使用方面会有更好的有时。
  • 现如今对于用户来说,小程序很大程度上已经逐渐成为很多人们日常生活中不可或缺的一部分了。在这种情况下,很多企业都想要同过小程序来获取到更多的流量或者用户。那么对于想要开发小程序的企业或用户来说,开发一款小程序需要准备哪些资料呢?

    首先应该准备一家公司的营业执照,最好是科技公司的,因为科技公司是可以申请高新技术补贴的,一般来说有十到二十万左右。其次就是公司的经营范围,这个一定要跟公司经营类目相符合,不然在经营过程中,如果被查出来经营范围不一样,那么就会被下架小程序的。如果说是个人使用的小程序的话,就需要去申请一个个体的营业执照,把经营范围填好,因为个体是可以申请小程序的,走的是法人。有了这种营业执照以后呢,就可以帮申请域名、服务器、小程序小程序的名称,还有logo这些等等。

    对于一个小程序来说所需要准备的东西并不是很多,主要是开发过程中所需要的费用相对来说会比较高一些。
  • 对于用户来说,小程序的开发费用往往是很多用户关注的重点,很多用户都是因为开发小程序的费用太高而不得不放弃小程序的开发,那么对于用户来说应该如何降低小程序的开发费用呢?

    首先确定开发主要的功能。在不确定小程序未来能不能帮助赚钱的情况下,先定制开发核心功能,等小程序赚钱了以后再进行升级开发。其次,找有开发类似经验的公司做二开,这样更能确保开发公司都能理解到位,并且比起全新的定制开发来说价格也会更低。第三,整理需求,做需求文档,这个是很多用户都忽略的,需求清晰完整,开发公司才能清楚的了解工期报价才不会虚高。

    对于用户来说这些都是能够降低开发费用的方式之一,当然了对于用户来说节省开发费用的方式有很多,但是想要做出真正好的小程序所需要的价格和时间一定是非常多的。
  • 小程序定制的费用是很多用户不想选择定制开发的主要原因,对于用户来说定制开发的费用太高了,一般的企业是很难承受的,那么应该如何降低定制开发的费用呢?

    首先第一个,就是用户想要定制开发的这个小程序功能,开发公司正好有已经开发好的功能。那这个时候呢小程序开发公司一般来说给的价格都会比较低一些,因为有的代码他们是可以直接用的。第二,如果说你想要自己开发的这个小程序,完全是你的一些个性化的一些要求。开发公司没有已经开发好的,类似的这个功能案例。这个时候呢,降低一点需求把最重要的功能先开发出来,后面在进行优化升级。除此之外,就是选择一些人力成本比较低的二线城市,或者是三线城市,虽然有可能在开发过程中会出现一些不确定的因素,但是相对来说价格会便宜不少。

    当然除此以外呢,想减少小程序定制开发费用的方式也有很多,一般来说最好是先开发完小程序的核心功能之后上线使用,当有足够的资金后在对其进行升级和优化,对于很多预算有限,但是需要进行定制开发的用户来说着是最好的方式。
  • 在进行小程序的定制开发过程中,有可能会出现很多问题,有些问题很多情况下都是可以提前避免的,这对于小程序的开发和后期的维护等都会有很大的帮助。那么在进行小程序的开发时应该注意那些事项呢?

    第一个需要注意的事项就是先要明确小程序开发的功能。很多时候由于没有和网络公司明确小程序定制开发的功能,导致后期开发过程中出现了大量的问题,甲乙双方的相互扯皮。为了避免后期的返工和修改,一定要在签约小程序开发合同之前,要把定制开发的功能,以文字的形式记录下来。第二个需要注意的事项就是开发公司是不是百分之百给你源代码交付。在小程序开发过程中,很多公司为了降低开发成本,有可能会直接在网上下载流通的免费代码,通过简单的修改给你进行交付。因为这套代码的版权不是他们公司开发的,后期有可能会收到起诉函。第三个需要注意的事项就是做小程序开发后期有没有隐形的费用。因为做小程序开发,后期或多或少都会做一些调整,只要让公司改个东西或者做一些服务,都有可能会是天价,除非啥都不改。所以一定要在小程序确定合作之前,把后期的服务范围落实到位。

    在小程序的开发过程中,很多主要的问题就是来源于这些地方,只要明确好小程序的功能,和后期的维护、优化等方面的问题后,基本上就能够减少很多问题了。
  • 一般来说,需要进行小程序定制开发的时候,说明一般的模板小程序已经很难满足需求了。对于一个定制小程序开发大致需要以下几个阶段,第一确定产品需求,第二产品原型设计,第三产品ui设计,第四开发过程,第五测试验收上线。

    在开发过程中,有不同的角色来承担对应的项目工作,核心需要四个角色。第一,产品经理主要负责需求调研以及产品原型设计,包括产品的使用流程、逻辑关系等一系列工作。第二,ui设计师将产品原型具体化,上色大师配合程序员贴图等工作。第三,程序员包括前后端开发工程师,负责产品的具体开发工作。第四,测试工程师负责产品测试、调试校验系统的稳定性后,产品才能进行上线。

    一般来说小程序的定制开发费用主要是开发人员的成本费用,加上一些其他的像是电费等。总的来说,开发一款小程序的费用很大程度上和开发人员的数量和开发时间有关。一般情况下开发一款定制的小程序最少也需要一万元左右,要是想要让小程序有更好的发展空间或者是更多的功能等,所需要的费用就会更多。

029-8619 5145 180 6652 8545 西安嘉瑞德网络科技公司
工作时间:周一到周六 8:30-18:30
邮箱:2528823962@qq.com
QQ:2528823962
地址:陕西省西安市未央区元朔路明丰伯马都A座10820室
  • 微信小程序制作微信二维码
    扫码咨询
网站地图 Copyright © 2015 西安嘉瑞德网络科技有限公司 陕ICP备17015187号-1