小程序 102800 以及新版 WEPT 的改动

上一版微信小程序 0.10.102800 带来了许多的变化，以至于我一度以为 WEPT 这个主打热更新的小工具没什么继续存在的必要了，然而尽管我看到了小程序团队对于完善开发工具的不懈努力，它的体验在很多方面还是不那么让我满意（经常性崩溃以及内存泄露）。

102800 版本具体新增和修复的改动 官方文档 里面已经做了详细的说明（虽然他们代码未必很好，但是文档很专业）。我来谈一些内部实现上的一些变化，希望能帮大家对于小程序结构有个更好的了解，被坑了时候也能大概知道是怎么回事 ?

新的 wxss 构建方式

之前版本 wxss 中的 rpx 单位使用的是 rem 进行的模拟，但是微信团队发现这种方式部分机型上会有边框显示不全等问题。 新版中的 rpx 会通过当前页面的 screenWidth 和 deviceRatio 动态计算出一个 px 数值，然后取整数。

官方工具中 wxss 加载过程为后台编译 wxss 生成 javscript 文件，然后前端 view 层加载并执行这个 script 生成 css 文本， 最后生成 css 标签添加到 head 元素里。这种方式缺点在于如果我们修改了 wxss 或者调整页面宽度，所有页面都需要重新刷新， 而不仅仅是重新加载 css 那么简单，另一个问题是生成的内联 css 无法使用 css souremap 支持，不过官方工具提供了自己的 wxml 面板并且加入了相应 wxss 文件的跳转功能。

新的交互反馈 API

102800 版本加入了 wx.showToast wx.showModal wx.hideToast wx.showActionSheet 4 个交互 API， 方便开发者更容易的使用组件。这几个 API 的 UI 是由底层直接生成的，所以它的缺点就是不能使用 css 重写样式了， 设计的时候要注意了，如果需要好看的样式只能自己实现相应功能。

更加完善的 wxml 面板

新版的 wxml 支持属性页面同步、编辑元素属性、显示元素样式和 Dataset 等功能，尽管没有 Chrome 自带的 Elements 面板那么灵活，但是已经非常实用了。

WEPT 0.5.0 在兼容现有小程序 API 的基础上，同时也做出了一些改进。

css sourcemap 支持

WEPT 使用后端将 wxss 文件转换为 css 文件，并且添加了 css sourcemap 功能， 开发者可以直接从样式面板跳转到对应文件的对应行，如果你在 Chrome 的 devtools 中添加了 “映射到本地文件”， 可以直接去编辑对应文件，因为 WEPT 支持 wxss 文件热更新，所以保存后样式会立即生效。

JavaScript sourcemap 支持

官方工具支持 JavaScript 的 souremap，但是目前的实现有 bug，使用本地文件映射功能会报错：

WPET 中的 souremap 可以映射到本地文件，开发者可以直接在 Chrome 的 sources 面板下修改相应文件。

代理配置支持

WEPT 支持在项目目录下的 wept.json 配置文件，开发者可以添加该项目使用的代理服务器配置， 具体使用方法请参考 wept 配置文档。

如果你需要使用工具调整修改请求或者服务端响应，别忘了调整 app.json 里面配置的超时时间： networkTimeout

重做了 wxml，wxss 以及 javscript 热更新

• wxml 改为由控制层发起新模板请求, 生成新的 generateFunction 全局变量到 view 层，再通过发送 appDataChange 事件让 view 层重新渲染，避免原先修改 view 层代码可能导致的 bug。

• wxss 文件的热更新支持新版的 rpx 计算方式，支持 window resize 后自动重刷新，支持 @import 引入文件修改后自动刷新相应 css。

• javascript 文件修复了之前路径上 query 参数无法正确传递的 bug， 相比于官方工具修改 js 文件后重置到项目主页，WEPT 针对页面 JavaScript 文件使用动态热更新，即便是其它 js 文件，在页面刷新后也将自动导航到之前页面。

启动时编译所有文件

现在 WEPT 启动时会将所

有的 wxml、wxss 以及 JavaScript 进行解析后放入缓存对象，这有助于帮助开发者尽早发现编译期的 bug， 同时一定程度提高了页面载入速度（每个 wxss 文件大概 30ms 左右）

端口自动查找

新版会自动从 3000 端口往上查找可用的端口号，避免端口不可用导致报错中止的尴尬情况。

相比与之前较多改动官方 view 层和 service 层代码的方式，新版 WEPT 采用了新的代码注入方式，只需对官方代码做出 少量修改 即可完成新版升级，之后的代码更进不会再像这次便秘这么久了?