微信小程序编译和运行环境系列(实现思路)

gongmw commented 4 years ago

本节主要为大家描述下如何设计实现一个小程序浏览器运行环境的思路

给大家展示的这个小程序项目是默认的云开发案例项目

先给大家看下在浏览器上面运行的最终实现的效果图

（感兴趣的朋友可以关注下我们的开源项目wept，我们即将全面升级wept2.0版本，支持微信小程序最新功能迭代，基于基础库2.9.0以上实现，同时支持安卓和苹果平台三端运行环境）

在这里插入图片描述

下面就按照从下到上的思路给大家描述下整体过程

既然是在浏览器里面运行，肯定是要先启动一个http服务，通过域名端口访问，服务端的话可以直接采用node实现比较方便快捷，node提供的koa或者egg等框架可以很快速搭建
前面启动的一个服务主要是为了浏览器访问的，如果要实现云开发的一些功能，我们还需要启动多个后台服务来满足云开发的功能，数据库操作和文件操作很云函数，这里后端服务的性能和稳定设计先不考虑在内

这些操作其实也是对消息进行处理，当消息发送过来的时候就是相当于你要自己实现一个对外的接口，数据库操作这块微信是直接采用的mongodb，他的通信消息传输过来的sql语法是可以直接在mongodb上面进行语法操作还是很方便的不需要在转换

至于要实现mongodb的各种操作,可以直接采用网上现有的或者使用微信开源的tcb-admin-node项目里面的@cloudbase/databasemongodb设计操作,也可以自己实现这块。

对于文件操作的话就用我们常用的文件处理存储提取就好， 不过这些都要提前做好用户隔离网络隔离的设计，业界常用方案都是采用docker做这些实现方案资料网上很多很详细

特别是对于云函数功能，用户可以直接在本地进行编写js文件上传到服务端调用，每一个函数文件在服务端都可以充当一个独立的运行环境，如果不做好隔离情况的话会很糟

具体的服务端怎么设计就看大家的经验和积累了，这个过程就是这么个情况 核心的就是知道了微信的输入和输出，重点就在于怎么组装这个过程了
启动服务后我们在浏览器输入地址后映入我们眼前的就是就是这个界面了,开发者工具通过nw.js开发的我们通过调试可以发现这个情况（下图）
大部分的重心都放在这个页面上面来，把这个上面的信息都弄清楚就基本清晰ok了，我们要做的就是好好研究重写这个页面
- 如果认真看了前面的文章，应该知道重点就在与这几个webview上面，这个页面是开发者工具的调试页面不是项目的大家要注意，几个webview是嵌套在里面的
- 先模仿这两个webview里面的内容
里面的各部分内容组成情况和具体做什么的我在上文都讲过了，至于要怎么把项目小程序语法代码实现编译成这两个html文件，就和你点击小程序工具的编译按钮一样下面我简述一下思路

这个编译开发需要对node.js的基础运用和文件处理掌握要扎实些，不然过程会不是很顺利
1. 先读取小程序源文件对project.config.json或者game.json进行特殊处理，提取需要的参数，全局配置到时转成变量直接绑定到页面
2. 通过开发者工具运行时的sources看出,js文件都转换成AMD格式，所以下面我们要做的就是处理小程序js文件转换成AMD格式这里有两个点要注意
  - projectConfig.setting.es6设置了true的话是要转换的
  - 单个文件大小大于500KB的不做给你做es6 转换和压缩，不知道他们为嘛没有明说出来
    1. 在就是重写构建渲染层逻辑层的页面内容，上面各部分表示什么怎么来的在上文都有介绍，可以在翻翻看看
1. 下一步就是要把其他文件关联复制进去比如添加的图片文档等。
2. 这步最重要核心不能忽视的就是微信基础库文件，基础库文件可以直接在工具包里面提取 wawebview.js waservice.js文件外，在首页图里面可以看到还有这几个文件[ 'documentstart.js', 'pageframe.js', 'polyfill.js']也是固定的，这几个文件在开发者工具包里面都有直接完全复制过来就ok，你也可以修改直接重写覆盖它的方法，也可以添加一些微信提前还没实现的功能但你感觉不太友好的地方
  1. 最后一步就是启动你的http和socket服务，socket服务的设计在第四节讲的很明白大家可以看看，最后把构建的页面运行起来，你就会发现不一样的烟火🎆