了解微信小程序的技术架构

视图层和逻辑层是分离的，DOM不是通过数据驱动和事件交互直接操作的。

视图层负责呈现页面结构，而逻辑层负责逻辑处理、数据请求、接口调用等。

视图层通过数据和事件与逻辑层通信，逻辑层向视图层提供数据，视图层通过绑定/捕获事件发起交互，供逻辑层处理。

视图由WebView渲染，JS由JSCore (iOS)/X5(安卓)/NMJS (DevTool)渲染分析

JSBridge在上层开发和Native(系统层)之间搭建了一座桥梁，让小程序可以通过API使用原生函数，部分组件由原生组件实现，有着不错的体验。附：浏览器内核理解点击预览。

组件

wxml是微信开发的标记语言，只有其指定的组件(视图、文本、导航器、图像、按钮等)。有关详细信息，请参见文档组件)。

小程序的组件基于网络组件标准。

用聚合物框架实现网络组件

View - Component

目前Native实现的组件包括画布/视频/地图/textarea/

本机组件层位于网络视图层之上。

View - Native Component

支持大多数CSS功能

不支持多层选择器-避免被组件的内部结构损坏。

Style:style接收动态样式，并将在运行时分析它们。请尽量避免将静态样式写入样式，以免影响渲染速度。

view style=' color : { { color } }；'/expand:

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

导入样式：使用@import语句导入外部样式表。

wxss样式表

微信小程序的生命周期分为“应用生命周期”和“页面生命周期”。应用生命周期包括onLaunch、onShow、onHide状态、on launch、on show，打开小程序可以得到相关参数路径、查询、场景、shareTicket、referrerInfo，注册为App({})，一个小程序只有一个App({})。页面生命周期包括onload、onshow、onhide、onready、onnload，onLoad可以在打开当前页面时获取其他页面调用的查询参数，注册为Page({})，每个页面都有且必须有一个Page({})。

如果不清楚，反复查看文档描述：注册程序、注册页面。

生命周期

getcurrentpages():获取当前页面堆栈的实例，并按数组中堆栈的顺序给出，第一个元素作为首页，最后一个元素作为当前页面。提示：不要试图修改页面堆栈，这会导致路由和页面状态错误。

页面的深度最多5层，也就是页面栈最多只能有5页。如果超过，调用导航将无效。因此，需要选择合适的导航模式，及时发布页面。

导航：A-B的页面堆栈是：A-ABredirect: A-B的页面堆栈是：A-B

不同导航模式导致的页面堆栈变化图可以在本文中找到：小程序基础部分的页面路由。

页面栈：页面导航

单向数据绑定：使用小胡子语法(双括号)包装变量。动态数据全部来自对应Page的数据，可以通过setData({})方法修改数据。

View{{ message }}/view事件绑定：其编写方式与组件的属性相同，采用键和值的形式，键以bind或catch开头，然后跟随事件的类型，如bindtap、catchtouchstart，value为字符串，因此需要在对应的Page中定义一个同名的函数，函数参数与组件上的data- field一起添加。

查看数据-param=" value " Bindtap=" show modal "/查看详细说明或查阅文档：注册页面：关注变量和事件，查看图层-WXML-数据绑定，查看图层-WXML-事件。

提醒熟悉vuejs的朋友，应该很容易上手。略读后基本就能看懂文档了。但是需要注意的是，数据不是双向绑定的，变量值需要通过setData({})来改变，事件参数需要通过数据字段传递。在遍历和条件语句中，变量/语句仍然需要携带{{}}等等。简而言之，多读一些文档，避免踩t