小程序模板網(wǎng)

通過(guò)一個(gè)需求揭秘多端編譯

發(fā)布時(shí)間:2020-05-20 09:59 所屬欄目:小程序開(kāi)發(fā)教程

過(guò)年在家辦公期間,接到了一個(gè)需求,需要將目前的 微信小程序自定義組件 擴(kuò)展到 支付寶小程序 平臺(tái)。關(guān)于需求的背景和歷史這邊就暫不多說(shuō)了,就從上面已說(shuō)明的內(nèi)容來(lái)看待這個(gè)需求吧。 接到需求的第一時(shí)間,筆者就思考,這不就是多端編譯嗎?話不多說(shuō),那就開(kāi)搞吧。

背景介紹

由于筆者的項(xiàng)目是一個(gè)單純的微信小程序自定義組件,打包工具是rollup,所以,筆者的技術(shù)方案是編寫一個(gè)rollup插件,來(lái)支持多端編譯。關(guān)于rollup和rollup插件的寫法本次不作過(guò)多介紹,有興趣的可以看它的 官方文檔 ,這邊只是介紹一下核心的多端編譯流程。

流程介紹

微信小程序組件包含 *.json 、 *.js 、 *.wxml 、 *.wxss 這4個(gè)文件,要轉(zhuǎn)換成支付寶小程序,其中json文件和wxss文件比較簡(jiǎn)單,前者原封不動(dòng),后者改一下后綴名就好了,主要要修改js和wxml兩個(gè)文件。

大致流程基本就是如下

  1. 差異整理
  2. 將代碼轉(zhuǎn)成AST樹(shù)
  3. 替換樹(shù)上的節(jié)點(diǎn)
  4. 根據(jù)新的AST樹(shù)生成代碼

acorn

對(duì)于js文件,要實(shí)現(xiàn)這些功能的話,業(yè)界已經(jīng)有一些出色的工具了。筆者選擇了 babel ,babel內(nèi)置acron作為javascript解釋器,生成符合estree標(biāo)準(zhǔn)的AST樹(shù)(可以在 astexplorer.net/ 中查看效果)。其次babel的封裝很漂亮,除了搭配webpack完成日常的構(gòu)建工作外,它還提供了 @babel/parser , @babel/generator , @babel/traverse , @babel/types 等優(yōu)秀的工具包,每個(gè)工具包都是單一職責(zé),職責(zé)很明確,幫助實(shí)現(xiàn)以上的流程(其實(shí)rollup內(nèi)置了acron實(shí)例,不過(guò)babel會(huì)更好用一些)。 其中 @babel/parser 可以將js代碼解釋為AST樹(shù), @babel/generator 將根據(jù)AST樹(shù)生成js代碼, @babel/traverse 支持高效地操作AST樹(shù)的節(jié)點(diǎn), @babel/types 則提供一些判斷函數(shù),幫助開(kāi)發(fā)者快速定位節(jié)點(diǎn)。

看一個(gè)簡(jiǎn)單的示例

function sayHello() {
  console.log('hello')
}

sayHello();
復(fù)制代碼

對(duì)于以上這段代碼,通過(guò)acron轉(zhuǎn)換后,得出的AST樹(shù)如下

{
  "type": "Program",
  "start": 0,
  "end": 58,
  "body": [
    {
      "type": "FunctionDeclaration",
      "start": 0,
      "end": 45,
      "id": {
        "type": "Identifier",
        "start": 9,
        "end": 17,
        "name": "sayHello"
      },
      "expression": false,
      "generator": false,
      "async": false,
      "params": [],
      "body": {
        "type": "BlockStatement",
        "start": 20,
        "end": 45,
        "body": [
          {
            "type": "ExpressionStatement",
            "start": 23,
            "end": 43,
            "expression": {
              "type": "CallExpression",
              "start": 23,
              "end": 43,
              "callee": {
                "type": "MemberExpression",
                "start": 23,
                "end": 34,
                "object": {
                  "type": "Identifier",
                  "start": 23,
                  "end": 30,
                  "name": "console"
                },
                "property": {
                  "type": "Identifier",
                  "start": 31,
                  "end": 34,
                  "name": "log"
                },
                "computed": false
              },
              "arguments": [
                {
                  "type": "Literal",
                  "start": 35,
                  "end": 42,
                  "value": "hello",
                  "raw": "'hello'"
                }
              ]
            }
          }
        ]
      }
    },
    {
      "type": "ExpressionStatement",
      "start": 47,
      "end": 58,
      "expression": {
        "type": "CallExpression",
        "start": 47,
        "end": 57,
        "callee": {
          "type": "Identifier",
          "start": 47,
          "end": 55,
          "name": "sayHello"
        },
        "arguments": []
      }
    }
  ],
  "sourceType": "module"
}
復(fù)制代碼

對(duì)于這段js代碼,如果要替換它的方法名為 sayHi 、打印出的 hello 替換為 Hi ,通過(guò)babel,只需要這樣做就可以了。

import { parse } from "@babel/parser";
import traverse from "@babel/traverse";
import generate from "@babel/generator";
import * as t from "@babel/types";

const code = `
function sayHello() {
  console.log('hello')
}

sayHello();
`;

const transform = code => {
  const ast = parse(code);
  traverse(ast, {
    enter(path) {
      if (t.isIdentifier(path.node, { name: "sayHello" })) {
        path.node.name = "sayHi";
      }
      if (t.isLiteral(path.node, { value: "hello" })) {
        path.node.value = "Hi";
      }
    }
  });
  const output = generate(ast, {}, code);
  return output;
};

console.log(transform(code).code);
復(fù)制代碼

也可以在 codeSandbox 中查看效果。

關(guān)于包的其它使用,可以查看 官方手冊(cè) 。

himalaya

對(duì)于wxml文件,筆者選擇了 himalaya-wxml ,它提供了 parse 和 stringify 兩個(gè)方法,前者將wxml解釋成AST樹(shù),后者反之(可以在 jew.ski/himalaya/ 中查看效果)。通過(guò) parse 將wxml代碼轉(zhuǎn)換成AST樹(shù)之后,接下去只需要手動(dòng)遞歸遍歷AST樹(shù)去替換節(jié)點(diǎn),再將其轉(zhuǎn)換回wxml代碼就可以完成工作了。

同樣,看一個(gè)簡(jiǎn)單的示例

<div id='main'>
  <span>hello world</span>
</div>
復(fù)制代碼

對(duì)于以上html代碼,通過(guò) himalaya 轉(zhuǎn)換后,生成的AST樹(shù)如下

[
  {
    "type": "element",
    "tagName": "div",
    "attributes": [],
    "children": [
      {
        "type": "text",
        "content": "\n  "
      },
      {
        "type": "element",
        "tagName": "span",
        "attributes": [],
        "children": [
          {
            "type": "text",
            "content": "hello world"
          }
        ]
      },
      {
        "type": "text",
        "content": "\n"
      }
    ]
  }
]
復(fù)制代碼

對(duì)于這段代碼html代碼,如果要替換它外層 div 的 id 為 container ,只需要這樣做就可以了。

import { parse, stringify } from "himalaya";

const code = `
<div id='main'>
  <span>hello world</span>
</div>
`;

const traverse = ast => {
  return ast.map(item => {
    if (item.type === "element" && item.attributes) {
      return {
        ...item,
        attributes: item.attributes.map(attr => {
          if (attr.key !== "id") {
            return attr;
          }
          return {
            ...attr,
            value: "container"
          };
        })
      };
    }
    return item;
  });
};

const transform = code => {
  const ast = parse(code);
  const json = traverse(ast);
  return stringify(json);
};

console.log(transform(code));
復(fù)制代碼

也可以在 codeSandbox 中查看效果。

核心介紹

流程和工具介紹的差不多了,接下來(lái)就開(kāi)始正題吧。 首先是整理差異,根據(jù)筆者的調(diào)研,微信小程序組件要轉(zhuǎn)換成支付寶小程序組件,大致有以下幾個(gè)改動(dòng)(只是符合筆者的需求,如果不完全,歡迎補(bǔ)充):

  1. wxml后綴名要改成axml
  2. wxss后綴名要改成acss
  3. wxml中的屬性wx-xxx要改成a-xxx
  4. wxml中的事件屬性bindxxx要改成onXxx
  5. 生命周期attached要替換成onInit
  6. 生命周期detached要替換成didUnmount
  7. 生命周期pageLifetimes.show要替換成didMount
  8. 生命周期pageLifetimes要?jiǎng)h除

改后綴名的工作相對(duì)簡(jiǎn)單,交給構(gòu)建工具,output配置里面指定一下就好了,重點(diǎn)是替換屬性。

轉(zhuǎn)換js部分代碼如下

import { parse } from '@babel/parser';
import traverse from '@babel/traverse';
import generate from '@babel/generator';
import * as t from '@babel/types';

function transformJs(code: string) {
  const ast = parse(code);
  let pp;

  traverse(ast, {
    enter(path) {
      if (t.isIdentifier(path.node, {name: 'attached'})) {
        path.node.name = 'onInit';
      }
      if (t.isIdentifier(path.node, {name: 'detached'})) {
        path.node.name = 'didUnmount';
        pp = path.parentPath;
      }
      if(t.isIdentifier(path.node.key, {name: 'show'})){
        path.node.key.name = 'didMount';
        pp.insertAfter(path.node);
      }
    },
    exit(path) {
      if(t.isIdentifier(path.node.key, {name: 'pageLifetimes'})){
        path.remove();
      }
    }
  });
  const output = generate(ast, {}, code);
  return output
}

export default transformJs

復(fù)制代碼

轉(zhuǎn)換wxml部分如下:

import { parse, stringify } from 'himalaya-wxml';

const traverseKey = (key: string) => {
  if(key.startsWith('wx:')){
    const postfix = key.slice(3);
    return `a:${postfix}`;
  }
  if(key === 'catchtouchmove'){
    return 'catchTouchMove';
  }
  if(key === 'bindtap'){
    return 'onTap';
  }
  if(key === 'bindload'){
    return 'onLoad';
  }
  if(key === 'binderror'){
    return 'onError';
  }
  if(key === 'bindchange'){
    return 'onChange';
  }
  return key
}

const traverseAst = (ast: any) => {
  return ast.map(item => {
    if(item.type !== 'element'){
      return item;
    }
    let res = item;
    if(item.attributes){
      res = {
        ...item,
        attributes: item.attributes.map(attr => ({
          ...attr,
          key: traverseKey(attr.key)
        }))
      }
    }
    if(item.children){
      res.children = traverseAst(item.children);
    }
    return res
  });
}

const transformWxml = (code: string) => {
  const ast = parse(code);
  const json = traverseAst(ast);
  return stringify(json)
}

export default transformWxml
復(fù)制代碼

以上,就擁有了兩個(gè)轉(zhuǎn)換函數(shù),再之后的工作,就是將這兩個(gè)函數(shù)運(yùn)行在rollup里,就完成了將微信小程序組件轉(zhuǎn)換成支付寶小程序組件的功能。

總結(jié)

javascript作為前端最常用的語(yǔ)言,我們不僅要熟悉它,更要能操控它,通過(guò)javascript解釋器,我們就擁有了操控它的能力。回本碩源,鞏固基礎(chǔ),才能在寒冬之中保持內(nèi)心的平靜。

 


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/25231.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢