前言

为什么会有小程序？

我们从产品的角度上来讲，小程序最初是在微信中先出现的，那么为什么是在微信中先出现呢，而不是在其他APP中呢，因为微信它是一个超级APP，小程序是这种超级APP发展到一定阶段的必然产物，它是关于未来商业布局与生态相关的产品，它的本质呢，其实是一种载体。它与我们在应用商店下载的APP没有太大区别，无非就是相对封闭一些，而且它是依托于APP的，不能脱离于APP而存在，我们把小程序加载在APP中，能和APP混合起来，产生不一样的价值。小程序是基于某个超级APP的综合生态，可以把公交，地铁，蚂蚁森林，挂号，外卖等一些列功能都覆盖进来，这些小程序的APP成为了对用户更有价值的平台，毕竟谁还不每天起床偷个能量~😄

蚂蚁森林.jpg

一、小程序与WEB区别

小程序分类

以设计流量为载体（微信）
以信息传播流量为载体（今日头条）
以交易属性为载体（支付宝）

小程序特点

触手可及，用完即走

小程序是一种无需下载安装即可使用的应用，能以最低成本触达用户，极大程度上降低了使用门槛。

流量互导，功能补充

小程序依托各平台生态，有线下扫码，分享，搜索等各种入口。帮助各平台做功能上的补充，同时也为平台带来更多流量。

提升体验，媲美原生

小程序采用逻辑和渲染分离的模式，同时部分组件使用native进行渲染，并通过资源管理等方式，帮助小程序加载更快，使用起来更加流畅。

小程序与WEB在技术上的区别

小程序部分组件直接通过原生实现camera、canvas、video、map和textarea等
小程序会在端上做资源的缓存、销毁等，控制小程序的周期，让小程序能够更快速的加载
小程序在架构上将逻辑和渲染进行分离，而WEB是在同一进程中

小程序与WEB在生态上的区别

小程序各方面限制更加严格，将渲染和逻辑分开，这样做的直接后果就是之前很多在WEB中的东西不能直接用了，必须在平台给定的规则进行开发方便了平台进行管控。
各端提供官方入口，包括扫码，我的小程序，文章内嵌等等，并可快速分享。
发布被各平台管控，有着统一的应用版本管理

小程序架构（硬核内容）

在讲解小程序架构之前，我们先来了解一下小程序开发的心路历程。

最早微信提供jssdk。jssdk就是通过JS来开放微信端上的能力，来给web页面使用，通过引入jssdk来实现一些功能，jssdk虽然提升了能力，但是体验上并没有提升，比如我们在微信中打开一个网页，它其实还是在微信的浏览器内核中打开的，和在浏览器打开没有什么太大的差别，比如出现白屏，切换的时候没有那么流畅，更重要的是安全问题,为了解决上述这些问题，就出现了新的开发方案。，一开始微信考虑的是react-native这种方案，不用Swift或者Java开发了，但是最终抛弃了react-native这种方案，因为react-native本身有许多bug，而且react-native几乎没有维护，react-natice对CSS的支持不足，react-native存在协议隐患等一些问题

同时我们还要解决更新页面不能操作DOM的问题，因为DOM被操作了就无法被管控，我们最后采用虚拟DOM的方案,最终就有了如下的架构：

在小程序中，每个页面都是一个独立的进程，就类似于浏览器中的tab,每个页面都是独立的，这样做的好处就是切换页面的时候不需要重新加载资源，这样能做到体验上的最优。

二、小程序的发展历程

三、小程序开发方案

3.1 开发者工具

不论哪个小程序，我们都需要相应的平台去注册我们的开发者账号，我们开发小程序是需要用到平台提供的一个开发者工具。

3.2 小程序语法介绍——数据绑定

渲染层

<view>{{message}}</view>

逻辑层

Page({
    data:{
        message: 'Hello World!'
    }
})

3.3 小程序语法介绍——列表渲染

渲染层

<view tt:for="{{array}} tt:for-index="index" tt:for-item="item">
{{index}}:{{item.message}}
</view>

逻辑层

Page({
    data:{
        array: [{
            message: 'foo',
        },{
            message: 'bar'
        }]
    }
})

3.4 小程序语法介绍——条件渲染

<view tt:if="{{length > 5}}">1</view>
<view tt:elif="{{length > 2}}">2</view>
<view tt:else>3</view>

3.5 小程序语法介绍——Page对象

Page({
    data:{
        a: [],
        b: 2
    },
    onAdd(){
    // this.data.b = this.data.b + 1 不会引起视图更新
    this.setData({
        b: this.data.b + 1
    })
    }
})

3.6 其他开发方案

如何提升开发效率呢？有没有像使用Vue，React那种框架来开发小程序呢？答案是有的~

我们这里就以Taro为例，Taro是一个开放式跨端框架解决方案，它能够支持我们使用Vue,React来开发小程序，它是帮我们做了转换。

写法对比

四、Taro原理简单解析

如果让大家实现自己实现，大家会如何实现用React/Vue来写小程序，可以简单思考下。

Taro编译时方案——AST抽象语法树

AST具体可靠参考：astexplorer.net

这种编译时方案的缺点就是无法完全抹平差异，有书写限制。

Taro运行时方案——虚拟DOM Template组件

这种运行时方案的缺点就是一些情况下运行性能较差。

最后

⚽这篇文章带大家了解了小程序的历程以及小程序的开发方案等~
⚾如果你对这篇文章感兴趣欢迎点赞关注+收藏，更多精彩知识正在等你！😘
🏀GitHub 博客地址: github.com/Awu1227 。
🏉笔者还有其他专栏，欢迎阅读~
🏐玩转CSS之美
🎱Vue从放弃到入门
🎳深入浅出JavaScript

【青训营】-🎨小程序开发入门

前言