始于1988年培养高端汽修人才。
云喃万通汽修学校落于美丽的春城昆明学校坏境优美，学习氛围浓厚教学设施设备齐全，建有新能源汽车实训厅、整车实训厅、电器实訓厅、汽车美容实训厅等20余个实训大厅开设三十多个汽车技术专业。
这个是我从小程序官方demo找到的希望对你有用
你对这个回答的评价昰？
自诞生以来就以一种百家争鸣嘚姿态展现在者的面前。继2017年1月9日诞生后小程序市场又陆续出现了宝小程序、小程序、等等，甚至平安内部也在发展自己的小程序生態。各家都在小程序的基础上面向自己的业务，对架构进行逐步优化调整但是万变不离其宗，怎么做微信小程序序终归为小程序鼻祖也是得益于怎么做微信小程序序的思想，才造就了如今这百花齐放的业态说起怎么做微信小程序序，在体验上的优化让我很长一段時间认为，这是 Native 层渲染事实并不完全是，至今不敢相信webView 的渲染竟能带来如此体验。本篇主要以一个端开发者的角度来对怎么做微信尛程序序、支付宝小程序一探究竟。本篇旨在原理分析我并未有真实的小程序架构设计经验。
说到小程序不得不需要指出另外一个问題，苹果爸爸 的审核问题目前会有开发者存在这样的疑问，Hybrid 和 H5 是不是要被苹果拒审了呢其实从描述来看，不难发现苹果的主要目的是針对 “核心功能未在二进制文件内” 的 App
实际上小程序无论是在设计理念上，还是核心技术上都不存在这样的问题，小程序并非App小程序是以 App 为载体，尽可能的对 web
页面进行优化而生成的产物还有一点是 马甲包 日益猖獗，马甲包最后基本都转化成为了条款内描述的 “现金Bocai、彩票抽奖和慈善捐款” 类型所以苹果想要尽可能的禁止它。而且从微信文档来看怎么做微信小程序序是典型的 技术推动产品的结果 。关于RN类技术更不存在这样的问题了，RN本质为
JS 通过 JSCore 调用 Native 组件实际上它的核心仍然在 Native 端，当然对 code push 我还尚存疑问关于 RN 的动态更新上，从 嘚描述也不难发现苹果爸爸的态度 只要不是为了绕过审核去做动态更新就可以接受 。
怎么做微信小程序序是什么微信把小程序定义为是 一种全新的连接用户与的方式，它可以在微信内被便捷地获取和传播同时具有出色的使用体驗 。便捷和出色有何而来小程序技术最初来源于 H5 和 Native 间的简单调用，微信构建了一个 WeixinJSBridge 来为H5提供一些 Native 的功能例如地图、播放器、定位、拍照、预览等功能。关于
Bridge 的具体实现可以参考之前的文章 但是微信逐渐的又遇到了另外一个问题，那就 H5 页面的体验问题微信团队为了解決 H5 页面的白屏问题，他们引入了最近很火的 离线包 概念当然微信称之为 微信 Web 资源离线存储 ，实际上是一个东西Web
开发者可借助微信提供嘚资源存储能力，直接从微信本地加载 Web 资源而不需要再从服务端拉取从而减少网页的加载时间。关于离线包的概念不了解的话可以参栲下我之前的文章 。但是当页面加载大量 CSS 和 JS 时依然会有白屏问题，包括 H5 页面点击事件的迟钝感和页面跳转的体验问题那么基于此问题，应运而生的小程序技术就诞生了。
从怎么做微信小程序序的发展史不难看出，小程序实际上是近几年开发者对 H5 体验优化而来的这吔切合了前面所说的， 小程序实际上是典型的技术推动产品的结果
怎么做微信小程序序自称能够解决鉯下问题：
易用且安全的微信数据开发。
快速加载和原生的体验这其实都是在体验上的升级，更强大能力实际上源于怎么做微信小程序序为开发者提供了大量的组件这些组件有基于web技术，也有基于Native技术在我看来这和 RN 技术不谋而合。后面我会举一个模仿 RN 实现的小例子来闡述一下它的原理
高效和简单的开发是因为怎么做微信小程序序开发语言实质上还是基于 web 开发规范，这使得开发前端的人来显得更容易
还有一点更重要的就是安全，为什么说小程序是安全的后面会逐步展开，揭开小程序的神秘面纱
小程序的架构设计与 web 技术还是有一萣的差别，吸取了 web 技术的一些也摒弃了 web 技术中体验不好的地方。最主要的特点就是小程序采用双线程机制即视图渲染和业务逻辑分别運行在不同的线程中。在传统的 web 开发中网页开发渲染线程和脚本线程是互斥的，所以 H5 页面中长时间的脚本运行可能会导致页面失去响应戓者白屏体验糟糕。
为了更好的体验将页面渲染线程和脚本线程分开执行：
渲染层：界面渲染相关的逻辑全部 在webView 线程内执行，一个小程序存在多个页面一个页面对应一个 webView，怎么做微信小程序序限制开发者最多只能创建五个页面
双线程模型是小程序框架与大多数前端 web 框架的不同之处，基于这个模型可以更好的管控以及提供更安全的环境因为逻辑层运行在 JSCore 中，并没有一个完整浏览器对象因而缺少相關的DOM API和BOM API。客户端的开发者可能对 DOM 有些陌生了解编译过程的同学应该知道在编译器编译代码的时候，会有一个语法分析的过程生成抽象語法树 AST，编译器会根据语法树去检查表达式是否合法、括号是否匹配等实际上DOM也是一种树结构，经过浏览器的解析最终呈现在用户面湔。通过 JavaScript 操纵 DOM 可以随意改变元素的位置这对于小程序来说是极为不安全的。所以说逻辑层为小程序带来的另一个特点易于管控和安全。线程通信基于前面提到的 WeixinJSBridge ：逻辑层把数据变化通知到视图层触发视图层页面的更新，视图层把触发的事件通知到逻辑层进行业务处理
当我们对渲染层进行事件操作后，会通过 WeixinJSBridge 将数据传递到 Native 系统层Native 系统层决定是否要用 Native 处理，然后丢给 逻辑层进行用户的逻辑代码处理邏辑层处理完毕后会将数据通过 WeixinJSBridge 返给 View 层，View 渲染更新视图
根据 描述， 在视图层内小程序的每一个页面都独立运行在一个页面层级上。小程序启动时仅有一个页面层级每次调用wx.navigateTo，都会创建一个新的页面层级；相对地wx.navigateBack会销毁一个页面层级 。大概可以理解为每个 web 页面都是運行在单独的 webView 里面，这样的好处就是让每个
webView 单纯的处理当前页面的渲染逻辑不需要加载其他页面的逻辑代码，减轻负担能够加速页面渲染使其能够尽可能的接近原生，这与小程序跳转页面的体验上也是一致的
实际上在小程序源码内有一个 index.html 文件的存在，这是小程序启动後的文件初次加载的时候，主入口会加载相应的 webView 这其中就会包括前面所提到的，视图层和逻辑层逻辑层虽然也提供了 webView ，但是并不提供浏览器相关接口而是单纯的为了获取当前的 JSCore ，执行相关的 JS
脚本文件这也是开发小程序是没办法直接操作 DOM 的根本原因。
当我们每打开┅个新页面的时候调用 navigateTo 都相当于打开了一个新的 webView ，这样一直打开内存也会变得吃紧，这也是为什么小程序对页面打开数量有限制的原洇了
根据小程序开发文档描述： 对于每一个新的页面层级，视图层都需要进行一些额外的准备工作在小程序启动前，微信会提前准备恏一个页面层级用于展示小程序的首页除此以外，每当一个页面层级被用于渲染页面微信都会提前开始准备一个新的页面层级，使得烸次调用wx.navigateTo都能够尽快展示一个新的页面 这在客户端的角度来看，相当于打开新页面之后对下一个页面的
webView 提前做了预加载，这个思路与當前比较流行的 webView 缓存池的思路不谋而合原因是在 iOS 和 Android 系统上，操作系统启动 webView 都需要一小段时间预加载会提升页面打开速度，优化白屏问題
看标题就应该很清楚了，这是渲染层的核心模块它的作用就是为小程序准备一个新的页面，小程序每个视图层页面内容都是通过 pageframe.html 模板来生成的包括小程序启动的首页。通过查看源码里面定义了一个属性 var __webviewId__ ，我猜想这是每个 webView 页面的页面 ID
逻辑层处理多个视图层间的业務逻辑可能就是通过这个ID来做的映射关系。在首次启动时后台会缓存生成的 pageframe.html 模版，在后面的页面打开时直接加载缓存的 pageframe.html 模版，页面引叺的资源文件也可以直接在缓存中加载包括小程序基础库视图层底层、页面的模版信息、配置信息以及样式等内容，这样避免重复生成快速打开页面，提升页面渲染性能
关于 pageframe.html 最后是怎么生成相应页面的归功于一个叫 nw.js 的框架，具体实现这里就不讲叻更多的偏向于前端的知识了。
上面了解了渲染层都做了什么之后下面在窥探一下，小程序的逻辑层都做了什么参考 不难发现，sevice 层嘚代码是由 WAService.js 实现的逻辑层实际上主要提供了 Page， AppGetApp 接口和更为丰富 wx 接口模块，包括数据绑定、事件分发、生命周期管理、路由管理等等關于视图层和逻辑层间的具体交互细节可以看下这张图：
我们写的页面逻辑最后都被引入到了一个叫 appservice.html 的页面中，并且分别从 app.js 开始一一执行；小程序代码调用 Page 构造器的时候小程序基础库会记录页面的基础信息，如初始数据（data）、方法等需要注意的是，如果一个页面被多次創建并不会使得这个页面所在的JS文件被执行多次，而仅仅是根据初始数据多生成了一个页面实例（this）在页面 JS 文件中直接定义的变量，茬所有这个页面的实例间是共享的对于逻辑层，从客户端的角度看我们应该更关注于逻辑层的JS是怎么注入到JSCore中的。
说到JavaScriptCore我们先来讨論下Hybrid App 的构建思路，Hybird App是指混合模式移动应用即其中既包含原生的结构又有内嵌有 Web 的组件。这种 App 不仅性能和用户体验可以达到和原生所差无幾的程度更大的优势在于 bug 修复快，版本迭代无需发版Hybird App的实质并没有修改原 Native 的行为，而是将下发的资源进行加载和界面渲染类似
我们咑算实现这样的功能：通过下发JS脚本创建原生的 UILabel 和 UIButton 控件并响应事件，首先编写 JS 代码如下：
}); //将控件以数组形式返回
这样就完成了一个简单的 JS 腳本注入实际上执行后的样子是这样的：
这就是一个简单的执行 JS 脚本的逻辑，实际上 ReactNative 的原理也是基于此小程序逻辑层与微信客户端的茭互逻辑也是基于此。
到这里关于怎么做微信小程序序渲染层与逻辑层做了什么、怎么做的、优化了什么以及为什么要采用这样的架构來设计，基本都梳理完毕了小程序这样的分层设计显然是有意为之的，它的中间层完全控制了程序对于界面进行的操作 同时对于传递嘚数据和响应时间也做到的监控。一方面程序的行为受到了极大限制 另一方面微信可以确保他们对于小程序内容和体验有绝对的控制。峩们在小程序的 JS 代码里面是不能直接使用浏览器提供的 DOM 和 BOM 接口的这一方面是因为 JS 代码外层使用了局部变量进行屏蔽，另一方面即便我们鈳以操作 DOM 和 BOM 接口它们对应的也是逻辑层模块，并不会对页面产生影响这样的结构也说明了小程序的动画和绘图 API 被设计成生成一个最终對象而不是一步一步执行的样子， 原因就是 json 格式的数据传递和解析相比与原生 API 都是损耗不菲的如果频繁调用很可能损耗 过多性能，进而影响用户体验
总结一句话就是webView渲染，JSCore处理逻辑JSBridge做线程通信。后面再简要的分析下支付宝小程序支付宝小程序属于后起之秀，支付宝尛程序在怎么做微信小程序序的基础上做了一些优化，单从技术角度来看有点后来者居上的意思。目前支付宝技术通过官方的媒体账號对外暴漏的一些实现细节也在逐步增多
前端框架下面是小程序 native 引擎，包括了小程序容器、渲染引擎和 JavaScript 引擎這块主要是把客户端 native 的能力和前端框架结合起来，给开发者提供系统底层能力的接口在渲染引擎上面，支付宝小程序不仅提供 JavaScript+Webview 的方式還提供 JavaScript+Native 的方式，在对性能要求较高的场景可以选择 Native 的渲染模式，给用户更好的体验
这段文字来源于支付宝对外开放的技术博客的描述，从这段描述中我们能够发现支付宝小程序在架构设计上同样采用的渲染引擎加 JavaScript 引擎两部分，包括页面间的切换实际上和怎么做微信小程序序逻辑基本一致下面这张是支付宝小程序应用框架的架构图：
单从这个运行时架构来看，它与怎么做微信小程序序不同的地方是webView 頁面也就是渲染层通过消息服务直接与逻辑层进行通讯，而不需要像微信的 JSBridge 那样作为中间层消息服务具体实现细节目前尚不得知。支付寶的JSBridge只会与逻辑层进行通讯来给小程序提供一些 Native 能力。支付宝的这种架构主要目的是解决渲染层与逻辑层交互的对象较复杂、数据量较夶时交互的性能比较差的问题。支付宝小程序的设计思路比较值得借鉴怎么做微信小程序序线程间的通讯是通过 JSBridge ，序列化 json 进行传递的支付宝小程序重新设计了V8虚拟机，让逻辑和渲染都有自己的 Local Runtime存放私有的模块和数据。在渲染层和逻辑层交互时setData 的 对象会直接创建在 Shared Heap 裏面，因此渲染层的 Local Runtime 可以直接读到该对象并且用于 render 层的渲染，保证了逻辑和渲染的隔离又减少了序列化和传输成本。当然支付宝还有些其他的优化包括首页离线缓存，缓存时机的处理以及闪屏处理等等问题这里就不再延伸讨论了（因为很多细节我也不知道）。
根据支付宝小程序对外开放的技术文章来看架构设计还是非常巧妙的，也很值得我们学习先看图：
小程序SDK在架构设计上把它分为了两部分，一部分是核心库基础引擎一部分是基于基础库开发的插件功能。从上往下看：
第一层小程序层这是小程序开发者使用小程序 DSL 及各种組件开发的代码层。
第二层和第三层架应该是小程序内部封装的一些组件和对外提供的相关API等
第四层和第五层是小程序的运行基础框架，主要包含小程序的逻辑处理引擎及渲染层支付宝基于 ReactNative 增加了 Native 引擎，可以用原生来渲染 UI 根据支付宝 mPaaS 的介绍来看，目前支付宝的小程序使用的是 React 版蚂蚁内部的其他 App 有在使用 React Native 版的小程序。
基础组件部分和扩展能力部分更像是基于 Bridge 调用的原生能力
差不多半年多没有写文章叻，趁着公司年会时间稍显充裕对当前的小程序架构进行了下分析和总结，当然真正的小程序应该比这还要复杂的多，小程序实际上昰多年来大前端融合的一个结果是一套非常成体系的技术方案，看了这么多我想你对小程序也有了初步认识小程序的核心实际上还是 渲染层 和 逻辑层 的构建，那么如果让你开发一套 小程序SDK 你会怎样设计它们呢？
云喃万通汽修学校落于美丽的春城昆明学校坏境优美，学习氛围浓厚教学设施设备齐全，建有新能源汽车实训厅、整车实训厅、电器实訓厅、汽车美容实训厅等20余个实训大厅开设三十多个汽车技术专业。
这个是我从小程序官方demo找到的希望对你有用
你对这个回答的评价昰？
下载百度知道APP抢鲜体验
使用百度知道APP，立即抢鲜体验你的手机镜头里或许有别人想知道的***。
欢迎您访问u88连锁加盟网 专区怎么做微信小程序序开发加盟专区为广大网民提供了丰富全面的怎么做微信小程序序开发加盟信息，是寻找怎么做微信小程序序开发加盟信息的第一选择怎么做微信小程序序开发加盟专区满足广大创业者寻找项目和查阅资讯的需求。哽多怎么做微信小程序序开发加盟排行榜怎么做微信小程序序开发加盟大全，就上u88创业网怎么做微信小程序序开发加盟专区查询 移动終端请访问 专区移动版。