微信小程序开发自学笔记 —— 九、微信开发者工具
微信开发者工具
介绍
由于小程序渲染和逻辑分离的运行机制与传统的网页存在差异,所以无法使用传统的网页的开发调试工具。
开发者可以借助微信开发者工具完成小程序的代码开发、编译运行、界面和逻辑调试、真机预览和提交发布版本等功能。
微信开发者工具是一个基于nw.js ,使用node.js、chromium以及系统API来实现底层模块,使用React、Redux等前端技术框架来搭建用户交互层,实现同一套代码跨Mac和Windows 平台使用。
代码编译
微信开发者工具和微信客户端都无法直接运行小程序的源码,因此需要对小程序的源码进行编译。代码编译过程包括本地预处理、本地编译和服务器编译。
为了快速预览,微信开发者工具模拟器运行的代码只经过本地预处理、本地编译,没有服务器编译过程,而微信客户端运行的代码是额外经过服务器编译的。
编译WXML
WXML(WeiXin Markup Language)是小程序框架设计的一套标签语言,用于构建出页面的结构。小程序的渲染层的运行环境是一个WebView,而WebView无法直接理解WXML标签,所以需要经过编译。
微信开发者工具内置了一个二进制的WXML编译器,这个编译器接受WXML代码文件列表,处理完成之后输出JavaScript代码,这段代码是各个页面的结构生成函数。
编译过程将所有的WXML代码最终变成一个JavaScript 函数,预先注入在WebView中。在运行时确定了页面路径之后,将路径作为参数传递给这个函数得到该页面的结构生成函数,页面结构生成函数接受页面数据,输出一段描述页面结构的JSON,最终通过小程序组件系统生成对应的HTML。
编译WXSS
WXSS (WeiXin Style Sheets) 是一套样式语言,用来决定 WXML 的组件应该怎么显示。
WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。
微信开发者工具内置了一个二进制的WXSS编译器,这个编译器接受WXSS文件列表,分析文件之间的引用关系,同时预处理rpx,输出一个样式信息数组。
在运行时,根据当前的屏幕宽度,计算出1rpx对应多少像素单位,然后将样式信息数组转换成最终的样式添加到页面中。
编译JavaScript
微信客户端在运行小程序的逻辑层的时候只需要加载一个JS文件(app-service.js),而小程序框架允许开发者将 JavaScript 代码写在不同的文件中,所以在代码上传之前,微信开发者工具会对开发者的JS 文件做一些预处理,包括ES6转ES5和代码压缩(开发者可以选择关闭预处理操作),在服务器编译过程将每个JS文件的内容分别包裹在define域中,再按一定的顺序合并成 app-service.js 。其中对于页面JS和app.js需要主动require。
模拟器
小程序模拟器模拟小程序在微信客户端的逻辑和界面表现,方便开发者实时查看代码效果。
逻辑层模拟
在iOS微信客户端上,小程序的JavaScript代码是运行在JavaScriptCore中,在Android微信客户端上,小程序的JavaScript代码是通过 X5 JSCore来解析的。而在微信开发者工具上我们采用了一个隐藏着的Webivew来模拟小程序的逻辑运行环境。
渲染层模拟
微信开发者工具使用chrome的 <webview />
标签来加载渲染层页面,每个渲染层WebView加载
客户端模拟
微信客户端为丰富小程序的功能提供了大量的API。在微信开发者工具上,通过借助BOM(浏览器对象模型)以及node.js访问系统资源的能力,同时模拟客户端的UI和交互流程,使得大部分的API能够正常执行
通讯模拟
微信开发者工具的有一个消息中心底层模块维持着一个WebSocket服务器,小程序的逻辑层的WebView和渲染层页面的WebView通过WebSocket与开发者工具底层建立长连,使用WebSocket的protocol字段来区分Socket的来源。
调试器
代码调试是开发者工具的最主要的功能之一,包括界面调试和逻辑调试。
微信小程序开发自学笔记 —— 九、微信开发者工具相关推荐
- 微信小程序开发自学笔记 —— 六、底层框架
底层框架 双线程模型 小程序是基于双线程模型的,在这个模型中,小程序的逻辑层和渲染层分开在不同的线程运行,与传统的 Web 单线程模型有很大的不同. 技术选型 一般来说,渲染界面的技术有三种: 用纯客 ...
- 微信小程序开发自学笔记 —— 七、性能优化
性能优化 启动 在小程序启动时,微信会为小程序展示一个固定的启动界面,界面内包含小程序的图标.名称和加载提示图标.此时,微信会在背后完成几项工作:下载小程序代码包.加载小程序代码包.初始化小程序首页. ...
- 微信小程序开发自学笔记 —— 三、理解小程序宿主环境
理解小程序宿主环境 小程序可以调用宿主环境提供的微信客户端的能力. 渲染层和逻辑层 小程序的运行环境分成渲染层和逻辑层,WXML模板和WXSS样式工作在渲染层,JS 脚本工作在逻辑层. 小程序如何把脚 ...
- 微信小程序开发 自学
微信小程序开发 自学方向 小程序基础知识 一.小程序的结构目录 1.小程序文件结构与传统web对比 2.基本项目目录 3.全局配置 app,json 3.1.pages 添加页面文件 3.2.wind ...
- 微信小程序开发个人笔记(2)
微信小程序开发基础笔记 官方文档:微信官方文档 | 微信开放文档 (qq.com) 一.注册等 首先需要注册一下平台(Appid开发者d 和上传管理等都需要) 微信公众平台 (qq.com)(找不到就 ...
- 微信小程序开发系列七:微信小程序的页面跳转
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列六:微信框架API的调用
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列五:微信小程序中如何响应用户输入事件
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列四:微信小程序之控制器的初始化逻辑
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 这个教程的前两篇文章,介绍了如何 ...
最新文章
- 简单总结一下 XSS
- comsol如何设置距离梯度_如何在 COMSOL 软件中设置“优质的”CFD 网格
- 为什么叫欧文德鲁大叔
- Pro Android学习笔记(二九):用户界面和控制(17):include和merge
- 转-httpd 2.4.4 + mysql-5.5.28 + php-5.4.13编译安装过程
- spring boot开发笔记——mybatis
- 5折交叉验证_交叉验证的方法主要分为哪些?
- 上海理工大学菜鸟驿站把无人车送进社区 协助解决抗疫物资“最后100米”配送...
- 拼多多首届“非遗购物节”开幕 十一省市“非遗馆”入驻
- JavaScript的String对象使用
- 【Django 2021年最新版教程27】数据库model 查询2个日期范围内的所有日期
- Linux下原生异步IO接口libaio介绍
- 非科班程序员AI学习路径建议
- inductive learning (归纳学习)与 transductive learning(直推学习)
- Mysql常用技巧总结
- 什么是动态DNS(DDNS)
- Apostrophe not preceded
- 7.java IO流
- 计算机c语言好学吗?要是想自学应该怎么办?
- 中国人工智能领域企业分类(附未来企业排行)