微信小程序踩坑记

API接口

wx.authorize(Object object)

• 

  图片是官方API的介绍，注意①红框标记的部分，说会弹框，其实不会！那如何引导用户进行授权呢？根据②我找到了下面介绍

  

  根据描述，可以调用wx.openSetting打开设置页面，引导用户进行授权，我们打开该API看一下

  

  根据描述2.3.0版本可以打开设置界面，但实际并没有，凸(艹皿艹 )!。点详情继续看

  

  [○･｀Д´･ ○]，艹，看了这么多，原来打开授权窗口改成了用户主动点击按钮才可以。心好累！除了这种方式还有一种方式

  

  很小的一行文字，是在授权页面的最底部，太坑了。

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.具体错误信息如下：

3.配置位置

$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

解决：import你想invoke的控件；在components中注册你引入的控件。

开发工具篇

Uncaught ReferenceError: regeneratorRuntime is not defined

背景描述：
由于目前手上项目比较多，PC客户端、PC网页端、移动端APP及小程序，所以时间久了，对之前开发环境的配置就有点遗忘，程序猿的一大痛点呀o(╥﹏╥)o。再对之前开发的小程序进行迭代时，由于微信开发工具已经升级，导致之前的开发环境配置失效，然后就报了一些乱七八糟的错误，比如该文中的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文件夹。可参照下图：
    
    
    需要注意的是，全局安装会覆盖旧版本，所以后期若要多个版本，最好当前项目安装，方法如下：

  • 修改 .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. 通过微信开发者工具导入刚才创建的项目
     
     
     可以看到程序可以正常运行，没报错，然后试着将本地设置改为目前生产项目的配置，如下图
     
     问题复现了，原来开启该项就会导致该问题发生。ε=(´ο｀*)))唉
  3. 怀着一追到底的心情（其实很不爽对这个选项），赶紧查下ES6转ES5选项的作用。
     
     尼玛，原来开启之后程序就无法使用Async/Await语法……，需要注意的是如果同时开启‘增强编译’是有可能解决该问题的，为什么说有可能，因为原文描述的开启增强编译之后，是**‘支持async/await语法，按需注入regeneratorRuntime，目录位置与辅助函数一致’**，所以不一定注入成功。其它朋友可以试下。
     然后把wepy的快速入门指南滤了一遍，发现文中有提及到该点
     

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

Error: Can not call $apply in $apply process

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

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

问题详情：
在电脑端调试没有该问题，但一旦真机调试，控制台就会出现该错误，并且发现提示该问题的地方都是在使用repeat组件时报错的，去掉之后，该问题就会消失。但是不得不用呀，Wepy1.X版本规定只能用repeat组件，如下图。Wepy2.X不知道有没有类似规定，就算没有，我时间也不够了，o(╥﹏╥)o，不能在此刻进行大版本变动。

解决措施：
回退原版本，我的原版本是微信开发者工具稳定版 1.02.1907160，有需要的朋友，可以直接点击该链接，进行下载。