WePY使用总结

安装

1. 安装node：下载地址：http://nodejs.cn/download/；（wepy 1.x 版本的使用node-v10.15.1版本，最新的版本node-v16.13.0 会报错；）

2. 安装npm；node自带npm；

3. 安装wepy；1.x跟2.x版本不兼容。

   1. 1.x版本，终端运行：npm install wepy-cli -g；（全局安装或更新WePY命令行工具，1.x版本）
   2. 2.x版本，终端运行：npm install @wepy/cli -g；（全局安装或更新WePY CLI命令行工具，2.x版本）

   wepy常用语法：

   // 全局安装或更新WePY命令行工具（1.x版本）
   npm install wepy-cli -g
   
   // 全局安装或更新WePY命令行工具（1.x版本），如果先安装了2.x版本，再安装1.x可能会无法覆盖，可以使用这个`--force`，强行覆盖安装1.x版本
   npm install wepy-cli -g --force
   
   // 全局安装或更新WePY CLI命令行工具（2.x版本）
   npm install @wepy/cli -g
   
   // 初始化项目，查看项目模板
   wepy list
   
   // 在开发目录中生成Demo开发项目（1.7.0之前）
   wepy new myproject
   
   // 在开发目录中生成Demo开发项目（1.7.0之后）使用 standard 模板初始化项目
   wepy init standard myproject
   
   // 切换至项目目录
   cd myproject
   
   // 监听并且编译项目
   npm run dev
   
   // 安装项目依赖包
   npm install
   
   // 实时编译
   wepy build --watch
   
   

4. 安装Visual Studio Code：下载地址：https://code.visualstudio.com；

   1. 打开任意wepy项目；
   2. 在 Visual Studio Code 里先安装 Vue 的语法高亮插件 Vetur。
   3. 打开任意 .wpy 文件。
   4. 点击右下角的选择语言模式，默认为纯文本。
   5. 在弹出的窗口中选择 .wpy 的配置文件关联...。
   6. 在选择要与 .wpy 关联的语言模式 中选择 Vue。

5. 安装微信开发者工具；

使用方法

需要用VS Code打开wepy的项目文件，微信小程序是无法识别wepy文件的，VS Code打开终端，运行npm run dev，编译完成后，会生成dist跟node_modules，微信小程序打开dist所在的路径即可。

报错总结

1. app.json找不到：一般是路径配置有问题：解决办法：
   1. 添加代码："miniprogramRoot": "./dist"；（路径在：project.config.json文件中，跟setting同级，再重新编译即可。最好配置相对路径，不然切换项目切换位置后就识别不到了。dist是编译后生成的小程序原生文件，也可能是其他的名字，改为其他名即可。）

语法总结

1. 子、父视图事件，同时响应，视图嵌套点击事件冲突：
   1. 子视图内将bindtap 更换为 catchtap；
   2. 子视图添加hover-stop-propagation='true'；（好像不添加也行）