小程序全局组件使用（自动插入节点）

前言

小程序中没有全局环境，像vue的全局组件小程序实现起来非常困难，vue中可以直接在app.vue中注册，但是小程序需要每个page中都插入节点才可以使用

解决方案

在小程序中实现全局组件，首先，需要在app.json中注册，然后需要在所有的page中插入节点，可以通过node脚本实现

新建文件generator/index.js
代码如下

/**
 * @description: 将组件插入到小程序项目，包括app.json和page
 * @param {string} cpName 组件名
 * @param {string} cpPath 组件路径
 * @param {string} cpString 要插入的组件字符串内容
 * @param {Array<string>} whiteList 不需要插入的组件
 * @return {*}
 */
function insertComponent(
  cpName = 'new-user-dialog',
  cpPath = '/components/newUserDialog/newUserDialog',
  cpString = `<new-user-dialog class="new-user-dialog"></new-user-dialog>`,
  whiteList = [
    'pages/home/index',
  ]
) {
  try {
    const path = require('path');
    const fs = require('fs');
    const entryFilePath = './app.json';

    if (fs.statSync(entryFilePath)) {
      const { EOL } = require('os');

      // app.json 内容
      const contentMain = fs.readFileSync(path.resolve(entryFilePath), {
        encoding: 'utf-8',
      });
      // 获取每行内容
      const contentMainLine = contentMain.split(/\r?\n/g);
      // 组件（'new-user-dialog':）正则
      const compReg = eval(`/['"]?${cpName}['"]?:/`);
      // 组件正则
      const usingComponentReg = /['"]?usingComponents['"]?:/;
      // 检测组件配置项所在行
      const ucLineNum = contentMainLine.findIndex(line =>
        line.match(usingComponentReg)
      );

      // TODO: 插入组件部分
      // 检测tabbar
      const tabBarStartReg = /['"]?tabBar['"]?:/;
      // app.json没有配置自定义组件，自定义添加
      if (!compReg.test(contentMain)) {
        // 如果没有usingComponent配置项的话，就找tabbar，放在后面
        if (ucLineNum < 0) {
          const tabBarLineNum = contentMainLine.findIndex(line =>
            line.match(tabBarStartReg)
          );
          contentMainLine[
            tabBarLineNum - 1
          ] += `${EOL}  "usingComponents": { "${cpName}": "${cpPath}" },`;
        } else {
          // 有配置项，放到配置项里面
          contentMainLine[ucLineNum] += `${EOL}    "${cpName}": "${cpPath}",`;
        }
        fs.writeFileSync(
          path.resolve(entryFilePath),
          contentMainLine.join(EOL),
          { encoding: 'utf-8' }
        );
      }

      // TODO: 插入page部分
      // pages开始，逗号结尾的部分
      const pageConfigReg = /['"]?pages['"]?: \[([^\]]+)\],/;
      // 将pages按照逗号分隔为数组
      const pageList = pageConfigReg
        .exec(contentMain)[1]
        .replace(/\s+/g, '')
        .replace(/"/g, '')
        .replace(/\n\s+/g, '')
        .split(',')
        .filter(pn => {
          return !whiteList.includes(pn);
        });
      pageList.forEach(pagePath => {
        insertFileToPage(pagePath, cpString);
      });
    }
  } catch (error) {
    console.warn(error);
  }
}

/**
 * @description: 将组件插入到page
 * @param {string} pagePath 组件page路径
 * @param {string} cpString 要插入的组件字符串内容
 * @return {*}
 */
function insertFileToPage(pagePath, cpString) {
  const path = require('path');
  const fs = require('fs');
  if (pagePath.indexOf('wxml' < 0)) {
    pagePath += '.wxml';
  }
  const pageContent = fs.readFileSync(path.resolve(pagePath), {
    encoding: 'utf-8',
  });
  // 组件（'new-user-dialog':）正则
  const compReg = new RegExp(cpString);

  // 没有引用标签则添加标签引用
  if (!compReg.test(pageContent)) {
    const { EOL } = require('os');
    const pageLine = pageContent.split(/\r?\n/g);
    // 添加到最后一行
    pageLine[pageLine.length - 1] += `${EOL}${cpString}`;
    fs.writeFileSync(path.resolve(pagePath), pageLine.join(EOL), {
      encoding: 'utf-8',
    });
  }
}

/**
 * @description: 将组件插入到小程序项目，包括app.json和page
 * @param {string} cpName 组件名
 * @param {string} cpPath 组件路径
 * @param {string} cpString 要插入的组件字符串内容
 * @param {Array<string>} whiteList 不需要插入的组件
 * @return {*}
 */
function deleteComponent(
  cpName = 'new-user-dialog',
  cpPath = '/components/newUserDialog/newUserDialog',
  cpString = `<new-user-dialog class="new-user-dialog"></new-user-dialog>`,
  whiteList = [
    'pages/mine/login/logout/logut',
    'pages/mine/login/method/method',
    'pages/mine/login/scan/scan',
    'pages/mine/login/people/people',
    'pages/mine/collect/collect',
  ]
) {
  try {
    const path = require('path');
    const fs = require('fs');
    const entryFilePath = './app.json';

    if (fs.statSync(entryFilePath)) {
      // app.json 内容
      const contentMain = fs.readFileSync(path.resolve(entryFilePath), {
        encoding: 'utf-8',
      });
      // pages开始，逗号结尾的部分
      const pageConfigReg = /['"]?pages['"]?: \[([^\]]+)\],/;
      // 将pages按照逗号分隔为数组
      const pageList = pageConfigReg
        .exec(contentMain)[1]
        .replace(/\s+/g, '')
        .replace(/"/g, '')
        .replace(/\n\s+/g, '')
        .split(',')
        .filter(pn => {
          return !whiteList.includes(pn);
        });
      pageList.forEach(pagePath => {
        deleteFileToPage(pagePath, cpString);
      });
    }
  } catch (error) {
    console.warn(error);
  }
}

/**
 * @description: 将组件从page中删除
 * @param {string} pagePath 组件page路径
 * @param {string} cpString 要删除的组件字符串内容
 * @return {*}
 */
function deleteFileToPage(pagePath, cpString) {
  const path = require('path');
  const fs = require('fs');
  if (pagePath.indexOf('wxml' < 0)) {
    pagePath += '.wxml';
  }
  let pageContent = fs.readFileSync(path.resolve(pagePath), {
    encoding: 'utf-8',
  });
  // 组件（'new-user-dialog':）正则
  const compReg = new RegExp(cpString, 'g');

  // 有引用标签则删除标签引用
  if (compReg.test(pageContent)) {
    pageContent = pageContent.replace(compReg, '');
    fs.writeFileSync(path.resolve(pagePath), pageContent, {
      encoding: 'utf-8',
    });
  }
}

// deleteComponent()
insertComponent();

使用
node .\generator\index.js

参考
https://blog.csdn.net/weixin_43972437/article/details/124765077