1小时快速了解小程序这就是小程序的由来。可以理解为运行在微信中加强版的网页应用。网页中DOM与脚本是单线程渲染，长时间

首先看一下整体的讲解思维导图

一、小程序发展史

简单来说从微信中的webview用的人越来越多之后，微信就已经出了一个相关的API了，就是JS-SDK

但是由于移动网页体验不良，微信为了提升用户体验，决定开发一个全新的系统：

它需要使得所有的开发者都能做到：

快速的加载
更强大的能力
原生的体验
易用且安全的微信数据开放
高效和简单的开发

这就是小程序的由来。可以理解为运行在微信中加强版的网页应用。

二、小程序与移动web的区别

1.渲染机制

网页中DOM与脚本是单线程渲染，长时间的脚本运行会导致页面失去响应，而小程序是分开执行。

网页中有DOM、BOM浏览器对象，而小程序中没有，这意味着一些常用的JS库在小程序中无法使用，如jQuery、 Zepto

2.运行环境

网页运行在这种浏览器中，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView

而小程序运行环境如下

运行环境	逻辑层	渲染层
IOS	JavaScriptCore	WKWebView
安卓	V8	chromium定制内核
小程序开发者工具	NWJS	Chrome WebView

3.开发语言

网页中一个页面一般由JS、HTML、CSS等3部分组成，可使用一些常用的UI框架: element-ui、iview等，JS框架: Vue、React、Angular 快速开发。

而小程序的一个页面由以下4个文件构成 .json、.wxml、.wxss、.js

.json配置

.json文件在小程序中可以理解为一种静态配置，如配置导航栏背景色、导航栏文字颜色

示例app.json

{
  // 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  // 定义小程序所有页面的顶部背景颜色，文字颜色定义等
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }
}

WXML 模板

网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。打开 pages/index/index.wxml，你会看到以下的内容:

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

和 HTML 非常相似，WXML 由标签、属性等等构成。但是也有很多不一样的地方

小程序有自己的标签体系，具体看这里小程序组件
数据绑定、条件渲染、列表渲染WXML

WXSS

WXSS对应网页中的CSS，用于样式修饰，与 CSS 相比，WXSS 扩展的特性有：

尺寸单位
样式导入

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

查看更多WXSS相关内容戳这里

JS逻辑交互

小程序中的时间绑定与原生JS绑定逻辑不同，小程序事件

体验小程序

开发者可使用微信客户端(6.7.2 及以上版本)扫码下方小程序码，体验小程序。小程序源码

三、如何实现的原生交互

web是无法调用原生的方法的，比如在手机上唤起键盘、调用文件系统等。那为什么用小程序里面一些API就能用了呢。这里面就涉及到了 JSBridge，见名知意，web应用与原生Native开发之间的桥梁。图解如下：（图片引用自大佬草榴社区的文章）图解1 图解2 这里简单图示一下小程序实现原生交互的原理，JSBridge更多讲解可去看大佬文章戳这里