【移动应用开发技术】小程序的开发原理_第1页
【移动应用开发技术】小程序的开发原理_第2页
【移动应用开发技术】小程序的开发原理_第3页
【移动应用开发技术】小程序的开发原理_第4页
【移动应用开发技术】小程序的开发原理_第5页
已阅读5页,还剩4页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

【移动应用开发技术】小程序的开发原理

这篇文章主要介绍小程序的开发原理,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!小程序是基于WEB规范,采用HTML,CSS和JS等搭建的一套框架,微信官方给它们取了一个非常牛逼的名字:WXML,WXSS,但本质上还是在整个WEB体系之下构建的。WXML,个人推測在取这个名字的是微信的Xml,说究竟就是xml的一个子集。WXML采用微信自己定义的少量标签WXSS,大家能够理解为就是自己定义的CSS。实现逻辑部分的JS还是通用的ES规范。而且runtime还是Webview(IOSWKWEBVIEW,ANDROIDX5)。小程序小程序文件夹结构一个完整的小程序主要由下面几部分组成:一个入口文件:app.js一个全局样式:app.wxss一个全局配置:app.json页面:pages下。每一个页面再按文件夹划分。每一个页面4个文件视图:wxml,wxss逻辑:js。json(页面配置,不是必须)注:pages里面还能够再依据模块划分子文件夹,孙子文件夹。仅仅须要在app.json里注冊时填写路径即可。小程序打包开发完毕后。我们就能够通过这里可视化的button。点击直接打包上传公布,审核通过后用户就能够搜索到了。相关那么打包怎么实现的呢?这就涉及到这个编辑器的实现原理和方式了。它本身也是基于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里的全部配置,综合了默认配置型5、app-service.js我们自己的JS代码,全部打包到这个文件6、frame.html小程序视图的模板文件,全部的页面都使用此载入渲染。且全部的WXML都拆解为JS实现打包到这里7、pages全部的页面。这个不是我们之前的wxml文件了,主要是处理WXSS转换,使用js插入到header区域。小程序架构微信小程序的框架包括两部分View视图层、AppService逻辑层。View层用来渲染页面结构,AppService层用来逻辑处理、数据请求、接口调用。它们在两个进程(两个Webview)里执行。视图层和逻辑层通过系统层的JSBridage进行通信,逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发的事件通知到逻辑层进行业务处理。小程序架构图:小程序启动时会从CDN下载小程序的完整包。通常是数字命名的,如:_-2082693788_4.wxapkg小程序技术实现小程序的UI视图和逻辑处理是用多个webview实现的,逻辑处理的JS代码全部载入到一个Webview里面,称之为AppService,整个小程序仅仅有一个。而且整个生命周期常驻内存,而全部的视图(wxml和wxss)都是单独的Webview来承载,称之为AppView。所以一个小程序打开至少就会有2个webview进程,正式由于每一个视图都是一个独立的webview进程,考虑到性能消耗,小程序不同意打开超过5个层级的页面,当然同是也是为了体验更好。AppService能够理解AppService即一个简单的页面,主要功能是负责逻辑处理部分的执行,底层提供一个WAService.js的文件来提供各种api接口,主要是下面几个部分:消息通信封装为WeixinJSBridge(开发环境为window.postMessage,IOS下为WKWebview的window.webkit.messageHandlers.invokeHandler.postMessage。android下用WeixinJSCore.invokeHandler)1、日志组件Reporter封装2、wx对象下面的api方法3、全局的App,Page,getApp,getCurrentPages等全局方法4、还有就是对AMD模块规范的实现然后整个页面就是载入一堆JS文件,包括小程序配置config,上面的WAService.js(调试模式下有asdebug.js)。剩下就是我们自己写的全部的js文件,一次性都载入。在开发环境下1、页面模板:app.nw/app/dist/weapp/tpl/appserviceTpl.js2、配置信息,是直接写入一个js变量。__wxConfig。3,其它配置线上环境而在上线后是应用部分会打包为2个文件,名称app-config.json和app-service.js,然后微信会打开webview去载入。线上部分应该是微信自身提供了对应的模板文件,在压缩包里没有找到。1、WAService.js(底层支持)2、app-config.json(应用配置)3、app-service.js(应用逻辑)然后执行在JavaScriptCore引擎里面。AppView这里能够理解为h6的页面。提供UI渲染,底层提供一个WAWebview.js来提供底层的功能,详细例如以下:1、消息通信封装为WeixinJSBridge(开发环境为window.postMessage,IOS下为WKWebview的window.webkit.messageHandlers.invokeHandler.postMessage。android下用WeixinJSCore.invokeHandler)2、日志组件Reporter封装3、wx对象下的api。这里的api跟WAService里的还不太一样,有几个跟那边功能差点儿相同,可是大部分都是处理UI显示相关的方法4、小程序组件实现和注冊5、VirtualDOM,Diff和RenderUI实现6、页面事件触发在此基础上,AppView有一个html模板文件,通过这个模板文件载入详细的页面。这个模板主要就一个方法,$gwx,主要是返回指定page的VirtualDOM,而在打包的时候,会事先把全部页面的WXML转换为ViirtualDOM放到模板文件中,而微信自己写了2个工具wcc(把WXML转换为VirtualDOM)和wcsc(把WXSS转换为一个JS字符串的形式通过style标签append到header里)。Service和View通信使用消息publish和subscribe机制实现两个Webview之间的通信,实现方式就是统一封装一个WeixinJSBridge对象。而不同的环境封装的接口不一样。详细实现的技术例如以下:windows环境通过window.postMessage实现(使用chrome扩展的接口注入一个contentScript.js。它封装了postMessage方法,实现webview之间的通信。而且也它通过chrome.runtime.connect方式,也提供了直接操作chromenative原生方法的接口)发送消息:window.postMessage(data,‘*’);。//data里指定webviewID接收消息:window.addEventListener(‘message’,messageHandler);//消息处理并分发,相同支持调用nwjs的原生能力。在contentScript里面看到一句话。证实了appservice也是通过一个webview实现的,实现原理上跟view一样,仅仅是处理的业务逻辑不一样。'webframe'===b?postMessageToWebPage(a):'appservice'===b&&postMessageToWebPage(a)IOS通过WKWebview的window.webkit.messageHandlers.NAME.postMessage实现微信navite代码里实现了两个handler消息处理器:invokeHandler:调用原生能力publishHandler:消息分发Android通过WeixinJSCore.invokeHanlder实现,这个WeixinJSCore是微信提供给JS调用的接口(native实现)invokeHandler:调用原生能力publishHandler:消息分发微信组件在WAWebview.js里有个对象叫exparser。它完整的实现小程序里的组件,看详细的实现方式,思路上跟w3c的webcomponents规范神似,可是详细实现上是不一样的,我们使用的全部组件,都会被提前注冊好,在Webview里渲染的时候进行替换组装。exparser有个核心方法:regiisterBehavior:注冊组件的一些基础行为,供组件继承registerElement:注冊组件,跟我们交互接口主要是属性和事件组件触发事件(带上webviewID),调用WeixinJSBridge的接口,publish到native。然后native再分发到AppService层指定webviewID的Page注冊事件处理方法。总结小程序底层还是基于Webview来实现的。并没有发明创造新技术,整个框架体系。比較清晰和简单,基于Web规范,保证现有技能价值的最大化,仅仅需了解框架规范即可使用已有Web技术进行开发。易于理解和开发。MSSM:对逻辑和UI进行了全然隔离,这个跟当前流行的react,agular

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论