微信小程序踩坑记

逃离我推掉我的手 2022-02-04 00:41 682阅读 0赞

## API接口 ##

### `wx.authorize(Object object)` ###

*  > ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70]
    
    图片是官方API的介绍，注意①红框标记的部分，说会弹框，其实不会！那如何引导用户进行授权呢？根据②我找到了下面介绍
    
    > ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 1]
    
    根据描述，可以调用[wx.openSetting][]打开设置页面，引导用户进行授权，我们打开该API看一下
    
    > ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 2]
    
    根据描述2.3.0版本可以打开设置界面，但实际并没有，凸(艹皿艹 )!。点[详情][Link 1]继续看
    
    > ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 3]
    
    \[○･｀Д´･ ○\]，艹，看了这么多，原来打开授权窗口改成了用户主动点击按钮才可以。心好累！除了这种方式还有一种方式
    
    > ![在这里插入图片描述][20190506153403597.png]
    
    很小的一行文字，是在[授权][Link 2]页面的最底部，太坑了。

### `wx.getImageInfo(Object object)` ###

> 获取图片信息。网络图片`需先配置download域名`才能生效。

在使用该API的时候，记得将需要下载图片的url域名在微信公众平台配置成合法域名，否则会导致`[publib]:1 getImageInfo:fail download image fail`。  
1.调用该API方法如下：

/** * 保存图片到相册 */
    		saveImageToPhotosAlbum() { 
    			// 获取小程序图片在本地的缓存路径
    			uni.getImageInfo({ 
    				//小程序图片
    				src: uni.getStorageSync('goods').imgPath,
    				success(res) { 
    					uni.saveImageToPhotosAlbum({ 
    						filePath: res.path,
    						success() { 
    							uni.showModal({ 
    								title:'',
    								content: '✌️图片保存成功，\n快去分享吧',
    								showCancel: false
    							})
    						}
    					})
    				},
    				fail(res) { 
    					console.debug(res)
    					uni.showToast({ 
    						icon:'none',
    						title:res.errMsg
    					})
    				}
    			})
    			
    		}

2.具体错误信息如下：  
![在这里插入图片描述][20190530095703506.png]  
3.配置位置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 4]

### `$invoke(com:String|Component)：调用另一组件的方法。` ###

> 优先调用methods中方法，如果方法不存在，则调用组件的自定义方法，调用自定义方法时，不会传递事件$event。

// coma.js
      this.$invoke('./ComB', 'func1', 'p1', 'p2');
      this.$invoke('./ComB', 'func2', 'p1', 'p2');
    
      // comb.js
      export class ComB extends wepy.component { 
          methods = { 
              func1 (p1, p2, evt) { }
          },
          func2 (p1, p2) { }
      }

问题描述：  
`[page] xxx页加载失败 Error: Invalid path: undefined`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 5]  
解决：import你想invoke的控件；在components中注册你引入的控件。

## 开发工具篇 ##

### `Uncaught ReferenceError: regeneratorRuntime is not defined` ###

背景描述：  
由于目前手上项目比较多，PC客户端、PC网页端、移动端APP及小程序，所以时间久了，对之前开发环境的配置就有点遗忘，程序猿的一大痛点呀o(╥﹏╥)o。再对之前开发的小程序进行迭代时，由于[微信开发工具][Link 3]已经升级，导致之前的开发环境配置失效，然后就报了一些乱七八糟的错误，比如该文中的`Uncaught ReferenceError: regeneratorRuntime is not defined`。**注意：我的解决方案是针对wepy1.72开发小程序描述的，其它框架开发小程序不要在这浪费时间最好。**

问题解决：

*  由于手上项目比较多，为了节约时间，直接复制错误堆栈信息在网上搜，试了几个解决方案，非但没解决，而且还搞的原有项目错误更多了。在此我把网上找到的几个方案分享下，避免浪费时间。：
    
     *  升级wepy-cli方法
        
            npm install @wepy/cli -g # 全局安装 WePY CLI 工具
        
        升级完之后，在运行 wepy build --watch 指令时，提示依赖包版本过低，project.config.json文件版本过低……，NM，瞬间感觉掉坑里了，赶紧还原之前的版本，步骤如下：  
        1、找到wepy脚手架安装目录，由于是全局安装，windows一般是在C:\\Users\\个人电脑名\\AppData\\Roaming\\npm，删掉wepy及node\_modules文件夹下的wepy-cli文件夹。可参照下图：  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 6]  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 7]  
        需要注意的是，全局安装会覆盖旧版本，所以后期若要多个版本，最好当前项目安装，方法如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 8]
     *  修改 .babelrc文件方法  
        安装插件，npm i --save-dev babel-plugin-transform-runtime  
        修改配置文件.babelrc
        
            "plugins": [
              [
                "transform-runtime",
                { 
                  "helpers": false,
                  "polyfill": false,
                  "regenerator": true,
                  "moduleName": "babel-runtime"
                }
              ]]
        
        wepy虽然默认使用babel进行编译，但从来没有.babelrc这个配置文件，babe的配置是在wepy.config.js这个配置文件中。然后自以为是的对其进行修改，发现依然不行。
     *  自行解决o(╥﹏╥)o  
        静下心来想了一下，感觉一个开发工具升级不至于让项目大改，要不然以后谁还敢用，于是就想到先创建一个Demo，然后使用默认微信开发工具的配置看是否能运行，步骤如下：
    
    1.  通过wepy脚手架进行创建
        
            # 初始化项目
            $ wepy init standard myproject
            # 切换至新创建的项目
            $ cd myproject
            # 安装依赖包
            $ npm  install
            # 开启实时编译
            $ wepy build --watch
    2.  通过微信开发者工具导入刚才创建的项目  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 9]  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 10]  
        可以看到程序可以正常运行，没报错，然后试着将本地设置改为目前生产项目的配置，如下图  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 11]  
        问题复现了，原来开启该项就会导致该问题发生。ε=(´ο｀\*)))唉
    3.  怀着一追到底的心情（其实很不爽对这个选项），赶紧查下[ES6转ES5选项][ES6_ES5]的作用。  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 12]  
        尼玛，原来开启之后程序就无法使用Async/Await语法……，需要注意的是如果同时开启‘增强编译’是有可能解决该问题的，为什么说有可能，因为原文描述的开启增强编译之后，是\*\*‘支持async/await语法，按需注入regeneratorRuntime，目录位置与辅助函数一致’\*\*，所以不一定注入成功。其它朋友可以试下。  
        然后把wepy的[快速入门指南][Link 4]滤了一遍，发现文中有提及到该点  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 13]

问题总结：  
下次更新开发工具时，最好看下更新日志，另外开发环境的配置最好做下保存。

### `Error: Can not call $apply in $apply process` ###

**背景描述：**  
距离上次发布已经过了大概半年时间，在准备实现新需求时，微信开发者工具提示升级，就进行了升级。但悲剧来了……

**环境描述：**  
微信开发者工具版本：1.02.1911180  
Wepy版本：1.7.2

**问题详情：**  
在电脑端调试没有该问题，但一旦真机调试，控制台就会出现该错误，并且发现提示该问题的地方都是在使用repeat组件时报错的，去掉之后，该问题就会消失。但是不得不用呀，Wepy1.X版本规定只能用repeat组件，如下图。Wepy2.X不知道有没有类似规定，就算没有，我时间也不够了，o(╥﹏╥)o，不能在此刻进行大版本变动。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 14]  
**解决措施：**  
回退原版本，我的原版本是[微信开发者工具稳定版 1.02.1907160][1.02.1907160]，有需要的朋友，可以直接点击该链接，进行下载。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70]: /images/20220204/c6b8ab29dcd042998ea7bf8f8693396b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 1]: /images/20220204/5540d170075743edaf2559948d6a875c.png
[wx.openSetting]: https://developers.weixin.qq.com/miniprogram/dev/api/wx.openSetting.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 2]: /images/20220204/ef0ed222d106480881b3fe5dd4f1a669.png
[Link 1]: https://developers.weixin.qq.com/community/develop/doc/000cea2305cc5047af5733de751008
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 3]: /images/20220204/31a1872b9a4f4deda0ce5a11f14954aa.png
[20190506153403597.png]: /images/20220204/ddc194ab8e574623b8c1bc3159560dcd.png
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html
[20190530095703506.png]: /images/20220204/029c6d0437234cb9ba2354cb296b3695.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 4]: /images/20220204/f6f21ea6da9f4123b2abf1fc61a297fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 5]: /images/20220204/f86b7a91b96a41679ba85473ecac2540.png
[Link 3]: https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 6]: /images/20220204/d1b8a67e013046e2addfa775f6fd96b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 7]: /images/20220204/bf28f8acffbc4c30ae7005c7dff190bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 8]: /images/20220204/cd028e29001c4a37be9402be6b62655c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 9]: /images/20220204/f34734e2038d46ddb9c668819dda1e98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 10]: /images/20220204/8480b545e1c34c0599f65a6aa1b800b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 11]: /images/20220204/eff691b90f2740e38c6070971a4ed451.png
[ES6_ES5]: https://developers.weixin.qq.com/miniprogram/dev/devtools/codecompile.html#%E5%A2%9E%E5%BC%BA%E7%BC%96%E8%AF%91
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 12]: /images/20220204/66967d6dfce24a459fa5408d248cc9ff.png
[Link 4]: https://wepyjs.github.io/wepy-docs/1.x/#/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 13]: /images/20220204/5e42d0a1a5de494a84236776dbe81ec1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 14]: /images/20220204/8337bbb97b2143d7abb3e6adf7ec7374.png
[1.02.1907160]: https://developers.weixin.qq.com/community/develop/doc/000c8abaa7c6b074f4e87321756401