专栏名称: 前端外刊评论
最新、最前沿的前端资讯,最有深入、最干前端相关的技术译文。
目录
相关文章推荐
商务河北  ·  经开区“美•强•优”三重奏 ·  16 小时前  
前端早读课  ·  【第3451期】前端 TypeError ... ·  3 天前  
51好读  ›  专栏  ›  前端外刊评论

基于AST来转换微信和支付宝小程序

前端外刊评论  · 公众号  · 前端  · 2017-11-27 20:46

正文

支付宝小程序为了兼容微信小程序,在很多的接口定义和设计上都是一样的,方便程序的移植性,虽然初衷是好的,但是在最后的落地过程中,变化还是非常大的。

常规思路

对于大家能够很快想到的解决办法就是正则,通过强大的正则表达式来替换需要被替换的接口名和参数,这也是目前已经有的解决方案。这种方案有3个现象级问题,第一是开发者需要有强大的正则功底,第二是即使正则掌握度很好,对于特定的case,正则也是不能解决的(写过复杂正则的同学应该了解),最后一点就是很难有精确的转换日志文件,帮助用户查看进行了哪些修改。

落地方案

只有通过预编译和分析得出来的结果才是真正我们需要的,所以我们必须得从AST来解决问题,分析相应的接口和参数,最终得到我们需要的结果。

转换流程图:

解决步骤

1. 设置对象匹配,用于mapping阶段

a. 对于api,我们需要类型下面这样的一份转换对象。

  1. /**

  2. *  1.如果值为null,表示不存在该接口

  3. *  2.如果有值,

  4. *    a. 其中有tips,表示给予的建议

  5. *    b. mapping,需要转换相应的接口名

  6. *    c. 如果有params,则需要转换相应的参数

  7. *

  8. */

  9.  wx: {

  10.    request: {

  11.      mapping: 'httpRequest',

  12.      params: {

  13.        header: 'headers'

  14.      }

  15.    },

  16.    uploadFile: {

  17.      params: {

  18.        name: 'fileName'

  19.      }

  20.    }

  21.  }

说明: wx 表示微信小程序的对象, request 表示wx发送请求的接口名,而在支付小程序中,发请求的接口名叫 httpRequest ,在参数对象中,微信使用 header 来存放http头,而支付宝则变为 headers

b. 对于view模块,需要类似的mapping

  1.  view: {

  2.    attrs: {

  3.      'hover-stop-propagation': null







请到「今天看啥」查看全文