两个不同开发体系的小程序的合并

Nike 小程序问题:

旧版小程序的功能需要完整的出现在新版小程序里面,但是新旧两版采用了完全不同的技术架构

旧版采用了 mpvue ,新版采用 Taro

重新开发或者移植代码成本太高,分析源代码后决定采用合并目标代码的方式,在源代码经过适当的调整和改造之后,通过如下脚本可以快速解决目标代码的合并问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

#! /bin/bash

# 旧版本 mpvue 小程序的源码目录
oldPath="C:\meichangliang\work\Nike\miniprogram"

# 新版 Taro 源码目录
newPath="C:\meichangliang\work\Nike\weapp"

readonly oldPath
readonly newPath

# 切换目录

echo "切换 old 目录"

cd $oldPath

pwd

echo "开始打包"

git pull

npm run build

echo "打包完毕"

echo "切换 weapp 目录"

cd $newPath

echo "开始打包"

git pull

npm run build

echo "打包完毕"


# 打包完毕开始执行合并命令

echo "开始执行合并命令"

oldCodePath=${oldPath}/dist/wx/
weappCodePath=${newPath}/dist/
readonly oldPath
readonly newPath

echo "合并 app.js "

sed -i 's/"use strict";/\n;;;\n/g' ${weappCodePath}/app.js

cat ${weappCodePath}/app.js >> ${oldCodePath}/app.js

rm ${weappCodePath}/app.js

mv -f ${oldCodePath}/app.js ${weappCodePath}/app.js

echo "合并 app.wxss "

sed -i 's/@charset "UTF-8";/\n/g' ${weappCodePath}/app.wxss

cat ${weappCodePath}/app.wxss >> ${oldCodePath}/app.wxss

rm ${weappCodePath}/app.wxss

mv -f ${oldCodePath}/app.wxss ${weappCodePath}/app.wxss


echo "清理无关文件"

rm ${oldCodePath}/app.json

echo "开始合并页面和依赖文件"

cp -frap ${oldCodePath}. ${weappCodePath}

rm -rf ${oldCodePath}

注意事项:

  1. 页面路径和组件依赖目录以及资源目录要保证完全不相同
  2. 保证项目可以被完整编译

脚本原理:

将 taro 和 mpvue 编译后的目标代码进行合并,因为两者使用的全局变量完全不相同,所以 js 逻辑代码可以相互不干扰的运行,再加上小程序本身清晰和统一的目录架构,只要完成 app.js 和 app.wxss 的文件合并以及项目目录的合并就可以了,所以前提是目标代码不可以有同名的目录和文件。

路由不放呢可能需要手动添加。

Win10 下有 git-bashWSL , linux 下直接 bash 执行,macOS 执行一直报错,这垃圾系统。