WePY使用总结

安装

1. 安装node：下载地址：http://nodejs.cn/download/；（wepy 1.x 版本的使用node-v14.18.2，或使用低版本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 CLI命令行工具（2.x版本）没有权限时
   sudo npm install @wepy/cli -g
   
   // 初始化项目，查看项目模板
   wepy list
   
   // 查看版本号
   wepy -v
   
   // 在开发目录中生成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是编译后生成的小程序原生文件，也可能是其他的名字，改为其他名即可。）

2. 报错：

   [ dist/app.json 文件内容错误] dist/app.json: 未找到 ["sitemapLocation"] 对应的 sitemap.json 文件(env: macOS,mp,1.05.2201240; lib: 2.14.1)
   

   解决办法：

   1. 微信开发者工具，删除该项目；
   2. 关闭微信开发者工具；
   3. 关闭Visual Studio开发工具；
   4. 重新打开Visual Studio开发工具，并编译运行；
   5. 重新导入该项目；

3. 报错：

   <--- Last few GCs --->
   rt of marking 242 ms) (average mu = 0.200, current mu = 0.087) allocation f[27446:0x110008000]    14362 ms: Mark-sweep 403.6 (421.2) -> 401.9 (421.7) MB, 227.6 / 0.0 ms  (+ 0.0 ms in 53 steps since start of marking, biggest step 0.0 ms, walltime since start of marking 244 ms) (average mu = 0.143, current mu = 0.078) allocation f[27446:0x110008000]    14680 ms: Mark-sweep 404.1 (421.7) -> 403.1 (422.2) MB, 302.5 / 0.0 ms  (average mu = 0.091, current mu = 0.048) allocation failure scavenge might not succeed
   
   
   <--- JS stacktrace --->
   
   ==== JS stack trace =========================================
   
       0: ExitFrame [pc: 0x3ff6c105be3d]
   Security context: 0x134260f1e6e1 <JSObject>
       1: setContext [0x1342a829ec99] [/Users/hsh/Desktop/??/1.??-???/4.BBC-Wechat-App-Administrator-uat-22.2.0.57-gas/node_modules/babel-traverse/lib/path/context.js:~154] [pc=0x3ff6c16c5e05](this=0x1342c522d639 <NodePath map = 0x134225ccb371>,context=0x1342c522d5b9 <TraversalContext map = 0x134225ccb529>)
       2: /* anonymous */ [0x1342498cb6d9] [/Users/hsh/De...
   
   FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
    1: 0x10003b1db node::Abort() [/usr/local/bin/node]
    2: 0x10003b3e5 node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
    3: 0x1001a86b5 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
    4: 0x100573ad2 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
    5: 0x1005765a5 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/usr/local/bin/node]
    6: 0x10057244f v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
    7: 0x100570624 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
    8: 0x10057cebc v8::internal::Heap::AllocateRawWithLigthRetry(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/bin/node]
    9: 0x10057cf3f v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/bin/node]
   10: 0x10054c884 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/usr/local/bin/node]
   11: 0x1007d4894 v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node]
   12: 0x3ff6c105be3d 
   13: 0x3ff6c16c5e05
   

   原因：

   这个错误的意思时内存溢出，为什么会内存溢出呢？
   原来 nodejs 默认限制了最大可使用的内存大小。
   nodejs V8 引擎在 64 位机器上默认限制使用内存最大不超过 1.7GB，超过这个限制官方建议尝试优化为多线程方式。
   
   当前端项目非常庞大时，编译时会占用很多资源，所以就会出现内存溢出的问题。
   

   解决办法：

   1. cd到我们的项目目录下执行：

   // windows
   set NODE_OPTIONS=--max_old_space_size=4096
   
   // mac/linux
   export NODE_OPTIONS=--max_old_space_size=4096
   

   2. 再执行npm run dev 即可；

4. 报错：

   [WARNING] 找不到编译器：wepy-compiler-sass。
   [Error] 未发现相关 sass 编译器配置，请检查wepy.config.js文件。
   

   解决办法：

   1. 在Visual Studio下打开终端；
   2. 执行npm rebuild node-sass；
   3. 如果还报错：再进行以下操作：

      1. 安装sass：终端执行：npm i node-sass；

      2. 安装wepy-compiler-sass插件：终端执行：npm install wepy-compiler-sass --save-dev；

      3. 配置wepy.config.js：Visual Studio找到wepy.config.js文件，配置如下：

         module.exports = {
           compilers: {
             sass: {
               outputStyle: 'compressed'
             },
           },
         }
         

语法总结

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