微信开发者工具导入 wepy 项目“app.json 未找到”报错解决方法

版本信息：

• 微信开发者工具：1.03.2101150
• wepy：2.0
• wepy/cli：6.14.8

问题描述

按照 wepy 文档中的步骤新建项目：

$ npm install @wepy/cli -g # 全局安装 WePY CLI 工具
$ wepy init standard myproj # 使用 standard 模板初始化项目
$ cd myproj # 进入到项目目录
$ npm install # 安装项目依赖包

使用开发者工具导入 myproj 根目录，即可预览效果。

但我使用开发者工具导入项目后，控制台报错：[ app.json 文件内容错误] app.json: app.json 未找到。

上网搜索了一下，看到很多人提到了一个方法：

向project.config.json文件中添加如下代码后从新编译即可：

"miniprogramRoot": "./dist"

然后我这里的报错变成了：[ app.json 文件内容错误] dist/app.json: dist/app.json 未找到。

解决方法

虽然没有成功解决问题，但有人提到：出现这个问题的原因是微信开发者工具导入项目时修改了 project.config.json 文件。

用 cli 重新新建一个项目，不用微信开发者工具导入，直接打开 project.config.json 文件，内容如下：

{
  "description": "A WePY project",
  "setting": {
    "urlCheck": true,
    "es6": false,
    "postcss": false,
    "minified": false
  },
  "compileType": "miniprogram",
  "appid": "touristappid",
  "projectname": "myproj",
  "miniprogramRoot": "./weapp"
}

可以注意到这一行："miniprogramRoot": "./weapp"。将这行添加到导入到开发者工具的项目对应文件中，即可正常编译预览。

整个weapp都是自动生成的项目中没有的。根据里面文件的内容，可以看出是由组件化开发的 .wpy 等文件翻译成的小程序原生的 js/json/wxml/wxss 等对应文件，包括程序入口 app 系列文件。

其他文章中提到的 ./dist 可能是 cli 其他版本生成的不同文件结构。

---

21.02.21 更新

之前这个方法暂时解决了一个报错，但是发现又出现了新的一些bug，比如组件不能正确渲染、找不到页面、点击事件触发失败等等，如下（wepy的demo项目）。

关闭ES5转ES6

在小程序开发工具中，把详情-本地设置-ES6转ES5 设置关掉可以解决部分问题，原因不明。

重新导入项目

关闭上述这个转换之后还是有一些问题。后来又发现一个玄学解决办法，是目前为止看起来最简单可靠的办法：

之前在小程序开发工具中导入的是 myproj 的根目录。用其他编辑器（例如 VS Code）打开项目根目录并启动项目，如果编译成功（控制台指令和输出如下），项目中会生成 ./weapp 目录，就是第一个方法中添加在配置文件中的那个目录。

在小程序开发工具中导入项目时选择这个生成的 weapp 目录，即可正确编译和渲染。并且在VSC中修改保存wepy的代码之后，小程序开发工具这边也会自动更新（npm 检测到代码变动后自动重新编译）。

$ npm run dev

> bj_mini_program@0.0.2 dev E:\0_project\sk_BulletJournal\BJ_miniProgram
> wepy build --watch

# ...

[20:13:05] info build finished
[20:13:05] info watching...

参考

http://www.webxlab.net/article/detail/VBgKvl7ALW