微信小程序框架解析课件

微信小程序框架解析,微信小程序框架解析,CONTENTS,01,小程序介绍和演示,02,小程序架构,03,小程序,视图,层,04,小程序,逻辑,层,05,小程序开发,经验,CONTENTS01 小程序介绍和演示02 小程序架,小程序介绍,小程序介绍,小程序的特点,类,WEB,不是,HTML5,媲美原生操作体验,即,用,即,走,，随手可得,拥有离线能力,基于微信跨平台,小程序的特点类WEB 不是HTML5媲美原生操作体验即用即走,小程序演示,企鹅电,竞小程序,体验,小程序演示企鹅电竞小程序体验,为什么那么快,Native,预先加载一个,WebView,当打开指定页面时，无需加载额外资源直接渲染,返回显示历史,View,退出小程序，,View,状态不销毁,Page,Frame,common lib,user common js,为什么那么快Native预先加载一个WebViewPage,小,程序入口,扫码进入小程序,搜索小程序,发现,-,小程序,小程序发送,到,桌面（,android,）,小程序入口扫码进入小程序,小程序架构,小程序架构,小,程序架构,View,（,视图层,）,Page,Page,Page,W,XML,WXSS,App,Service,（逻辑层）,Manager,API,Native,（系统层）,JSBridge,微信能力,离线存储,网络请求,Data,Event,Data,Event,小程序架构View（视图层）PagePagePageWXML,小,程序架构,View,App Service,CDN,Web Server,Data,Event,Data,Event,In WeChat,Storge,Init request,Package,Ajax request,JSON Data,Network,小程序架构ViewApp ServiceCDNWeb Ser,View(,页面视图,),View(页面视图),View-WXML,支持数据绑定,支持逻辑算术、运算,支持模板、引用,支持添加事件（,bindtap,）,WXML,（,WeiXin Markup Language,）,WXML,JS,Virtual,DOM,DOM Tree,Compiler,Data,Virtual DOM,View-WXML支持数据绑定WXML（WeiXin M,View-WXSS,支持大部分,CSS,特性,添加尺寸单位,rpx,，可根据屏幕宽度自适应,使用,import,语句可以导入外联样式,表,不,支持多层选择器,-,避免被组件内结构破坏,WXSS(WeiXin Style Sheets,),WXSS,JS,CSS,Compiler,Width,，,DPR,View-WXSS支持大部分CSS特性WXSS(WeiX,View,WXSS,Selectors,选择器,样例,样例描述,.class,.intro,选择所有拥有,class=intro,的组件,#id,#firstname,选择拥有,id=firstname,的组件,element,view,选择所有,view,组件,element,element,view,checkbox,选择所有文档的,view,组件和所有的,checkbox,组件,:after,view:after,在,view,组件后边插入内容,:before,view:before,在,view,组件前边插入内容,View WXSS Selectors选择器样例样例描述,View,-Component,大类,细分,WXML,HTML,视图容器,普通视图容器,view,div、ul、li、article、section,滚动视图,scroll-view,滑块视图,swiper,基础内容,文本,text,span、em、p,图标,icon,span、em、i,进度条,progress,div,链接、导航,链接、导航,navigator,a,表单,按钮,button,button、input,单选,radio,input,多选,checkbox,input,表单,form,form,输入框,input,input,改进表单可用性,label,label,滚动选择器,picker,select,开关选择器,switch,input、div,操作反馈,底部菜单,action-sheet,div、ul,弹窗,modal,div,toast,toast,div,加载,loading,img、span、div,媒体,图片,image,img,音频,audio,audio,视频,video,video,地图,地图,map,map,画布,画布,canvas,canvas,View-Component大类细分WXMLHTML视图,View,-Component,小程序的组件基于,Web Component,标准,使用,Polymer,框架实现,Web Component,View-Component小程序的组件基于Web Co,View-Native Component,Native,组件层在,WebView,层之上,View-Native ComponentNative组,App Service(,逻辑层,),App Service(逻辑层),App Service,逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈,1,、,App(),小程序的,入口；,Page,(),页面的,入口,3,、提供,丰富的,API,，如微信用户数据，扫一扫，支付等微信特有能力。,4,、每个,页面有独立的作用域，并提供模块化能力。,5,、,数据绑定、事件分发、生命周期管理、路由管理,运行环境,IOS-JSCore,Android-X5 JS,解析器,DevTool-nwjs Chrome,内核,App Service逻辑层将数据进行处理后发送给视图层，同,App Service-Binding,App Service-Binding,App Service-Life Cylce,Native,Launch,onLaunch,App Service,View,init,Page,init,Render,onLoad,onShow,onReady,Handler,User Event,Event,Notify,Send init Data,Re-Render,Send Data,New View,New Page,onHide,onShow,Route,Route,App Service-Life CylceNative,App Service-API,API,通过,JSBridge,和,Native,进行通信,分类,名称,API,网络,发起请求,request,上传下载,uploadFile/downloadFile,WebSocket,connectSocket/onSocketOpen/onSocketError/sendSocketMessage/onSocketMessage/closeSocket/onSocketClose,媒体,图片,chooseImage/previewImage/getImageInfo,视频,chooseVideo,音频,playVoice/pauseVoice/stopVoice,录音,startRecord/stopRecord,文件,saveFile/getSavedFileList/getSavedFileInfo/removeSavedFile,数据,数据缓存,setStorage/getStorage/removeStorage/clearStorage,位置,获取位置,getLocation,查看位置,openLocation,设备,网络状态,getNetworkType,系统信息,getSystemInfo,重力感应,onAccelerometerChange,罗盘,onCompassChange,拨打电话,makePhoneCall,界面,Canvas,drawCanvas/drawCanvas/canvasToTempFilePath,动画,createAnimation,导航、设置导航条,navigateTo/redirectTo/navigateBack,交互反馈,showToast/showModal/showActionSheet,开放接口,登录,login,用户信息,getUserInfo,微信支付,requestPayment,模板消息,App Service-APIAPI通过JSBridge,App Service-Router,navigateTo(OBJECT,),保留当前页面，跳转到应用内的某个页面，,使用,navigateBack,可以返回到原页面。页面路径只能是五层,redirectTo(OBJECT,),关闭当前页面，跳转到应用内的某个页面,。,navigateBack(OBJECT,),关闭当前页面，返回上一页面或多级页面。可通过,getCurrentPages(),获取当前的页面栈，决定需要返回几层,。,App Service-RouternavigateTo,小,程序开发经验,小程序开发经验,小程序可以借鉴的优点,1,、提前新建,WebView,，准备新页面渲染。,2,、,View,层和逻辑层分离，通过数据驱动，不直接操作,DOM,。,3,、使用,Virtual,DOM,，进行局部更新。,4,、全部使用,https,，确保传输中安全。,5,、前端组件化开发。,6,、加入,rpx,单位，隔离设备尺寸，方便开发。,小程序可以借鉴的优点1、提前新建WebView，准备新页面渲,小,程序存在的问题,1,、小程序仍然使用,WebView,渲染，并非原生渲染,2,、需要独立开发，不能在非微信环境运行。,3,、开发者不可以扩展新组件。,4,、服务端,接口返回的头无法执行，比如：,Set-Cookie,。,5,、依赖,浏览器环境的,js,库不能使用，因为是,JSCore,执行的，没有,window,、,document,对象,。,6,、,WXSS,中无法使用本地（图片、字体等）。,7,、,WXSS,转化成,js,而不是,css,，为了兼容,rpx,。,8,、,WXSS,不支持级联选择器。,9,、,小程序无法打开页面，无法拉起,APP,。,小程序存在的问题1、小程序仍然使用WebView渲染，并非原,脱离微信的“小程序”：,PWA,渐进式应用,PWA,-Progressive Web App,脱离微信的“小程序”：PWA 渐进式应用PWA-Prog,PWA,特点,渐进增强,-,支持的新特性的浏览器获得更好的体验，不支持的保持原来的体验。,离线访问,-,通过,S,ervice Workers,可以在离线或者,网速差的,环境下工作。,类原生应用,-,使用,app shell,model,做到原生,应用般的,体验。,可安装,-,允许用户保留对他们有用的应用在主屏幕上，不需要通过应用商店。,容易分享,-,通过,URL,可以轻松分享应用,。,持续更新,-,受益于,service worker,的更新进程，应用能够始终保持更新。,安全,-,通过,HTTPS,来提供服务来防止网络窥探，保证内容不被篡改。,可搜索,-,得益于,W3C manifests,元数据和,service worker,的登记，让搜索引擎能够找到,web,应用。,再次访问,-,通过消息推送等特性让用户再次访问变得容易。,PWA 特点渐进增强-支持的新特性的浏览器获得更好的体验,PWA-,Web,App Manifest,使,Web,更,像,Native,Web App Manifest,以,JSON,的,格式定义,Web,应用的相关,配置,（,应用,名称、图标或图像连接、启动,URL,、自定义特性、启动默认配置、全屏设置,等）。,PWA-Web App Manifest使Web更像Na,PWA-,Serv