blog
blog copied to clipboard
gongmw
从现象 看本质
本节主要为大家描述下如何设计实现一个小程序浏览器运行环境的思路 给大家展示的这个小程序项目是默认的云开发案例项目 先给大家看下在浏览器上面运行的最终实现的效果图 **（感兴趣的朋友可以关注下我们的开源项目[wept](https://github.com/wetools/wept)，我们即将全面升级wept2.0版本，支持微信小程序最新功能迭代，基于基础库2.9.0以上实现，同时支持安卓和苹果平台三端运行环境）**   下面就按照从下到上的思路给大家描述下整体过程 1. 既然是在浏览器里面运行，肯定是要先启动一个http服务，通过域名端口访问， 服务端的话可以直接采用node实现比较方便快捷，node提供的koa或者egg等框架可以很快速搭建 2. 前面启动的一个服务主要是为了浏览器访问的，如果要实现云开发的一些功能，我们还需要启动多个后台服务来满足云开发的功能，数据库操作和文件操作很云函数，**这里后端服务的性能和稳定设计先不考虑在内** 这些操作其实也是对消息进行处理，当消息发送过来的时候就是相当于你要自己实现一个对外的接口，数据库操作这块微信是直接采用的mongodb，他的通信消息传输过来的sql语法是可以直接在mongodb上面进行语法操作还是很方便的不需要在转换 至于要实现mongodb的各种操作,可以直接采用网上现有的或者使用微信开源的[tcb-admin-node](https://github.com/TencentCloudBase/tcb-admin-node)项目里面的[@cloudbase/database](https://www.npmjs.com/package/@cloudbase/database)mongodb设计操作,也可以自己实现这块。 对于文件操作的话就用我们常用的文件处理存储 提取就好， **不过这些都要提前做好用户隔离网络隔离的设计，业界常用方案都是采用docker做这些 实现方案资料网上很多很详细** 特别是对于云函数功能，用户可以直接在本地进行编写js文件上传到服务端调用，每一个函数文件在服务端都可以充当一个独立的运行环境，如果不做好隔离情况的话会很糟 具体的服务端怎么设计就看大家的经验和积累了，这个过程就是这么个情况 **核心的就是知道了微信的输入和输出，重点就在于怎么组装这个过程了** 3. 启动服务后我们在浏览器输入地址后映入我们眼前的就是就是这个界面了,开发者工具通过nw.js开发的我们通过调试可以发现这个情况（下图）  4. 大部分的重心都放在这个页面上面来，把这个上面的信息都弄清楚就基本清晰ok了，我们要做的就是好好研究重写这个页面 - 如果认真看了前面的文章，应该知道重点就在与这几个webview上面，这个页面是开发者工具的调试页面不是项目的大家要注意，几个webview是嵌套在里面的 - 先模仿这两个webview里面的内容...
本章节就带大家通过微信官方的创建项目部分代码来讲解一下这些对外api如何通过我们自己方式来实现和微信相同的功能操作 我们通过微信开发者工具来自动创建一个默认的小程序项目 一个首页和日志页  这个项目大家应该都比较熟悉吧，应该第一次接触小程序开始时引入眼前的场景，具体的其他内容我们就不在这里啰嗦了 直接看下它的app.js文件，编辑器打开后可以看到里面写了这些 ```js //app.js App({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登录 wx.login({ success: res =>...
# 实现微信小程序编译和运行环境系列(核心篇一) ## 前言 因为一些小伙伴的私信和交流，感觉写的这些内容对别人还是有一些帮忙，所以打算剩下的几篇更新频率会快一些争取一星期一篇，应该还可以在写4篇的内容(包含小游戏和云开发服务)，可以带你初步了解搭建微信小程序引擎运行环境从头开始的一些过程 #### 核心篇分了几篇来描述，本文先从整体系统层面来概括小程序运行环境时的架构，明白它的整体大致流程，后面会接着更新细节内容 - 总体架构图解 - 架构分步详解 - 启动流程过程 - 消息通信流程 - 消息处理机制 *** ## 正文 ### 总体架构 先给大家展示一张架构大致图  ### 可以看出大致的一个层次结构 - 展现层 UI Simulator...
# 实现微信小程序编译和运行环境系列(进阶篇) ## 前言 距离上一篇初始篇过了一段时间,在初始篇里面主要分享了微信小程序工具 和微信小程序的文件组成 以及小程序架构的基本大纲和描述，看了第一篇的小伙伴应该大概知道了微信小程序运行时候各部分文件职能了,如果不太了解的话可以再去看下 [github](https://github.com/gongmw/blog/issues/5) [csdn](https://blog.csdn.net/qq_24884955/article/details/102866769) #### 进阶篇内容主要从以下几个方面来分享下微信小程序的架构 - 核心文件WAService.js WAWebview.js appservice.js的解析 和其他文件在逻辑层和渲染层的⚠️注意事项 - websocket通信在微信小程序框架中的应用实现 - 通过几个案例和部分代码来实现自己的小程序运行环境 - 微信小程序云开发和小游戏架构初步分析(后续会持续更新) *** ## 正文 ### WAService.js文件 在第一篇里面有讲到WAService.js文件是在**逻辑层**模版页面里面引入的，但是没有给予过多的介绍， 接下来主要分析下WAService.js的代码组成，这个文件算是微信小程序基础库文件里面很核心的文件了，所以微信对它的保护应该很到位了，微信通过了压缩 编译...
对于异步编程可能很多朋友了解不是很熟悉或者原来同步代码写习惯了，可能会感觉很别扭有些地方不好理解， 其实这是很正常的，毕竟思维惯性不是一下子就可以改变的，下面我通过本篇文章的一些分享和见解 和大家一起熟悉下在Node中异步编程的一些理解和解决方案，希望有所帮助。 在原来我们写的代码都是同步自上而下的运行很清晰明了：例如我们在晚上要做三件事： ```js log("学习1小时"); log("点外卖-吃外卖"); log("看视频1小时"); ``` 假如每执行一件事都要一段时间完成后，最后才可以睡觉，现在我们用异步的思维来稍微调整一下，在学习前两分钟或学习完看视频的时候我们可以点下单，等学习完后外卖来了，在打开手机，空调一开happy一小时，就可以早一点睡觉了节约了很多时间，其实在我们的工作和生活中，到处充满了异步的方式。 然而在开发里面异步的出现带来了一个不太好理解的东西就是**回调**，回调的出现增加我们对软件设计开发的一些困难和理解，但随着社区的进步和发展 越来越好的解决方案慢慢出现消除了我们很多困惑，下面一起来看看吧。 ### 1.Callback Callback是比较早的一种解决方案，简洁点的定义就是**在一个函数中调用另外一个函数就是callback** 笔者早期也经历过一段不堪的使用express框架里面的callback的往事，因为最开始对这种写法也不是很明白，看到很多包文件和函数文件里面返回的都是回调函数，各种callback，搞得自己迷迷糊糊的，但是居然被大家熟知并运用，那我们就要学会尊重它本身，接受这种风格，除非你有更好的选择或者有能力改变它。 我们比较常用的一种node callback处理写法 ```js fs.readFile(file, function(err, data) { if (err) { return cb(err); } cb(null,...
### 1. 定义 #### 1.1 什么是Stream Stream流是一种数据传输手段，是端到端信息交换的一种方式，而且是有顺序的,是逐块读取数据、处理内容，用于顺序读取输入或写入输出。 其实Stream在计算机中一个相当古老的概念，它起源于1960年代早期的Unix。 >"Stream是随着时间的推移从源流到目的地的一系列数据" @ddprrt 我们要知道Stream可以有多种类型：文件，计算机的内存或键盘或鼠标等输入设备都可以称谓。一旦打开一个流，数据就会从其源头到消耗它的进程成块地流动。如果是一个文件，则每个字符或字节将被读取一次，在比如我们在键盘的上面敲打的每个按键都将通过流传输数据然后进行响应。 **Stream的应用在理论上输入可以是无止境的，而且没有限制所以被广泛应用** #### 1.2 Node.js中的Stream Node.js中的Stream是由Node核心Stream模块封装提供的功能，是EventEmitter类的实例，基于事件的。 在Node.js中有4种流： - 可写：用于写入数据 - 可读：用于读取数据 - 双工：用于读取和写入数据 - 转换：在写入或读取时可以修改数据的位置，例如在压缩功能时候你可以写入和读取解压缩数据。 ### 2. 运用 可能文字太过枯燥，在这里通过一些案例给大家介绍下。 本地添加了一个大约大约1G的test.txt文件，我们用两中方式来读取它，看下它的内存变化。...
### 专栏特色 - 面面俱到， 该讲的都会讲，会衍生一些扩展点出来 - 由浅入深，循序渐进，灵活拓展，浅显的先讲解 但是会给出一些深入理解的学习路径，帮助建立了知识图谱。 - 简单实用，并有大量NodeJS实践的案例，学的有趣不会枯燥。 - 贴近实战，对初级中级来说，更多的是学以致用，会增加一些实际项目的知识体系和demo內容有料有趣，社群交流，一起学习进步 ### 读者定位 - 掌握一定 JavaScript语法基础对 Node.js 有一定兴趣的同学 - 有前端开发经验想体验全栈开发，想学习构建后端服务的同学 - 有 Node.js 开发经验，想了解更多使用Node.js解决系统问题的同学 ### 专栏介绍 Node.js 目前拥有比较活跃的开发者社区，依靠繁荣的社区力量，目前算是比较成熟的技术体系和生态了, 在web、客户端、物联网、开发者工具编辑器等多领域多有它的身影，特别在高级前端招聘中会Node.js开发也是一个必备要求，...
### 1. 定义 我们学习掌握一门新技术时候，第一步应当从它的官方文档开始认知，打开[Node.js](https://nodejs.org/en/)官方文档可以看到比较显眼的一句话是。  **Node.js是建立在Chrome V8 上面的一个JavaScript运行环境** 通俗点解释: js属于一种脚本性语言，然而脚本语言运行需要一个解析器来解析，对于我们原来写的js代码大部分都是运行在网页上，所以浏览器本身就担当了解析器的角色。而现在对于独立运行在服务器的js代码，node就属于那个解析器。 >V8属于Google Chrome 浏览器的一个高性能引擎，可以直接将JavaScript编译为本地机器代码，而其他的语言如PHP和Ruby，Java每次访问时都必须通过解释器运行。 ### 2. 发展史 node的诞生到目前也走过了10多年，一路走来辉煌过、质疑过、突围过、到目前，可谓**天生我材必有用，千金散尽还复来**。 所以笔者自己做了一个时间轴图来和大家一起见证下node在历史洪流中比较重要的时刻。  > 此外我还收集整理了两篇关于NodeJS创始人Ryan Dahl的访谈录，一篇是10年前的 Ryan Dahl的访谈和一篇近期对Ryan Dahl的访谈， 虽然内容不是很多关于NodeJs技术层面的问题和教程，但记者对Ryan Dahl提的一些有趣的问题，和Ryan Dahl的回答会让你感觉很有趣也会让你对Node有一些不一样的见解，如果大家对访谈录感兴趣的可以关注我的微信公众号**一起学Node**中查看，可以带你了解NodeJs的前世今生。 ### 3....
# 实现微信小程序编译和运行环境系列(初始篇) ## 前言 最近一段时间在研究实现微信小程序和小游戏编译打包和运行环境平台开发 目前基本可以支持微信基础库2.8.2功能迭代了 #### 所以想通过记录分享一下自己的认知过程中遇到的一些问题和解决方案来更好的理解小程序设计上的优点和一些不足的地方 在此之前网上有存在开源的一些基于微信基础库版本1.0的一些参考 核心作者是由开源大牛[启明兄](https://www.zhihu.com/people/zhao-qi-ming/activities)的[wept](https://github.com/chemzqm/wept)项目基础上构建的(目前有幸和启明兄成为同事对这个小程序整体的架构理解帮助了我很多) 由于wept的运行环境是基于微信基础库1.0的版本上实现之后也不维护了，时间上是2016的在后续的更新的版本中新加的一些特性如自定义组件 npm包很多api等开发实现都不支持， 最主要是的微信在后续架构中更换底层的通信方式采用了webstock的方式等一些其他变化 *** ## 正文 ### 后面我会通过几篇文章来整体描述一下从工具到破解到源码解析和原理到实现的处理流程 最开始的时候也在网上找了很多的资料，看了有一些人写的解析微信小程序架构的文章，从中学习了解了很多 但如果想模拟实现出来这么个东西 还是有蛮迷糊的，所以我想通过我们所实现的过程来一点点**从现象 看本质**来解析下微信小程序编译和运行原理 凡事对自己多点信心 多坚持下 多学习下，想想我们遇到的问题，当时感觉我 搞不定了 弄不了 最后随着时间的推移和认知的迭代问题总会慢慢消灭掉 *** ###...
在上文中我们有点到小程序开发者工具里面的消息是通过websocket协议发送和接受处理的， 当然这个不是凭空而说的，是在小程序的逻辑层appservice.js源码里面有代码表明的，至于它的消息格式还有一部分我没有列出来，比如它的数据分析和上报他们自己服务器的一些消息格式可以先先需要关注。 下面还是先给大家展示一下流程找到appservice.js源码文件  可以看到它的链接地址，数据发送和接收的部分代码，由于图片尺寸问题我折叠了部分代码，大家可以自己去细看看 我还是先简述一些webstocket的知识，可能部分同学对这方面不是很熟悉。细节webstocket内容不会在本文描述，后期会写一篇专门的介绍 ## websocket是什么 其实这些内容我们通过谷歌搜索可以查阅很多材料，但有没有真正理解可以在自己项目里进行灵活设计运用还是只是简单使用文档api 还是要靠自己多探索思考一些。 我们通过资料[webstockrt协议](https://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-03)  可以理解为：WebSocket协议允许在运行于受控环境中的不受信任代码的用户代理与已选择从该代码进行通信的远程主机之间进行双向通信 简单点描述就是：客户端和服务器之间存在持久连接，而且双方都可以随时随地相互发送数据 ## 为什么用websocket 一项新规范或者一门新技术的诞生肯定是为了解决或者完善前面方案的不足，这样才能一直进步下去。 在没有websocket之前我们采用http用的很好，但是随着一些应用的要求像聊天 股票 游戏 这种对实时性数据要求高的系统， 才用HTTP 协议发送数据的话只能有客户端单方面进行请求，服务端响应获取最新数据，如果服务端的数据变换很快比如股票的信息， 因此只能定时去请求，就出出现效率低 浪费资源 而且数据还不实时同步的情况，为了解决这些问题通过研究websocket协议就闪亮登场了 websocket具备的一些优点 - 支持双向通信，具有很强的实时性 -...