微信的小程序设计原理 第1篇
在传统网页开发中，我们可以使用 CSS 的display、position、float等属性来实现页面布局，但是在小程序中需要考虑各种终端的尺寸适配，如果还是使用定位、浮动这类布局的话很难实现不同终端的适配，缺乏灵活性。在微信小程序中，建议使用flex弹性盒子布局。如果小程序需要兼容IOS8以下版本的话，需要开启样式自动补全，在小程序菜单栏中选择设置、项目设置，勾选“上传代码时样式自动补全”选项。
flex弹性盒子布局提供了一种灵活的布局模型，使容器能通过改变里面项目的高宽、顺序，来对可用空间实现最佳的填充，方便适配不同大小的内容区域。flex不单是一个属性，它包含了一套新的属性集。属性集包括用于设置容器，和用于设置项目两部分。设置容器的属性如表2所示。
设置项目的属性如表3所示。
flex在页面布局设计中应用非常广泛，例如在不固定高度的情况下，只需要在容器中设置flex的排列方向和主轴的对齐方式，即可实现内容不确定下的垂直居中效果，示例代码如例11所示。
【例11】flex设置容器内容垂直居中
微信小程序中常用的界面交互行为包括屏幕触摸反馈、弹框提示、界面滚动等。由于受到终端设备性能等因素的影响，频繁的用户与小程序交互的操作会导致系统延迟，操作的反馈耗时较长的情况，我们在开发小程序时应该尽可能的考虑到用户的使用体验。
一般在用户触摸某个事件按钮或view区域时，会改变对应区域的颜色，例如用户手指触摸view区域时，将该view区域的底色设置成浅灰色或其他具有明显对比的颜色，效果如图7所示。
图7 可触摸区域的用户操作反馈效果
这样做的目的就是为用户及时提示触摸的结果，以免用户触摸后不知道结果而反复的触发执行。设置了用户操作的反馈效果，大大提升了用户的使用体验。
除了这种设置区域不同的触发样式外，还有些常用的用户触发效果反馈，例如为button组件设置loading属性，在完成某个操作后弹出Toast提示框等效果。如果使用弹出框作为用户操作后的提示效果，需要在错误提示时明确告知用户具体出现错误的原因，并且需要用户手动关闭弹出框，如有需要的话还会附带下一步操作的引导。
在前后端分离开发的项目中，前端需要通过发送异步请求从服务器获取数据，小程序中也不例外。小程序作为客户端，需要通过宿主环境提供的 () 函数发起网络请求来实现从服务器拉取信息。小程序宿主环境要求request发起的网络请求必须是https协议请求，因此开发者服务器必须提供HTTPS服务的接口，同时为了保证小程序不乱用任意域名的服务， 请求的域名需要在小程序管理平台进行配置，如果小程序正式版使用 请求未配置的域名，在控制台会有相应的报错。
() 方法的参数是一个Object对象，对象中最重要的属性包括：
小程序发出一个HTTPS网络请求，有时网络存在一些异常或者服务器存在问题，在经过一段时间后仍然没有收到网络回包，我们把这一段等待的最长时间称为请求超时时间。小程序request默认超时时间是60秒，一般来说，我们不需要这么长的一个等待时间才收到回包，可能在等待3秒后还没收到回包，就需要给用户一个明确的“服务不可用”的提示。在小程序项目根目录里边的可以指定request的超时时间。
小程序的本地数据缓存能力在实际开发中应用非常广泛，本地数据缓存就是通过小程序将数据存储到当前设备的硬盘上，开发者可以使用本地数据缓存来存储一些服务端非实时的数据，从而提高小程序的渲染速度，减少用户的等待时间。 小程序提供了读写本地数据缓存的接口，通过 读取本地缓存，通过 写数据到缓存，其中Sync后缀的接口表示是同步接口，执行完毕之后会立马返回。小程序宿主环境会管理不同小程序的数据缓存，不同小程序的本地缓存空间是分开的，每个小程序的缓存空间上限为10MB，如果当前缓存已经达到10MB，再通过 写入缓存会触发fail回调。
小程序的本地缓存不仅仅通过小程序这个维度来隔离空间，考虑到同一个设备可以登录不同微信用户，宿主环境还对不同用户的缓存进行了隔离，避免用户间的数据隐私泄露。由于本地缓存是存放在当前设备，用户换设备之后无法从另一个设备读取到当前设备数据，因此用户的关键信息不建议只存在本地缓存，应该把数据放到服务器端进行持久化存储。
移动终端设备不同于PC端，在移动终端没有了PC端的键盘、鼠标等常用的输入设备和一些输出设备，但是移动终端中有很多传感器。而且移动终端屏幕尺寸也比PC端小了很多，所以在移动端屏幕上输入复杂信息的效率会很低。小程序的宿主环境提供了很多操作移动终端设备的能力，从而帮助开发者实现某些特定场景下的高效操作能力，例如扫描二维码、蓝牙连接、GPS定位等能力。
但是有的设备操作能力并不仅仅是为了解决高效输入的问题，更多的是提升用户的使用体验，例如获取设备的网络状态。手机连接网络的方式有2G、3G、4G、5G和wifi，每种连接方式的上传和下载速度有着很大的差异，而且计费方式不同。wifi连接相对于其他的移动网络连接来说，不仅访问速度快，而且不会对用户产生流量费用。用户在使用小程序观看视频或下载体积较大的文档时，为了避免用户耗费太多的数据流量，开发者就需要通过小程序提供的获取网络状态的能力，做出一些更加友好的提示，供用户自行选择。
小程序是以微信为基座的一种应用，在很多场景下都需要获取微信的一些能力，所以小程序的宿主环境就提供了开放微信部分权限的能力，这种开放能力包括：获取微信登录凭证、获取微信用户的基本信息、分享到朋友圈或转发消息、收藏、卡券、发票、生物认证、微信运动等能力。以微信登录为例，开发者在已有的互联网产品中接入小程序时会面临一些与登录状态有关的问题，微信就对小程序开发了微信登录的接口。
微信的小程序设计原理 第2篇
做过小程序的铁汁们应该对这张图不陌生了：
图中过程主要是为了获得微信用户的唯一 openid 与 session_key，之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。
调用 () 获取临时登录凭证 code，并回传到开发者服务器。
调用 接口，换取用户唯一标识 openid 、用户在微信开放平台帐号下的唯一标识 UnionID（若当前小程序已绑定到微信开放平台帐号）和会话密钥 session_key。
微信的小程序设计原理 第3篇
通过学习了小程序的架构原理，我们再来用底层架构的眼光来简单分析一下常见的小程序性能问题是如何产生的。
频繁调用setData()
频繁调用 setData()，这个问题相信已经是很常见的，比如在定时器中调用、在监听页面滚动的钩子中调用，这些场景很容易就会引起小程序的性能问题，容易出现页面卡顿、页面数据更新不及时的情况。
前面在 数据通信机制 中我们讲过小程序是基于双线程的，那就意味着任何在视图层和逻辑层之间的数据传递都是线程间的通信，频繁的去调用 setData()，会使得线程之间一直处于忙碌状态，逻辑层通知到视图层耗时就会上升，视图层收到消息的时候可能已经距离发出的时间超过一定时间了，渲染页面就不够及时了。
庞大的数据量去调用setData()
还是在前面的 数据通信机制 中，我们说过传输的数据需要转换成转换为字符串的形式传递，且通过 JS 脚本的形式去执行，当数据量大时，执行脚本的编译执行时间也会上涨，占用线程。
页面复杂繁多的DOM结构
当一个页面 DOM 结构复杂并且非常多的时候，这必定带来页面显示不及时，页面卡顿，甚至可能会出现页面奔溃的情况，这其中的原因可想而知，是过于 DOM 绘制、计算都是需要时间的，这将使得线程过渡的工作，带来客户端内存占用上升，从而触发系统回收小程序页面。
上面我提到说，对 “逻辑层运行在 JSCore 中” 这句话有点疑问，是因为我在看到表格中列举的逻辑层运行的环境应该是按系统环境区分的才对，那这句话是不是就太笼统了？还是说这句话就是指 IOS 的情况呢？因为是官方文档写的话语，所以我没有直接就否决是写错了，或者单指IOS 的情况。
经过一翻查证，证实其实这句话是没有问题的，要追寻结果的过程，我们需要写了解一下浏览器的大致情况：
浏览器中最核心的部分则是浏览器内核，每个浏览器都有其各自的内核，而对移动领域影响最深的则当属 WebKit。
WebKit 就是一个页面渲染以及逻辑处理引擎，HTML/CSS/JavaScript 经过它的处理，成为可见且可操作的Web页面。
WebKit 由多个重要模块组成
WebKit 由四个部分组成，分别是：
WebKit Embedding API：负责浏览器 UI 与 WebKit 进行交互的部分。
Platform API（WebKit Ports）：让 Webkit 更加方便的移植到各个操作系统、平台上，提供的一些调用Native Library的接口。
WebCore：整个 WebKit 中最核心的渲染引擎。
JavascriptCore：JSCore 是 WebKit 默认内嵌的JS引擎，由苹果使用 C 开发。
我们来重点来关注 JSCore 部分，JSCore 是 WebKit 默认内嵌的JS引擎，之所以说是默认内嵌，是因为很多基于 WebKit 分支开发的浏览器引擎都开发了自家的JS引擎，其中最出名的就是 Chrome的V8 引擎。
V8 引擎，相信前端的小伙伴应该不会很陌生了，既然它是基于 WebKit 的，那底层默认也是内嵌 JSCore 的，而 Android 的逻辑层是运行在 V8 上的。
而 IOS 的浏览器引擎则是 WebKit，内部则就是 JSCore。
最后 开发工具 的逻辑层是运行在 , 上它的官网，看到怎么一段话：
我相信它应该也和 WebKit 扯上关系了。
以上就是微信小程序架构原理基础详解的详细内容
微信的小程序设计原理 第4篇
小程序开发与传统的前端开发有着很大的区别，不管什么类型的前端技术，都是由以下三种技术组成：
小程序虽然与传统的前端开发有所区别，但是也脱离不了前端的固定模式。小程序拥有四种文件类型，分别是：
新建一个小程序就会默认创建index和logs模块，每个模块都以单独的文件夹形式保存。页面文件在微信开发者工具中的效果如图1所示。 图1 首页下的四种文件
除了页面文件对应的模块文件夹之外，小程序还支持将一些工具型js独立保存，通过导入的方式为模块提供功能支持，例如新建小程序中自动创建的utils，效果如图2所示。 图2 utils模块
所有的全局文件都以app命名开头，全局文件内部声明的资源可以作用到所有模块中，效果如图3所示。 图3 小程序应用的全局文件
在过去，开发人员所积累的前端开发经验其实有很大一部分可以继续应用在小程序的开发上，例如小程序和普通网页都需要书写静态标签页面。小程序的样式和普通网页基本相同，而且小程序和普通网页都遵循了JavaScript的ES6标准，很多语法在两个平台都可以一起使用，例如模块的导入导出、箭头函数等。
但是小程序和传统网页开发毕竟还是两种不同的技术，二者之间还是有些许的区别。在普通网页中渲染线程和脚本线程是互斥的，而在小程序中二者不是互斥的。普通网页可以操作DOM和BOM对象，但是小程序的逻辑层运行在JSCore中，无法操作DOM和BOM对象，所以小程序在使用JS选择UI时，就没有父节点、子节点、ID选择器这些概念了。网页开发者需要面对的环境是各式各样的浏览器，在PC端需要面对IE、Chrome、QQ浏览器等，在移动端也需要面对各个系统中的WebView，而小程序开发过程中主要面对的是IOS和Android的微信客户端。目前小程序也支持在微信的PC客户端上运行，所以在开发过程中也需要考虑Windows或Mac环境的UI适配，以及代码兼容性的问题。
WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。虽然在书写方式上WXML和HTML有很多相似之处，但是二者之间的语法结构又有很大的区别，WXML仅能在微信小程序开发工具中预览，而HTML可以在浏览器内预览。传统的HTML标签在WXML中是无法之间使用的，WXML对组件进行了重新封装，为后续的性能优化提供了可能，同时避免开发者写出低质量的代码。
WXML文件以 .wxml 作为后缀，一个完整的 WXML 语句由一段开始标签和结束标签组成，在标签中可以是内容，也可以是其他的WXML语句，这一点上与HTML是一致的。WXML基本语法如例1所示。
【例1】WXML基本语法
WXML的语法校验是非常严格的，要求标签必须是严格闭合的，没有闭合将会导致编译错误。
WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，提升视觉上的效果。WXSS与传统前端开发中的CSS类似，为了更适合小程序开发，WXSS对CSS做了一个补充和扩展，例如尺寸单位、样式导入等。
在WXSS中使用rpx（responsive pixel）作为尺寸单位，可以根据屏幕宽度进行自适应。小程序中的rpx与传统CSS尺寸单位的px是以 1rpx = 进行的换算。
小程序的主要开发语言是JavaScript，开发者使用JavaScript开发业务逻辑以及调用小程序的API，以此来完成业务需求。在大部分开发者看来，JavaScript和ECMAScript是指同一回事，但是从严格意义上来讲，二者之间的意义是完全不同的。ECMAScript是由ECMA国际组织通过ECMA-262标准化的脚本程序设计语言，该标准规定了ECMAScript主要包括脚本语法、数据类型、语句、关键字、操作符以及对象等基本的编程语言规范，而JavaScript是ECMAScript的一种具体实现。理解了这些概念，有助于开发者理解小程序中的JavaScript同浏览器的JavaScript以及Node中的JavaScript之间的区别。
浏览器中的JavaScript是由BOM（浏览器对象模型，全称 Browser Object Model）、DOM（文档对象模型，全称 Document Object Model）以及ECMAScript组成的，对于Web前端开发者来说，应该非常熟悉BOM和DOM这两个对象模型，它使得开发者可以去操作浏览器的一些表现，比如修改URL、修改页面呈现、记录数据等等。
Node中的JavaScript是由NPM、Native模块以及ECMAScript组成的，Node的开发者非常熟悉NPM的包管理工具，通过各种扩展包来快速实现一些功能，同时通过使用一些原生的模块来赋予Node语言本身不具有的能力，例如FS、HTTP、OS等。
小程序的JavaScript是由ECMAScript以及小程序的框架和API来实现的，与浏览器中的JavaScript相比没有BOM和DOM对象，所以类似于jQuery、Zepto这种浏览器类库是无法在小程序中运行起来的，同样的缺少Native模块和NPM包管理的机制。所以这就导致小程序中无法加载原生库，也无法直接使用大部分的NPM依赖包。
JSON（JS对象简谱，全称 JavaScript Object Notation）是一种轻量级的数据交换格式，是基于ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。JSON的语法易于阅读和编写，同时也易于程序解析和生成，是一种理想的网络传输格式，也可以作为项目的配置文件。由此可见，JSON仅是一种数据格式而非编程语言，在小程序中也作为一种重要的配置文件而存在。
JOSN文件作为小程序中的静态配置文件，在小程序运行之前就决定了小程序的一些表现，需要注意的是小程序无法在运行过程中去动态更新JSON配置，如果JSON配置文件的内容发生了更改，需要重新编译当前的项目才能生效。