一、小程序介绍1、小程序特点2、小程序演示1.

视频地址：https://v.qq.com/x/page/w0353d7co6y.html

3、小程序为什么那么快2.

PageFrame

3.

Native预先额外加载一个WebView当打开指定页面时，用默认数据直接渲染，请求数据回来时局部更新返回显示历史View退出小程序，View状态不销毁

4、小程序入口4.

扫码进入小程序

5.

搜索小程序

6.

小程序发送到桌面(Android)

7.

发送给朋友

二、小程序架构8.

微信小程序的框架包含两部分View视图层、AppService逻辑层，View层用来渲染页面结构，AppService层用来逻辑处理、数据请求、接口调用，它们在两个线程里运行。

9.

视图层使用WebView渲染，逻辑层使用JSCore运行。

10.

视图层和逻辑层通过系统层的JSBridage进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。

11.

小程序启动时会从CDN下载小程序的完整包

三、View(页面视图)12.

视图层由WXML与WXSS编写，由组件来进行展示。

13.

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

1、View–WXML14.

WXML（WeiXinMarkupLanguage）

15.

支持数据绑定

16.

支持逻辑算术、运算

17.

支持模板、引用

18.

支持添加事件（bindtap）

19.

wxml编译器：wcc把wxml文件转为js执行方式：wccindex.wxml

2、View–WXSS20.

WXSS(WeiXinStyleSheets)

21.

支持大部分CSS特性

22.

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

23.

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

24.

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

25.

wxss编译器：wcsc把wxss文件转化为js执行方式：wcscindex.wxss

3、View–WXSSSelectors26.

WXSS目前支持如下选择器：

4、View–Component27.

小程序提供了一系列组件用于开发业务功能，按照功能与HTML5的标签进行对比如下：

28.

小程序的组件基于WebComponent标准

29.

使用Polymer框架实现WebComponent

5、View–NativeComponent30.

目前Native实现的组件有canvas/video/map/textarea/

31.

Native组件层在WebView层之上

四、AppService(逻辑层)32.

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

33.

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

34.

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

35.

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

36.

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

37.

运行环境

38.

IOS–JSCore

39.

Android–X5JS解析器

40.

DevTool–nwjsChrome内核

1、AppService–Binding41.

数据绑定使用Mustache语法（双大括号）将变量包起来，动态数据均来自对应Page的data，可以通过setData方法修改数据。事件绑定的写法同组件的属性，以key、value的形式，key以bind或catch开头，然后跟上事件的类型，如bindtap,catchtouchstart，value是一个字符串，需要在对应的Page中定义同名的函数。

2、AppService–LifeCylce3、AppService–API42.

API通过JSBridge和Native进行通信

4、AppService–Router43.

navigateTo(OBJECT)

44.

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

45.

redirectTo(OBJECT)

46.

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

47.

navigateBack(OBJECT)

48.

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

五、小程序开发经验1、小程序存在的问题49.

小程序仍然使用WebView渲染，并非原生渲染需要独立开发，不能在非微信环境运行。开发者不可以扩展新组件。服务端接口返回的头无法执行，比如：Set-Cookie。依赖浏览器环境的js库不能使用，因为是JSCore执行的，没有window、document对象。WXSS中无法使用本地（图片、字体等）。WXSS转化成js而不是css，为了兼容rpx。WXSS不支持级联选择器。小程序无法打开页面，无法拉起APP。

50.

小程序不能和公众号重名，于是小程序的名字就成了：自选股+、滴滴出行DiDi。

2、小程序可以借鉴的优点51.

提前新建WebView，准备新页面渲染。View层和逻辑层分离，通过数据驱动，不直接操作DOM。使用VirtualDOM，进行局部更新。全部使用https，确保传输中安全。使用离线能力。前端组件化开发。加入rpx单位，隔离设备尺寸，方便开发。

3、脱离微信的“小程序”：PWA渐进式应用52.

PWA全称是ProgressiveWebApps，译成中文就是渐进式应用，是Google在2015年6月15日提出的概念。ProgressiveWebApps是结合了web和原生应用中最好功能的一种体验。对于首次访问的用户它是非常有利的,用户可以直接在浏览器中进行访问，不需要安装应用。随着时间的推移当用户渐渐地和应用建立了联系，它将变得越来越强大。它能够快速地加载，即使在弱网络环境下，能够推送相关消息,也可以像原生应用那样添加至主屏，能够有全屏浏览的体验。

53.

PWA具有如下特点：

54.

渐进增强–支持的新特性的浏览器获得更好的体验，不支持的保持原来的体验。离线访问–通过serviceworkers可以在离线或者网速差的环境下工作。类原生应用–使用appshellmodel做到原生应用般的体验。可安装–允许用户保留对他们有用的应用在主屏幕上，不需要通过应用商店。容易分享–通过URL可以轻松分享应用。持续更新–受益于serviceworker的更新进程，应用能够始终保持更新。安全–通过HTTPS来提供服务来防止网络窥探，保证内容不被篡改。可搜索–得益于W3Cmanifests元数据和serviceworker的登记，让搜索引擎能够找到web应用。再次访问–通过消息推送等特性让用户再次访问变得容易。

55.

WebAppManifest使Web更像Native

56.

WebAppManifest以JSON的格式定义Web应用的相关配置（应用名称、图标或图像连接、启动URL、自定义特性、启动默认配置、全屏设置等）。

57.

ServiceWorkers增强Web能力

58.

通过ServiceWorks实现资源离线缓存和更新

59.

AppShell提升显示效率

60.

AppShell（应用外壳）是应用的用户界面所需的最基本的HTML、CSS和JavaScript，首次加载后立刻被缓存下来，不需要每次使用时都被下载，而是只异步加载需要的数据，以达到UI保持本地化。