小程序工程化开发之：重构稿转为wxml_平安银行微海报,口袋银行微海报,微海报小程序,平安银行小程序,小程序工程化《Hi, Kainy》学习笔记,建站❤编程,》微海报,小程序,开发,工程化,

需求背景

在开发微海报小程序时，由于团队没有过小程序开发经历。按照常规流程，重构输出的是移动端 HTML 网页，以 rem 为尺寸单位。这与小程序的 wxml 和 rpx 之间有一个转化的过程，如果手工转化，无疑带来巨大的额外工作量，而让重构同学短期内熟练掌握小程序开发工具和一套新的标记语言又不太现实。

问题定义

按照以往的前端工程分工：设计出图－>重构出页面->逻辑和交互开发，我们需要新增一个步骤来消化小程序展示层与常规网页的差异，将转换工作平滑衔接进现有流程，以最小的投入达到小程序开发条件。

解决方案

明确了目标后，就可以找具体解决方案了，本着“不重复造轮子”的精神，先网上搜搜，果然这是一个比较通用的问题。京东凹凸团队早在17年6月就已开源了 html-to-wxapp ，按照操作指引试了一下，却没有得到预期的结果，研究了一番似乎是文件匹配写法问题，于是 fork 一份动手修复了下，重新发布到 npm 方便后续使用。

使用方法

开始

1 2	//安装 npm install h2a -g

使用

例如：源码test目录文件结构如下

├──test
│   ├── images
│   ├── index.html
│   └── index.css

执行：

1	wxapp transfer test

将会转换成：

├──_wxapp_test
│   ├── images
│   ├── index.wxml
│   └── index.wxss

说明

转换工具对 html 标签进行替换并删除了 script 等标签及内容，将 css 里的 rem 单位替换成 rpx，并进行数值转换
stylelint 规则限制了动画和过渡的使用、限制了 img 之外的类型选择器、禁止了两层以上的级联
小程序的样式有许多限制，还需要手动调试
如果转换出来的样式尺寸不对，可以调整 config.js 里的 remTimes 参数，来符合自己团队的重构规范。

结语

以上介绍了一个将 html 及 css 转换成微信小程序的 wxml 和 wxss 的小工具，实现小程序开发与现有前端流程整合的过程。

最近发现越来越多小程序的界面变精致了，认真观察发现主要是由于采用自定义组件替换了以往一成不变的基础组件。后面的文章打算聊聊通过自定义组件实现模块化开发小程序，达到复杂度拆解和进度控制的工程化目的。

为您推荐