微信小程序框架解析.doc

微信小程序框架解析Softeem杨标一、 小程序介绍和演示微信小程序是国内腾讯公司推出的一款类APP 应用平台，用户和开发者可以在依据腾讯发布的API 文档与微信Web开发者工具进行开发，其程序主要有以下几个特点：1、 类Web的应用程序，但不是HTML52、 即用即走，随手可得3、 拥有离线能力4、 基于微信跨平台5、 媲美原生操作体验如图所示：左图是一个微信小程序的界面。微信小程序采用Native预告加载一个WebView。当打开指定页面时，无需加载额外资源直接渲染，这种操作方式极大的改善了用户的操作体验，达到了原生APP的操作效果。二、 小程序框架上边两个图片可以说明微信小程序的框架结构，微信小程序里面View视图层与AppServer逻辑层分开的，与现在主流的前后端分离开发大同小异，数据通信采用微信API进行异步请求视图层的界面布局采用wxml,视图层的样式控制采用wxss进行，在这里要说明一下，微信小程序里面的wxml与前端里面的HTML似，都是用标签进行布局。而wxss与前端里面的CSS一样，支持CSS3,动画，变幻等新特性，而界面的逻辑控制就是JS（微信后期出了一个wxs，是一个类JS的语言，语法与JS差不多）三、 小程序视图层刚刚在上个章节提到了微信小程序的框架结构，在这个章节，我们主要来看一下视图层的相关介绍。在视图层中，微信的WXML作为标签的布局，它支持数据绑定，输运运算，同时还支持模板引用（template），这些与HTML里面的差不多，唯一有一点区别的就是在事件绑定这一块。在微信的视图层事件绑定时面，微信不事件采用的是bind的策略，与HTML里面的on是不一样的，但同时也支持事件冒泡。微信自己封装了一系列的视图层事件，如bindtap点击，bindlongtap长按，这些事件针对移动端做了进一步的优化，例其能够符合移动端APP的操作习惯而作为界面样式控制的WXSS,它支持大部分的CSS，同时，它新增了一个尺寸单位rpx，这个单位可以根据屏幕的宽度进行自适用，这点是一个很大的进步，它可以使微信小程序在不同的手机屏幕下面进行自适用（这一点在以前的HTML+CSS上面，需要通过vw、rem、em或者媒体查询来进行），同时，可以使用import来导入外部的样式文件，但在这里有一点要说明的就是，WXSS里在，不支持多层选择器，这样就避免了组件的内部样式被污染。在CSS里面，我们常用的选择器有9种，而在微信小程序里面，进行精简了很多，具体我做了个列表，如下：在上图当中，我们可以看出，微信小程序的WXSS支持类选择器，ID选择器，标签选择器，分组选择器以及伪元素选择器，但是去除了CSS时面的兄弟与相邻兄弟选择器，去除了常用的属性选择器。在微信小程序的布局里面，主要用到的标签为view标签，这个标签相当于HTML里面的DIV标签，是一个块级标签，同时，文字标签改为了text这个标签，相当于HTML里面的label或者span等行内标签，下图是微个小程序的标签与普通的HTML标签对比四、 小程序逻辑层前面讲完了小程序的界面神图层，现在来讲讲逻辑层。微信小程序的逻辑层将数据处理以后发送给神力层，同时接受视图层的事件反馈1、上图就是一个微信小程序的逻辑代码，通过这些代码，我们来分析一下：1、 App()是小程序的入口，Page()是页面的入口2、 微信提供了丰富的API，如微信定位，微信扫一扫，微信支付等功能3、 每个页面有独立的作用域，并提供模块化能力在逻辑的代码里面，可以进行数据绑定，事件分发，生命周期管理，跌幅管理等功能上图是微信小程序的生命周期图，微信小程序的页面中,常用的生命周期回调函数有onLoad,onShow,onReady,onHide,具体的执行顺序可看上图。上图为微信小程序部分API列表。微信小程序里面，不同的页面之间进行跳转，微信制定了一些相关的规范，主要有以下几种：1、 navigatoTo(OBJECT)保留当前页面，跳转到应用内的某个页面，使用navigateBack可以返回到原页面，页面路径只能有五层2、 redirectTo(OBJECT)关闭当前页面，跳转到页在内的某个页面3、 navigateBack(OBJECT)关闭当前页面，返回上一级页面或多级页面，可通过getCurrentPages()来获取当前的页面栈，决定返回那一层4、 switchTab(OBJECT)使用该方法，可以切换到tabBar里面的某一个页面，在这里要注意，该方法切换的页面必须是在app.json文件里面的tabBar里面注册过的页面五、 小程序开发经验在开发小程序的过程当中，有一些开发经验，现在给各位介绍一下。小程序可以借鉴的优点：1、 提前新建WebView，准备新页面渲染2、 View层与逻辑分享，通过数据驱动，而不直接操作页面元素3、 使用组件，进行局步更新4、 视图层做到组件化开发5、 加入rpx元素布局，做到自适应小程序存在的问题：1、 小程序仍然使用的是WebView渲染2、 需要特定的开发环境，依赖微信开发工具3、 服务端返回头不能够执行，如set-cookie4、 没有浏览器环境，依赖浏览器的JS无法执行5、 WXSS背景图不能使用本地图片，只能使用网络图片或base64图片公司档案管理制度一、总则1、为加强本公司档案工作，充分发挥档案作用，全面提高档案管理水平，有效地保护及利用档案，为公司发展服务，特制定本制度。2、公司档案，是指公司从事经营、管理以及其他各项活动直接形成的对公司有保存价值的各种文字、图表、声像等不同形式的历史记录。公司档案分为受控档案和非受控档案。3、公文承办部门或承办人员应保证经办文件的系统完整(公文上的各种附件一律不准抽存)。结案后及时归档。工作变动或因故离职时应将经办的文件材料向接办人员交接清楚，不得擅自带走或销毁。二、文件材料的收集管理1、公司指定专人负责文件材料的管理。2、文件材料的收集由各部门或经办人员负责整理，交总经理审阅后归档。3、一项工作由几个部门参与办理的，在工作中形成的文件材料，由主办部门或人员收集，交行政部备案。会议文件由行政部收三、归档范围1、重要的会议材料，包括会议的通知、报告、决议、总结、典型发言、会议记录等。2、本公司对外的正式发文与有关单位来往的文书。3、本公司的各种工作计划、总结、报告、请示、批复、会议记录、统计报表及简报。 4、本公司与有关单位签订的合同、协议书等文件材料。5、本公司职工劳动、工资、福利方面的文件材料。6、本公司的大事记及反映本公司重要活动的剪报、照片、录音、录像等。四、归档要求1、档案质量总的要求是：遵循文件的形成规律和特点，保持文件之间的有机联系，区别不同的价值，便于保管和利用。2、归档的文件材料种数、份数以及每份文件的页数均应齐全完整。3、在归档的文件材料中，应将每份文件的正件与附件、印件与定稿、请示与批复、转发文件与原件，分别立在一起，不得分开，文电应合一归档。4、不同年度的文件一般不得放在一起立卷；跨年度的总结放在针对的最后一年立卷；跨年度的会议文件放在会议开幕年。5、档案文件材料应区别不同情况进行排列，密不可分的文件材料应依序排列在一起，即批复在前，请示在后；正件在前，附件在后；印件在前，定稿在后；其它文件材料依其形成规律或应保持文件之间的密切联系并进行系统的排列。6、案卷封面，应逐项按规定用钢笔书写，字迹要工整、五、档案管理人员职责1、按照 有关规定做好 文件材料的收集、整理、分类、归档等工作。2、按照归档范围、要求，将文件材料按时归档。3、工作人员应当遵纪守法、忠于职守，努力维护公司档案的完整与安全。1、公司档案只有公司内部人员可以借阅，借阅者都要填写借阅单，报主管人员批准后，方可借阅，其中非受控文档的借阅要由部门经理签字