微信小程序框架解析

《微信小程序框架解析》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、微信小程序框架解析hongweiqu(渠宏伟)CONTENTS01小程序介绍和演示02小程序架构03小程序视图层04小程序逻辑层05小程序开发经验小程序介绍小程序的特点类WEB不是HTML5媲美原生操作体验即用即走，随手可得拥有离线能力基于微信跨平台小程序演示企鹅电竞小程序体验为什么那么快Native预先加载一个WebView当打开指定页面时，无需加载额外资源直接渲染返回显示历史View退出小程序，View状态不销毁PageFramecommonlibusercommonjs小程序入口扫码进入小程序搜索小程序发现->小程序小程序发送

2、到桌面（android）小程序架构小程序架构View（视图层）PagePagePageWXMLWXSSAppService（逻辑层）ManagerAPINative（系统层）JSBridge微信能力离线存储网络请求…DataEventDataEvent小程序架构ViewAppServiceCDNWebServerDataEventDataEventInWeChatStorgeInitrequestPackageAjaxrequestJSONDataNetworkView(页面视图)View-WXML支持数据绑定支持逻辑算术、运算支持

3、模板、引用支持添加事件（bindtap）WXML（WeiXinMarkupLanguage）WXMLJSVirtualDOMDOMTreeCompilerDataVirtualDOMView-WXSS支持大部分CSS特性添加尺寸单位rpx，可根据屏幕宽度自适应使用@import语句可以导入外联样式表不支持多层选择器-避免被组件内结构破坏WXSS(WeiXinStyleSheets)WXSSJSCSSCompilerWidth，DPRView–WXSSSelectors选择器样例样例描述.class.intro选择所有拥有class=

4、"intro"的组件#id#firstname选择拥有id="firstname"的组件elementview选择所有view组件element,elementview,checkbox选择所有文档的view组件和所有的checkbox组件::afterview::after在view组件后边插入内容::beforeview::before在view组件前边插入内容View-Component大类细分WXMLHTML视图容器普通视图容器viewdiv、ul、li、article、section……滚动视图scroll-view滑块视

5、图swiper基础内容文本textspan、em、p……图标iconspan、em、i……进度条progressdiv……链接、导航链接、导航navigatora表单按钮buttonbutton、input单选radioinput多选checkboxinput表单formform输入框inputinput改进表单可用性labellabel滚动选择器pickerselect开关选择器switchinput、div……操作反馈底部菜单action-sheetdiv、ul……弹窗modaldiv……toasttoastdiv……加载loa

6、dingimg、span、div……媒体图片imageimg音频audioaudio视频videovideo地图地图mapmap画布画布canvascanvasView-Component小程序的组件基于WebComponent标准使用Polymer框架实现WebComponentView-NativeComponentNative组件层在WebView层之上