版本信息:
- 微信开发者工具: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...