Skip to content

Conversation

cloudcome
Copy link

@cloudcome cloudcome commented Aug 18, 2025

问题起因

小程序进行了分包开发,主包里有个路径是 pages/my-book/detail,副包的目录是 pages-my,有一个页面是 pages-my/book/detail,这是两个完全不同的页面路径:

  • 主包页面: pages/my-book/detail,在 src/pages-json-js 里的 js 变量是 PagesMyBookDetail
  • 副包页面: pages-my/book/detail,在 src/pages-json-js 里的 js 变量是 PagesMyBookDetail

两个不同的路径,对应的 js 变量相同,导致 js 报错,无法启动应用。参考图如下:

image

改进方法

因此需要修改 js 变量生成逻辑。

  • 不必要改成大驼峰格式(新增逻辑)
  • 将路径分隔符换成$(新增逻辑)
  • 将非字母、数字、换成_(改进逻辑)

因此修改后的路径对应的变量是:

  • 主包页面: pages/my-book/detail,在 src/pages-json-js 里的 js 变量是 pages$my_book$detail
  • 副包页面: pages-my/book/detail,在 src/pages-json-js 里的 js 变量是 pages_my$book$detail

此时,两个不同的路径,对应的 js 变量也不同,应用可以正常启动。参考图如下:

image

前后对比

page.json 里直观体现是这样的:

{
  "pages": [
    {
      "path": "my-book/detail" // 原先 -> PagesMyBookDetail ❌重复了
    },
    {
      "path": "my-book/detail" // 现在 -> pages$my_book$detail ✅不重复
    }
  ],
  "subPackages": [
    {
      "root": "pages-my",
      "pages": [
        {
          "path": "book/detail" // 原先 -> PagesMyBookDetail ❌重复了
        },
        {
          "path": "book/detail" // 现在 -> pages_my$book$detail ✅不重复
        }
      ]
    }
  ]
}

引申思考

其实更安全的方法是使用 md5 等摘要算法,不过此改进方法已经在最大程度上避免了 js 变量的重复。

@chouchouji
Copy link
Contributor

这个是为了允许设置重复的 path ?

@cloudcome
Copy link
Author

@chouchouji 我重新修改了文案。小程序进行了分包开发,主包里有个路径是 pages/my-book/detail,副包的目录是 pages-my,有一个页面是 pages-my/book/detail,这是两个完全不同的页面路径:

  • 主包: pages/my-book/detail,在 src/pages-json-js 里的 js 变量是 PagesMyBookDetail
  • 副包: pages-my/book/detail,在 src/pages-json-js 里的 js 变量是 PagesMyBookDetail

两个不同的路径,对应的 js 变量相同,导致 js 报错,无法启动应用。因此需要修改 js 变量生成逻辑。

@chouchouji
Copy link
Contributor

@chouchouji 我重新修改了文案。小程序进行了分包开发,主包里有个路径是 pages/my-book/detail,副包的目录是 pages-my,有一个页面是 pages-my/book/detail,这是两个完全不同的页面路径:

  • 主包: pages/my-book/detail,在 src/pages-json-js 里的 js 变量是 PagesMyBookDetail
  • 副包: pages-my/book/detail,在 src/pages-json-js 里的 js 变量是 PagesMyBookDetail

两个不同的路径,对应的 js 变量相同,导致 js 报错,无法启动应用。因此需要修改 js 变量生成逻辑。

OK,我来测试一下,报错的小程序平台是哪些?

@cloudcome
Copy link
Author

@chouchouji 小程序平台是没有报错的,是 h5 启动报错。

@chouchouji
Copy link
Contributor

@chouchouji 小程序平台是没有报错的,是 h5 启动报错。

也就是说你做了分包,小程序运行不会报错,h5 上会出现命名问题,有测试过app吗?安卓,ios等等

@cloudcome
Copy link
Author

@chouchouji 是的。没有测试过 APP。

@chouchouji
Copy link
Contributor

@chouchouji 是的。没有测试过 APP。

我测试了app也有问题,但是你的改动影响面比较大,而且不能保证绝对没有重复的情况,我们需要讨论下合适的做法

@cloudcome
Copy link
Author

cloudcome commented Aug 18, 2025

@chouchouji 是的。没有测试过 APP。

我测试了app也有问题,但是你的改动影响面比较大,而且不能保证绝对没有重复的情况,我们需要讨论下合适的做法

更安全的放在“引申思考”里提到了,使用 md5 等摘要算法,这样是绝对安全的。但我的改进方法,可以在最大程度上避免重复了。重复的可能性在:

pages/my_book/detail -> pages$my_book$detail
   ^^^^^^^^^^^^ 使用 1 个下划线
pages/my__book/detail -> pages$my_book$detail
   ^^^^^^^^^^^^ 使用 2 个下划线
pages/my-book/detail -> pages$my_book$detail
   ^^^^^^^^^^^^ 使用 1 个短横线
pages/my--book/detail -> pages$my_book$detail
   ^^^^^^^^^^^^ 使用 2 个短横线

不过这样起名的概率非常低。

@chouchouji
Copy link
Contributor

@chouchouji 是的。没有测试过 APP。

我测试了app也有问题,但是你的改动影响面比较大,而且不能保证绝对没有重复的情况,我们需要讨论下合适的做法

更安全的放在“引申思考”里提到了,使用 md5 等摘要算法,这样是绝对安全的。但我的改进方法,可以在最大程度上避免重复了。重复的可能性在:

pages/my_book/detail -> pages$my_book$detail
   ^^^^^^^^^^^^ 使用 1 个下划线
pages/my__book/detail -> pages$my_book$detail
   ^^^^^^^^^^^^ 使用 2 个下划线
pages/my-book/detail -> pages$my_book$detail
   ^^^^^^^^^^^^ 使用 1 个短横线
pages/my--book/detail -> pages$my_book$detail
   ^^^^^^^^^^^^ 使用 2 个短横线

不过这样起名的概率非常低。

加hash就是所有的名字加hash了,不太友好

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants