uni-cli 编译和打包并自动打开微信开发者工具

需求：平时使用uni-cli开发，是为了获得vscode更好的提到提示以及其他的便捷工具以及提升效率；带有一个缺点，那便是 uni-cli 编译之后，你需要手动打开 微信开发者工具，找到项目下的 dist/dev/mp-weixin 或者 dist/build/mp-weixin。这可能需要花费你几秒中的时间，粗看没啥，细算就很浪费。特别是打完包，还要关闭之前的dev项目,找到build项目 发包；这有的还费 预计10秒  -- 因此，作为懒人的我，决定去偷个懒。

前期准备,可以通知打开两篇文章

uni-cli

小程序自动化

第一步，写脚本 

dev专用 openWeixin.js

const automator = require('miniprogram-automator')
const portfinder = require('portfinder') // 查找可用的端口号

portfinder.getPortPromise()
  .then(port => {
    automator
      .launch({
        projectPath: './dist/dev/mp-weixin',
        port: port,
      })
      .then(async (miniProgram) => {
        await miniProgram.reLaunch('/pages/index/index')
        // await page.waitFor(500)
        // await miniProgram.close()
      })
  })
  .catch(err => {
    console.log('Error finding available port: ', err)
  })

build 专用 openBuildWeixin.js

const automator = require('miniprogram-automator')
const portfinder = require('portfinder') // 查找可用的端口号

portfinder.getPortPromise()
  .then(port => {
    automator
      .launch({
        projectPath: './dist/build/mp-weixin',
        port: port,
      })
      .then(async (miniProgram) => {
        await miniProgram.reLaunch('/pages/index/index')
        // await page.waitFor(500)
        // await miniProgram.close()
      })
  })
  .catch(err => {
    console.log('Error finding available port: ', err)
  })

第二步，修改 package.json

重点看前面 4个 ，记得package.json和上面的两个文件夹在同一层级下

"scripts": {
    "dev": "npm-run-all --parallel dev:mp-weixin open --continue-on-error",
    "build": "npm-run-all --parallel build:mp-weixin open-build --continue-on-error",
    "open": "node openWeixin",
    "open-build": "node openBuildWeixin",
    "bootstrap": "pnpm install",
    "clean": "pnpm rimraf node_modules && pnpm rimraf dist",
    "dev:app": "uni -p app",
    "dev:custom": "uni -p",
    "dev:h5": "uni",
    "dev:h5:ssr": "uni --ssr",
    "dev:mp-alipay": "uni -p mp-alipay",
    "dev:mp-baidu": "uni -p mp-baidu",
    "dev:mp-kuaishou": "uni -p mp-kuaishou",
    "dev:mp-lark": "uni -p mp-lark",
    "dev:mp-qq": "uni -p mp-qq",
    "dev:mp-toutiao": "uni -p mp-toutiao",
    "dev:mp-weixin": "uni -p mp-weixin",
    "dev:quickapp-webview": "uni -p quickapp-webview",
    "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
    "dev:quickapp-webview-union": "uni -p quickapp-webview-union",
    "build:app": "uni build -p app",
    "build:custom": "uni build -p",
    "build:h5": "uni build",
    "build:h5:ssr": "uni build --ssr",
    "build:mp-alipay": "uni build -p mp-alipay",
    "build:mp-baidu": "uni build -p mp-baidu",
    "build:mp-kuaishou": "uni build -p mp-kuaishou",
    "build:mp-lark": "uni build -p mp-lark",
    "build:mp-qq": "uni build -p mp-qq",
    "build:mp-toutiao": "uni build -p mp-toutiao",
    "build:mp-weixin": "uni build -p mp-weixin",
    "build:quickapp-webview": "uni build -p quickapp-webview",
    "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
    "build:quickapp-webview-union": "uni build -p quickapp-webview-union",
    "lint:eslint": "eslint . --cache --max-warnings 0 --fix",
    "lint:prettier": "prettier --write  \"src/**/*.{js,json,ts,tsx,css,less,scss,vue,html,md}\"",
    "lint:stylelint": "stylelint --fix ",
    "prepare": "husky install",
    "test": "vitest",
    "test:ui": "vitest --ui",
    "test:coverage": "vitest run --coverage",
    "updatehooks": "git config core.hooksPath .git/hooks/ && rm -rf .git/hooks && npx simple-git-hooks"
  },

第三步，安装依赖

pnpm i miniprogram-automator -D
pnpm i portfinder -D
pnpm i npm-run-all -D

第四部，赠送两个脚本

statics.py

import os

# 静态文件目录路径列表
statics_dirs = ['static','packageActivity/static']

# 输出的文件名
output_filename = './enums/ImageEnum.ts'

# 获取当前工作目录
current_dir = os.getcwd()

# 输出文件的完整路径
output_file = os.path.join(current_dir, output_filename)

# 获取所有图片文件和SVG文件
image_files_by_directory = {}
svg_files_by_directory = {}

for statics_dir in statics_dirs:
    for root, dirs, files in os.walk(statics_dir):
        for file in files:
            file_path = os.path.join(root, file)
            if file.lower().endswith(('.png', '.jpg', '.jpeg', '.gif')):
                directory_name = os.path.basename(root)
                if directory_name not in image_files_by_directory:
                    image_files_by_directory[directory_name] = []
                image_files_by_directory[directory_name].append(file_path)
            elif file.lower().endswith('.svg'):
                directory_name = os.path.basename(root)
                if directory_name not in svg_files_by_directory:
                    svg_files_by_directory[directory_name] = []
                svg_files_by_directory[directory_name].append(file_path)

# 生成内容
content = ''

# TypeScript 导出语句 - Images
content += '// TypeScript exports - Images\n\n'
content += 'export enum ImageEnum  {\n'

for directory_name, files in image_files_by_directory.items():
    content += f'\n\n\n\n  ///  {directory_name} ///\n\n'
    for file_path in files:
        file_name = os.path.splitext(os.path.basename(file_path))[0].upper().replace('-', '_')
        image_path = f'/{os.path.relpath(file_path, current_dir)}'
        content += f'  {file_name} = `{image_path}`, \n'

content += '};\n\n'

# TypeScript 导出语句 - SVGs
content += '// TypeScript exports - SVGs\n\n'
content += 'export enum SVGEnum  {\n'

for directory_name, files in svg_files_by_directory.items():
    content += f'\n\n\n\n  ///  {directory_name} ///\n\n'
    for file_path in files:
        file_name = os.path.splitext(os.path.basename(file_path))[0].upper().replace('-', '_')
        svg_path = f'/{os.path.relpath(file_path, current_dir)}'
        content += f'  {file_name} = `{svg_path}`, \n'

content += '};\n\n'

# 写入文件
with open(output_file, 'w') as f:
    f.write(content)

print(f'Successfully generated {output_file}')

pages.py

import json
# 输出的文件名
output_filename = './enums/pageEnum.ts'
# 读取 pages.json 文件
with open('pages.json', 'r', encoding='utf-8') as f:
    pages_config = json.load(f)

# 生成 TypeScript 导出语句
content = 'export enum PageEnum {\n'

content += f'\n\n  ///  主包 ///\n\n'

# 处理主包 pages
for page in pages_config['pages']:
    path = page['path']
    package_name = path.split('/')[0].upper()
    page_name = path.split('/')[-1].upper().replace('-', '_')

    
    
    title = page['style'].get('navigationBarTitleText', 'Untitled Page')
    content += f'  /**\n'
    content += f'   * @description {title} 页面\n'
    content += f'   */\n'
    content += f'  BASE_{page_name} = \'/{path}\',\n'

# 处理子包 subPackages
for sub_package in pages_config['subPackages']:
    root = sub_package['root']
    content += f'\n\n\n\n  ///  {root } 分包 ///\n\n'
    for page in sub_package['pages']:
        path = page['path']
        page_name = path.split('/')[-1].upper().replace('-', '_')
        title = page['style'].get('navigationBarTitleText', 'Untitled Page')
        package_name = root.upper().replace("-", "_")
        content += f'  /**\n'
        content += f'   * @description {package_name}-{title} 页面\n'
        content += f'   */\n'
        content += f'  {package_name}_{page_name.upper().replace("/", "_").replace("-", "_")} = \'/{root}/{path}\',\n'

content += '}\n'

# 写入文件
with open(output_filename, 'w', encoding='utf-8') as f:
    f.write(content)

print(f'Successfully generated {output_filename}')