微信小程序
说到引爆2017的前端话题“微信小程序”当之无愧。微信小程序有着可以不需要下载安装、可以快捷传播和获取、出色使用体验的特点被腾讯寄于连接用户与服务网站关键字优化被腾讯寄于连接用户与服务实现应用“触手可及”的梦想的希望。
从技术的角度看其本质是一款基于微信的web离线包微信开放平台提供了各式各样的动画和API使得小程序的界面和过渡动画也更加美观、原生。用户在小程序里即用即走不用考虑内存seo诊断分析工具不用考虑内存硬件容量等问题适合广大低频APP。
走进小程序
1.小程序的技术栈
我们已经了解了小程序的产品定位再看看小程序技术层面的问题。为了开发小程序小程序对广大开发者提供了WXMLWXSS和高度封装的WXAPI。
WXML（WeiXin Markup Language）是框架设计的一套标签语言结合基础组件、事件系统可以构建出页面的结构。
WXSS（WeiXin Style Sheets）是一套样式语言用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。
WXAPI是微信原生 API可以方便的调起微信提供的能力如获取用户信息本地存储支付功能等。
同时框架为开发者提供了一系列基础组件开发者可以通过组合这些基础组件进行快速开发。
什么是基础组件：
组件是视图层的基本组成单元。
组件自带一些功能与微信风格的样式。
一个组件通常包括开始标签和结束标签属性用来修饰这个组件内容在两个标签之内。
比如说微信提供了视图容器<view>可滚动视图区域<scroll-view>滑块视图容器<swiper>将原本开发者熟悉的HTML标签做了封装直接用标签可以实现以前需要引入插件才能实现的滚动或滑块功能。这类高度封装的标签还有滚动选择器<picker>可以用一个标签实现普通选择器时间选择器日期选择器。可谓是十分的方便快捷。
在JS封装方面由于框架并非运行在浏览器中所以 JavaScript 在 web 中一些能力都无法使用如 documentwindow 等。微信的技术架构让我们不再需要直接调用这些习以为常的浏览器对象用他们的一套技术方案就可以方便快捷的实现原本复杂的逻辑。他们将所有的浏览器对象隐藏只对开发者提供一个名为wx的对象提供了全面的诸如网络、媒体播放、文件上传、数据缓存、位置、设备信息、界面交互、登录、支付、模版消息等能力。没有了cookie的使用本地缓存相关只能用wx.setStorage（wx.setStorageSync）等api可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB。且 localStorage 是永久存储的。
2.小程序的开发设置
对于小程序开发者首先要做的是拿到管理员帐号添加开发者白名单。然后在开发设置页面查看AppID和AppSecret配置服务器域名。第三步下载开发者工具进行代码的开发和上传。
小程序开发工具严格规范开发者每一步都需要扫码验证。同时小程序只支持https请求。
外卖小程序技术架构
按照小程序官方建议的代码框架小程序的文件结构包含一个描述整体程序的 app 和多个描述各自页面的 page。
app.js —— 小程序逻辑
app.json —— 小程序公共设置。（我们可以对微信小程序进行全局配置seo诊断分析工具小程序的文件结构包含一个描述整体程序的 app 和多个描述各自页面的 page。
app.js —— 小程序逻辑
app.json —— 小程序公共设置。（我们可以对微信小程序进行全局配置决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。）
app.wxss —— 小程序公共样式表
小程序的逻辑结构被微信分为了两个层。他们是这样描述的：
逻辑层将数据进行处理后发送给视图层seo诊断分析工具决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。）
app.wxss —— 小程序公共样式表
小程序的逻辑结构被微信分为了两个层。他们是这样描述的：
逻辑层将数据进行处理后发送给视图层同时接受视图层的事件反馈。
这和我们当前使用的MVVM框架vue类似。但是不完全一样小程序提供的框架严格禁止对dom的操作。
而外卖这边在构建小程序技术框架的时候加入了业务技术架构如下：
pages— —外卖页面page
components— —可以组成页面page的通用代码块
assets— —外卖页面引入的静态资源库
business— —外卖业务公共逻辑
utils— —外卖业务需要的工具集
adapter— —统一提供向下微信WXAPI访问
service— —统一提供向上服务端接口访问
mock— —统一提供本地的数据模拟
探索一之生命周期
1.小程序的生命周期
微信统一提供一个App() 函数用来注册一个小程序。接受一个 object 参数其指定小程序的生命周期函数等。