腾讯专家讲座|微信小程序架构解析！

来源：微信公众号：Coding学院（ID:ke-coding）

目录

一、小程序介绍和演示

二、小程序架构

三、小程序视图层

四、小程序逻辑层

五、小程序开发经验

正文

一、小程序特点

二、小程序架构

三、小程序视图层

1.View - WXML

WXML（WeiXin Markup Language）

支持数据绑定

支持逻辑算术、运算

支持模板、引用

支持添加事件（bindtap）

2.View - WXSS

WXSS(WeiXin Style Sheets)

支持大部分CSS特性

添加尺寸单位rpx，可根据屏幕宽度自适应

使用@import语句可以导入外联样式表

不支持多层选择器-避免被组件内结构破坏

四、小程序逻辑层

逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈

1、App( ) 小程序的入口；Page( ) 页面的入口

3、提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。

4、每个页面有独立的作用域，并提供模块化能力。

5、数据绑定、事件分发、生命周期管理、路由管理

运行环境

IOS - JSCore

Android - X5 JS解析器

DevTool - nwjs Chrome 内核

App Service - Life Cylce

App Service - Router

navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用navigateBack可以返回到原页面。页面路径只能是五层

redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

五、小程序开发经验

小程序可以借鉴的优点

1、提前新建WebView，准备新页面渲染。

2、View层和逻辑层分离，通过数据驱动，不直接操作DOM。

3、使用Virtual DOM，进行局部更新。

4、全部使用https，确保传输中安全。

5、前端组件化开发。

6、加入rpx单位，隔离设备尺寸，方便开发。

小程序存在的问题

1、小程序仍然使用WebView渲染，并非原生渲染

2、需要独立开发，不能在非微信环境运行。

3、开发者不可以扩展新组件。

4、服务端接口返回的头无法执行，比如：Set-Cookie。

5、依赖浏览器环境的js库不能使用，因为是JSCore执行的，没有window、document对象。

6、WXSS中无法使用本地（图片、字体等）。

7、WXSS转化成js 而不是css，为了兼容rpx。

8、WXSS不支持级联选择器。

9、小程序无法打开页面，无法拉起APP。

本期Coding讲堂特邀嘉宾：腾讯前端高级开发工程师 渠宏伟

为你揭开微信小程序的神秘面纱

报名方式：点击文章最下方阅读原文或。