微信小程序简介——起步（一）

发表时间：2020-9-28

发布人：葵宇科技

浏览次数：28

文章目录

一、小程序的简介
二、小程序的技术发展
三、小程序与普通网页开发的区别

一、小程序的简介

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
按照我的理解，微信小程序就是手机软件的mini型，可以不用占用手机的过多内存，也可以不用下载不常用但偶尔需要用的软件，它是一种不用下载安装就可以使用的应用，只需要扫一扫二维码就可以用了，给用户提供了非常大的便利。

二、小程序的技术发展

微信实际上是一个混合的APP，客户端里嵌入WebView。
WebView可以对url请求、页面加载、渲染、页面交互进行强大的处理，可单独使用，也可联合其工具类一起使用，就是将url网络请求返回的结果展示在里面。

就比如说，你自己写了一个APP，你想要用它访问网络，这里假设你要访问夸克浏览器，你不想要用你手机自带的浏览器访问，想要自己在APP内部直接访问，这个时候你就可以用上WebView了。

那小程序和以上我说的这些有什么关系呢，当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信就有相关的JS API了。

【
从小程序的定位来看，微信的核心价值是连接一切：订阅号定位连接人与资讯，为微信用户提供优质和丰富的内容；服务号连接人与服务，建立企业和普通用户沟通的桥梁，将企业的产品和服务更好地传达至用户，但服务号由于受限于开发权限与服务频次，无法提供更多的服务；小程序的诞生则弥补了订阅号和服务号的不足，连接了人和应用，企业能够为用户提供更复杂、更个性化的服务体验。

从小程序的本质来看，小程序与早前百度提出的轻应用大体相似，都是以类似 Web App的形式而存在的，提供无须下载、即搜即用的直达服务，通过开放更多应用程序接口（Application Programming Interface，APl）及微信入口，为用户提供更多服务。但是小程序又不同于Web App，因为二者的开发逻辑与开发语言完全不一样。
】
以下是一个调用微信原生组件浏览图片的JS API，相比于额外引入一个JS图片预览组件库，这种调用方式显得非常简洁和高效

WeixinJSBridge.invoke('imagePreview', {
    current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
    urls: [ // 所有图片的URL列表，数组格式
        'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
    ]
}, function(res) {
    console.log(res.err_msg)
})

2015年初，微信发布了一整套网页开发工具包，称之为 JS-SDK，开放了拍摄、录音等几十个API。让所有web开发者都可以使用到微信的原生能力，去完成一些之前做不到或者难以做到的事情。

同样是调用原生的浏览图片，调用方式如下：

wx.previewImage({
  current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
  urls: [ // 所有图片的URL列表，数组格式
    'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
  ],
  success: function(res) {
    console.log(res)
  }
})

以上代码使用 JS-SDK 调用图片预览组件
?JS-SDK是对之前的 WeixinJSBridge 的一个包装，以及新能力的释放，并且由对内开放转为了对所有开发者开放，从数据监控来看，绝大部分在微信内传播的移动网页都使用到了相关的接口。

?JS-SDK 解决了移动网页能力不足的问题，通过暴露微信的接口使得 Web 开发者能够拥有更多的能力，然而在更多的能力之外，JS-SDK 的模式并没有解决使用移动网页遇到的体验不良的问题。用户在访问网页的时候，在浏览器开始显示之前都会有一个白屏的过程，在移动端，受限于设备性能和网络速度，白屏会更加明显。我们团队把很多技术精力放置在如何帮助平台上的Web开发者解决这个问题。因此我们设计了一个 JS-SDK 的增强版本，其中有一个重要的功能，称之为微信 Web 资源离线存储。

下面是关于微信Web资源离线存储的相关介绍，这段文字来自于内部的文档，暂未对外部开放

微信 Web 资源离线存储是面向 Web 开发者提供的基于微信内的 Web 加速方案。
通过使用微信离线存储，Web 开发者可借助微信提供的资源存储能力，直接从微信本地加载 Web 资源而不需要再从服务端拉取，从而减少网页加载时间，为微信用户提供更优质的网页浏览体验。每个公众号下所有 Web App 累计最多可缓存 5M 的资源。

?这个设计有点类似 HTML5 的 Application Cache，但在设计上规避了一些 Application Cache的不足

小插曲：
【
Application Cache 可以很简单让我们的WebApp具有离线的能力。它支持的浏览器：IE10+，FireFox，Chrome，Safari，Opera

Application Cache的优点：

1.离线浏览 – 用户可以再离线时使用Application
2.速度 – 由于缓存了资源，所以加载很快
3.减少服务端数据加载 – 浏览器只需要从服务器加载更新过的数据

缺点：

1.Manifest文件有变化时才更新（manifest是一种软件，属于AndroidManifest.xml文件，在简单的Android系统的应用中提出了重要的信息，它可以运行任何应用程序的代码）
2.一次必须更新Manifest中的所有文件，下次才生效

】

?在内部测试中，我们发现离线存储能够解决一些问题，但对于一些复杂的页面依然会有白屏问题，例如页面加载了大量的 CSS 或者是 JavaScript 文件。?除了白屏，影响 Web 体验的问题还有缺少操作的反馈，主要表现在两个方面：页面切换的生硬和点击的迟滞感。

?微信面临的问题是如何设计一个比较好的系统，使得所有开发者在微信中都能获得比较好的体验。这个问题是之前的 JS-SDK 所处理不了的，需要一个全新的系统来完成
1.快速的加载2.更强大的能力3.原生的体验4.易用且安全的微信数据开放5.高效和简单的开发