E企盈营销工具技术服务商 热线:4006-838-530

微信小程序实荥经县E企盈小程序现原理浅析

微信小程序实现原理浅析 小程序小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验(官网解释)。小程序是基于WEB规范,采用HTML、CSS和JS等搭建的一套框架,本质就是富单页面web应用。优点:1、方便快捷,即用即走不需要再下载APP 2、速度快、不占内存小程序前端代码存在微信服务器上,在腾讯云端存放,所以无需加载,速度比较快,不占用手机内存3、安全稳定、保密性强小程序需要审核才能发布,通信采用https访问,SSL加密通信,小程序样式代码都封装在微信小程序里面,安全性更高,更稳定4、功能丰富,场景丰富可以调用比H5更多的手机系统功能来进行开发,例如GPS定位、录音、拍视频、重力感应等,能开发更丰富的使用场景5、开发成本低、维护简便同样的功能,做一个APP估计需要十几万甚至几十万,而开发一个小程序,一般几千元就搞定了,维护起来也比较简单方便6、附近定位、入口众多开放的入口比较多,除了通过扫码,发送朋友,搜索,附近等常用入口外,还能与公众号关联,群发文章嵌入,公众号菜单链接等页面渲染方式页面渲染的方式主要有三种:1、web渲染2、Native原生渲染3、web与Native两者掺杂,即Hybrid渲染小程序的呈现形式为第三种。WebViewWebView即网络视图,能加载显示网页,是浏览器内核基础上进行封装后的一个控件,我们可以简单的看作一个可以嵌套到界面上的一个浏览器控件!JsBridge顾名思义就是js和Native之前的桥梁,是js和Native之间的一种通信方式。简单的说,JSBridge就是定义Native和JS的通信,Native只通过一个固定的桥对象调用JS,JS也只通过固定的桥对象调用Native。 小程序目录结构

    .json 后缀的 JSON 配置文件.wxml 后缀的 WXML 模板文件.wxss 后缀的 WXSS 样式文件

4、.js 后缀的 JS 脚本逻辑文件 一个小程序主体部分由三个文件组成,必须放在项目的根目录一个小程序页面由四个文件组成 打包后的目录结构所有的小程序基本都最后都被打成上面的结构 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、page-frame.html 小程序视图的模板文件,所有的页面都使用此加载渲染,且所有的WXML都拆解为JS实现打包到这里7、pages 所有的页面,这个不是我们之前的wxml文件了,主要是处理WXSS转换,使用js插入到header区域。小程序架构微信小程序的框架包含两部分:View视图层、App Service逻辑层,View层用来渲染页面结构,AppService层用来逻辑处理、数据请求、接口开通少女文胸小程序电话:4006-838-530调用,它们在两个进程(两个Webview)里运行。视图层和逻辑层通过系统层的JSBridge进行通信,逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发的事件通知到逻辑层进行业务处理。 小程序技术实现小程序的UI视图和逻辑处理是用多个webview实现的,逻辑处理的JS代码全部加载到一个Webview里面,称之为AppService,整个小程序只有一个,并且整个生命周期常驻内存,而所有的视图(wxml和wxss)都是单独的Webview来承载,称之为AppView。所以一个小程序打开至少就会有2个webview进程,正是因为每个视图都是一个独立的webview进程,考虑到性能消耗,小程序不允许打开超过5个层级的页面,当然同是也是为了体验更好。AppService可以理解AppService即一个简单的页面,主要功能是负责逻辑处理部分的执行,底层提供一个WAService.js的文件来提供各种api接口,主要是以下几个部分:1、 消息通信封装为WeixinJSBridge2、日志组件Reporter封装3、wx对象下面的api方法4、全局的App,Page,getApp,getCurrentPages等全局方法5、还有就是对AMD模块规范的实现然后整个页面就是加载一堆JS文件,包括小程序配置config,上面的WAService.js(调试模式下有asdebug.js),剩下就是我们自己写的全部的js文件,一次性都加载。AppView这里可以理解为h5的页面,提供UI渲染,底层提供一个WAWebview.js来提供底层的功能,具体如下:1、消息通信封装为WeixinJSBridge2、日志组件Reporter封装3、wx对象下的api,这里的api跟WAService里的还不太一样,有几个跟那边功能差不多,但是大部分都是处理UI显示相关的方法4、小程序组件实现和注册5、VirtualDOM,Diff和Render UI实现6、页面事件触发在此基础上,AppView有一个html模板文件,通过这个模板文件加载具体的页面,这个模板主要就一个方法,$gwx,主要是返回指定page的VirtualDOM,而在打包的时候,会事先把所有页面的WXML转换为ViirtualDOM放到模板文件里,而微信自己写了2个工具wcc(把WXML转换为VirtualDOM)和wcsc(把WXSS转换为一个JS字符串的形式通过style标签appe开通真皮包小程序电话:400开通马赛克小程序电话:4006-838-5306-838-530nd到header里)。Service和View通信使用消息publish和subscribe机制实现两个Webview之间的通信,实现方式就是统一封装一个WeixinJSBridge对象,而不同的环境封装的接口不一样 总结小程序底层还是基于Webview来实现的,并没有发明创造新技术,整个框架体系,比较清晰和简单,基于Web规范,保证现有技能价值的最大化,只需了解框架规范即可使用已有Web技术进行开发,易于理解和开发。MSSM:对逻辑和UI进行了完全隔离,这个跟当前流行的react,agular,vue有本质的区别,小程序逻辑和UI完全运行在2个独立的Webview里面,而后面这几个框架还是运行在一个webview里面的。组件机制:引入组件化机制,但是不完全基于组件开发,跟vue一样大部分UI还是模板化渲染,引入组件机制能更好的规范开发模式,也更方便升级和维护。多种节制:不能同时打开超过5个窗口,打包文件不能大于2M等,这些都是为了保证更好的体验。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序实荥经县E企盈小程序现原理浅析
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

模王系统开发

联系我们升级日志

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏