简介
本文将主要介绍如何让使用HTML JavaScript CSS写成的网页与Java Flutter C++等本地程序交互，编写一个小程序系统，并且使用原生应用程序的各种能力。
为什么编写本文最近正在研究小程序，希望编写一个适用于全部平台的小程序引擎。由于“适用于全部平台”因此编程语言方面只能是自己写，不然目标平台总有一个不支持的，但这样实在是太费劲了，运行效率还更低，因为有时我们会使用Flutter、Java等编程语言来编写应用程序，这将会二次拉低效率，虚拟机嵌套虚拟机，再加上很多平台等文本处理方案不成熟（特别是Flutter，因为没人拿Flutter写解释器），这将会二次使我的小程序梦想破灭。
原先设想的低效方案我想到了小程序，于是我去搜索引擎搜索，查到了小程序的运行原理。原来，通过HTML CSS JavaScript可以高效的实现小程序，再加上每个平台基本都有WebView，完全是可以实现的。小程序及其灵活，就像一个可以与交互的网页一样。
小程序架构看见了小程序架构后，我不禁感叹，这便是腾讯的智慧啊。
然而，WeChat-JavaScript Bridge却难弄。在Android和iOS两大手机操作系统中，标准SDK便提供了具有JavaScript Bridge能力的WebView，然而，在桌面环境下，简单的解决方案却找不到几个，在搜索引擎下为数不多的有：
多年前的VC与JavaScript交互指南 （劝退原因：过于老旧¹）难上加难的Qt与JavaScript交互指南（劝退原因：对旧操作系统²支持不好）还有macOS用户望尘莫及的C#与JavaScript交互指南（劝退原因：并且对旧操作系统支持不好）注释：1. 过于老旧：本指南中使用的是Visual C++ IDE，使用MFC中的WebBrowser组件。且教程是几年前的，已经年久失修，并且很复杂。2. 旧操作系统：以Windows XP为代表的操作系统那么，我们该如何处理这些难事呢？
万能的JavaScript与本地应用程序交互指南便在我手中诞生了。
首先，我们先来扣字眼，与“本地应用”交互，代表它必须能够和任何应用程序交互，并且在本地上，并且开发者选择的平台五花八门，有WPF Swing Qt JavaFX Electron和各平台的原生（多是C++）那么，有什么统一的解决方案呢？
WebSocket
对，没错，就是他了。
为什么要使用WebSocket呢？因为它刚刚好符合我们所说的几个特征：全平台适用、JavaScript与本地应用交互。因此，这便是我对全平台小程序提出的全新设想
基于WebSocket的小程序方案于是便编写了本文，与大家讲解我在开发小程序系统时遇到的那些事。
目录第一章 WebSocket1.1 WebSocket是什么？1.2 WebSocket的使用1.3 端口占用怎么办？第二章 小程序2.1 HTML切换页面后如何重新初始化WebSocket2.2 小程序系统以及小程序加载器方案2.3 小程序数据库？应用服务器？2.4 App Store（小程序应用市场）第三章 JavaScript API3.1 JavaScript API的那些事3.2 JavaScript API的编写小程序如何使用原生应用的能力4.1 小程序如何使用原生应用程序能力小结5.1 小结与思维导图● 第一章 WebSocket1.1 WebSocket是什么？WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。——摘自百度百科WebSocket词条最重要的是，WebSocket是JavaScript标准API中唯一可以与连接网络、与外部交互的类
1.2 WebSocket的使用WebSocket需要服务器和客户端。
客户端
根据文本内容，客户端使用JavaScript编写，服务端由“本地应用”提供。
话不多说，上代码
注：
代码中的"8190"指小程序服务所使用的端口。端口可以自定义，但注意不要与用户电脑上所正在运行的应用程序产生冲突类似于/*1*/这样的为注释标记，注释会在代码下方出现/*1*/let socket = new WebSocket("ws://localhost:8190") socket.onmessage = function(message) { /*2*/// Handle message } /*3*/function sendMessage(message) { socket.send(message) } 注释：1. 「let socket = new WebSocket("ws://localhost:8190")」：该段代码用于连接位于localhost:8190的WebSocket服务器并与之建立连接2. 「// Handle message」：这里可以处理WebSocket接收到的信息，message参数为接收到的信息3. 「function sendMessage(message)」：这是函数"sendMessage"的函数头，用于向本地应用程序发送消息就这么简单。如果您有学习过JS，可以制作更复杂的交互系统了！
服务端
“服务端“就是一个WebSocket服务器。按照规划好的方案，服务端应该由Native Application（原生应用程序）提供。
由于本地应用程序的实现语言多种多样，这里不贴全部代码，详见搜索引擎。
1.3 端口占用怎么办端口占用是由于在一个服务将要运行的端口已经被使用了造成的。因此解决端口占用需要：
避开常用端口使端口可配置避开常用端口
常用端口有以下几个：
摘自简书，原文地址：小程序使用的WebSocket的端口必须不是以上这些，比如使用了3306端口，如果用户同时还开着MySQL，那可就是一个悲剧了，这将会使软件报错而用户又不知原因，没有做错误处理（try...catch）的软件用户连报错了都不知道，他只知道小程序打不开了。
使端口可配置
主要流程可以是这样：
”使端口可配置“的主要流程但，我们需要面临的一个重大难题是：服务器的端口可以按设置来，可是小程序怎么知道端口是哪个呢？
有一个简单的办法：在WebView的初始链接（Initial URL）中指定
这个不难，相信大家在使用搜索引擎的时候都会看到一些信息，比如
链接中传递的信息在网页地址末尾加上一个半角问号即可传递信息，比如我要打开位于/Users/resetpower/test/index.html的小程序时，我输入file:///Users/resetpower/test/index.html?port=8190就可以告诉小程序，我们的端口是8190，请用8190端口打开WebSocket！
要在JavaScript里读取信息也很简单
/*1*/let info = location.search.substr(6) 注释：1. 「let info = location.search.substr(6)」：此处的「info」指获取到的端口如此简单粗暴。不过这是建立在能确保小程序不会有其他别的参数的情况下的。不过一般的小程序也不会到首页就需要传递信息的地步。
● 第二章 小程序2.1 小程序系统以及小程序加载器方案……
见第二章：JavaScript与本地应用程序交互暨小程序系统编写指南（二）