怎么实现小程序实现？是什么原理？
发布时间：2022-07-09 14:52:58 所属栏目：经验 来源：互联网
导读：概述 作为一名前端开发，如果你还停留在应用开发层面，那你就OUT了，快来跟我一起探讨下小程序框架本身底层实现的一些技术细节吧，让我们从小程序的运行机制来深度了解小程序。 小程序是基于WEB规范，采用HTML,CSS和JS等搭建的一套框架，微信官方给它们取了
|
概述 作为一名前端开发，如果你还停留在应用开发层面，那你就OUT了，快来跟我一起探讨下小程序框架本身底层实现的一些技术细节吧，让我们从小程序的运行机制来深度了解小程序。 小程序是基于WEB规范，采用HTML,CSS和JS等搭建的一套框架，微信官方给它们取了一个很牛逼的名字：WXML,WXSS，但本质上还是在整个WEB体系之下构建的。 WXML，个人猜测在取这个名字的是微信的Xml，说到底就是xml的一个子集。WXML采用微信自定义的少量标签WXSS，大家可以理解为就是自定义的CSS。实现逻辑部分的JS还是通用的ES规范，并且runtime还是Webview（IOS WKWEBVIEW, ANDROID X5）。 小程序打包 开发完成后，我们就可以通过这里可视化的按钮，点击直接打包上传发布，审核通过后用户就可以搜索到了。 那么打包怎么实现的呢？ 这就涉及到这个编辑器的实现原理和方式了，它本身也是基于WEB技术体系实现的，nwjs+react，nwjs是什么：简单是说就是node+webkit，node提供给我们本地api能力，而webkit提供给我们web能力，两者结合就能让我们使用JS+HTML实现本地应用程序。 既然有nodejs，那上面的打包选项里的功能就好实现了。 ES6转ES5：引入babel-core的node包 CSS补全：引入postcss和autoprefixer的node包（postcss和autoprefixer的原理看这里） 代码压缩：引入uglifyjs的node包 注：在android上使用的x5内核，对ES6的支持不好，要兼容的话，要么使用ES5的语法或者引入babel-polyfill兼容库。 打包后的目录结构 小程序打包后的结构如下： 所有的小程序基本都最后都被打成上面的结构 1、WAService.js 框架JS库，提供逻辑层基础的API能力 2、WAWebview.js 框架JS库，提供视图层基础的API能力 3、WAConsole.js 框架JS库，控制台 4、app-config.js 小程序完整的配置，包含我们通过app.json里的所有配置，综合了默认配置型 小程序架构 微信小程序的框架包含两部分View视图层、App Service逻辑层，View层用来渲染页面结构，AppService层用来逻辑处理、数据请求、接口调用，它们在两个进程（两个Webview）里运行。 视图层和逻辑层通过系统层的JSBridage进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。 小程序架构图： 小程序启动时会从CDN下载小程序的完整包，一般是数字命名的,如：_-2082693788_4.wxapkg 小程序技术实现 小程序的UI视图和逻辑处理是用多个webview实现的，逻辑处理的JS代码全部加载到一个Webview里面，称之为AppService，整个小程序只有一个，并且整个生命周期常驻内存，而所有的视图（wxml和wxss）都是单独的Webview来承载，称之为AppView。所以一个小程序打开至少就会有2个webview进程，正式因为每个视图都是一个独立的webview进程，考虑到性能消耗，小程序不允许打开超过5个层级的页面，当然同是也是为了体验更好。 1、日志组件Reporter封装 2、wx对象下面的api方法 3、全局的App,Page,getApp,getCurrentPages等全局方法 4、还有就是对AMD模块规范的实现 然后整个页面就是加载一堆JS文件，包括小程序配置config，上面的WAService.js（调试模式下有asdebug.js），剩下就是我们自己写的全部的js文件，一次性都加载。 （编辑：PHP编程网 - 黄冈站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330482号