引子

大家对小程序肯定都不陌生，日常生活中都在不经意的使用他们，也开发过小程序，大家脑海里的第一印象肯定是微信小程序，今天我跟大家聊得不仅仅是微信小程序。

介绍

小程序是一种不需要下载、安装即可使用的应用，它实现了触手可及的梦想，用户扫一扫或者搜一下就能打开应用，也实现了用完即走的理念，用户不用安装太多应用，应用随处可用，但又无须安装卸载。

微信小程序大家都非常熟悉，那么他为什么叫小程序呢？最初，微信小程序并不叫这个名字，而是叫微信应用号。张小龙2017年9月22日凌晨在朋友圈说，苹果不让叫这个名字，于是微信应用号在正式上线前被迫改名为微信小程序。

小程序家族

按照目前市场的流量情况，可以分为两个梯队，第一梯队是可以享受超级流量的微信小程序、支付宝小程序，第二梯队主要有百度小程序、头条小程序、抖音小程序、QQ 小程序、快应用、360小程序，小程序几乎都是在移动端运行，依附超级应用，只有360小程序比较独特，运行在360 PC 浏览器里。
image.png

小程序发展史

2007年
小程序使用了大量的 HTML5 的方案，它的发展史要追溯到2007年，HTML5 在 W3C 立项，打破了 IE+Flash 垄断的局面，同年也是 iPhone 第一代的发布。

2013年
百度发布了轻应用，通过给 WebView 扩展原生能力，补充 JS API，让 HTML5 应用可以实现更多功能。

2015年
这类业务发展的顶峰，是微信的 JS SDK，微信为它的浏览器内核扩充了大量 JS API，让开发者可以用 JS 调用微信支付、扫码等众多 HTML5 做不到的功能。

这类业务还是有明显的不足点，就是性能和体验，这个不是扩展JS能力可以搞定的。

为了解决这个问题，同年 DCloud 推出了流应用，大家肯定以为微信小程序才是第一个小程序，实际上流应用才是业内第一个小程序。
为了做大生态，DCloud 把这套技术标准，捐献给了 HTML5 中国产业联盟，并推进各家流量巨头接入该标准，开展小程序业务，紧接着360、大众点评、携程、京东加入。

2015年9月 DCloud 向微信团队演示了流应用，期望推进微信团队的加入，但最终微信没有接入联盟标准，而是自己定制了标准。

2017年
1月份微信小程序发布，借助超级应用的流量，小程序走到市场的风口，紧接着9月份支付宝小程序开始入场，2017年开启了小程序元年。

2018年
3月九大手机厂商联合推出快应用，7月百度小程序发布，9月支付宝小程序发布，11月头条小程序发布…

2019年
这一年更多的小程序开始发布，另外大量企业、开发中、资本、运营入场，小程序进来爆发期。

2020年 - 未来
小程序时代已来…
image.png

小程序技术架构

image.png

小程序体验为什么这么好，这主要是跟他的技术架构有关。
**

双线程模式

我们都知道网页一般情况下是单线程运行的，会因为一些资源加载、js执行、css渲染阻塞进程，造成页面卡顿，进程被阻塞的时候，我们是不能进行任何有效交互操作的。

小程序为了避免这种问题，采用了双线性的方式，webview线程、JSCore线程，webview对应的是视图层，只做解析和渲染，JSCore对应的是逻辑层，执行我们编写的逻辑，互相独立，逻辑和视图分离，即使业务逻辑计算非常繁忙，也不会阻塞用户在视图层上的交互。

这样设计同时也带来了明显的坏处：视图层（WebView）中不能运行 JS，而逻辑层 JS 又无法直接修改页面 DOM，数据更新及事件交互只能靠线程间通讯，逻辑层、视图层不是直接通讯的，需要 Native 层中转。

举个栗子：
页面上有个浮标，用户可以在页面上拖动，这个时候会发生什么事情呢？
当用户进行拖动的时候，拖动事件先传递到Native层，Native层再转发给JSCore进程，进行位置计算，然后把结果通过 Natice层传递给 Webview线程 进行渲染。通信一次总共要经过4个步骤，还是比较耗时的。

大家想象一下，这个浮标被频繁拖动会出现什么问题呢？
**
即使每一次微小的拖动，也将是一次通信，所以拖动将会变得卡顿。

用户拖动的过程中，对应事件的回调触发是非常频繁的，每次回调都需要 4 个步骤的通讯过程，高频率回调导致高频繁的通讯，极有可能导致页面卡顿或抖动。

所以官方建议尽量少调用setData（调一次触发一次通信），减少数据更新的频率，一些场景里面尽量用原生组件。

为什么使用混合模式

再来看下视图层，包含 web 组件、原生组件两种，也就是说小程序是原生 +Web 混合渲染的模式。
那这么渲染有什么优势呢？
小程序原生组件主要有：input、textarea、map、camera、live-player、live-pusher、video、canvas，除了这些，其他的都是 web 组件。
所以：

  1. web 组件可以更方便我们去编写页面结构，提升我们的开发效率
  2. 混合的原生组件，体验好，脱离 webview，渲染更快
  3. 享受原生化的能力，比如 video 原生组件 全屏后支持滑动控制（声音、进度、亮度等），map 原生组件拥有更流畅的双指缩放、位置拖动…

探索

沉淀解决方案

image.png

web-view和小程序通信

web-view嵌入的h5页面，一顿操作后可能需要返回到特定的小程序页面，或者需要向小程序传递操作数据，具体方案查看官方文档

web-view支付方案

web-view嵌入的h5页面，有可能涉及到支付，比如极速问诊下单后会跳到收银台，但是h5收银台并不能唤起微信支付或小程序支付，所以需要在下单后回跳到小程序页面，并带上相关订单参数，在原生小程序页面请求支付接口，并生成对应的支付参数，再调用小程序的支付API完成支付流程。

分享到朋友圈

小程序不支持直接分享到朋友圈，需要先生成小程序码海报，图片保存后再分享到朋友圈

获取手机号码

参考 官方文档

长安保存图片

image.png

小程序页面本身不支持长按图片出现【发送给朋友，收藏，保存图片】ActionSheet，仅webview里的图片支持。
在小程序里可以放置保存到相册的按钮，官方文档
另外用wx.previewImage预览，支持长按出现以上功能菜单

小程序里关注公众号

使用条件

  • 通过扫描二维码打开小程序
  • 微信聊天顶部下拉“最近使用”打开小程序

使用方法：参考 官方文档

H5页面打开小程序

  1. H5页面不能直接打开小程序，可以在公众号文章里嵌入小程序
  2. 可以在H5页面里放小程序二维码，引导用户打开
  3. 小程序webview里的H5页面可以打开当前小程序的页面
  4. 公众号菜单栏可配置小程序

    打开另一个小程序

参考 官方文档

唤醒App

小程序button元素按钮open-type设置为launchApp 再设置app-parameter 即可，微信文档
image.png