小程序开发常见异常收集整理

编译异常: 

1. Uncaught SyntaxError: Identifier 'onerror' has already been declared

Uncaught SyntaxError: Identifier 'onerror' has already been declared
    at <anonymous>:1:1
    at EventEmitter.electron.ipcRenderer.on (C:\Program Files\alitools\小程序开发者工具\resources\electron.asar\renderer\web-frame-init.js:36)
    at emitMany (events.js:147)
    at EventEmitter.emit (events.js:224)

疑开发者工具异常,首页onload(页面加载)中有打印输出goods_id,上边错误不影响小程序运行。如下,上边所说的异常都是发生在goods_id输出之前,也就是说首页加载之前就已经报错了。

这个错误并不影响小程序正常运行,自动忽略就好。有时候过段时间重新编译就没有了。

2. Uncaught (in promise) {data: "Cannot read property 'toString' of null":

Uncaught (in promise) {data: "Cannot read property 'toString' of null", headers: undefined, status: -1, error: 19}

经查,是promise封装中headers参数里边使用了获取同步缓存的方法,未做异常处理,而这里必须要使用字符串才可以,加上默认空值就好了,如下:

 3. 单击事件传参异常:

VM3645:1 Component "pages/index/index" does not have a method "couponReceive(2)" to handle event "tap".

异常原因:

小程序模板文件中,向绑定的单击事件传参需要单独以data-params的格式传递,同时在单击事件方法中通过进行获取

4. 开发者工具调试领取卡券提示“参数错误”:

如果安卓手机能正常领取卡券,开发者工具模拟器显示参数错误,那么ios手机应该也是不可以正常领取的。之出现这个异常,应该就是你调用wx.addCard 的时候没有对cardExt进行JSON序列化为字符串导致的:

注:另外需要注意的是,有些时候领取卡券之后需要自动的去调用查看卡券API以打开卡券,这时候就需要将cardList传给wx.openCard使用,由于wx.addCard和wx.openCard的参数结构并不一样,这就可能导致在参数重组的过程中出现问题。而由于微信卡券领取过程是不可逆的,所以验证测试起来是比较麻烦了,往往需要后台不断的修改清理测试账号的状态。所以不能指望光靠调试来完善领取、查看卡券的功能,尽量的在调用微信API之前保证参数的正确无误之后,再行实际流程验证测试。在wx.addCard和wx.openCard调用之前可以把定义好的参数控制台输出,然后return出来,考虑各种情况来验证这个参数是否正确。

5. 预览、真机调试异常,Error:系统异常,错误码:-206:

异常原因:疑工具bug;

处理方法:重启就好了。


CSS样式:

1. 全屏背景不显示:

/*微信*/
.container {
width:100%;
background: url(...) center top / 100% no-repeat;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}

/*支付宝*/
.container {
height:100%;
background: url(...) center top / 100% no-repeat;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}

如上,微信中全屏容器必须设置高度为100%,而支付宝中必须设置宽度为100%,不然高度就会为0,这个就有点令人费解了。

尝试将微信小程序中全屏背景容器父层page的所有默认样式覆盖到支付宝小程序的父层page上去,还是会有这个问题,所以这个应该是模拟器外围框架的问题了,有兴趣的可以去看下。

 2. 手机端预览调试按钮点不了:

 

如图,自定义loading层级太高,就遮盖了devtools工具按钮了,经验证,devtools按钮z-index:10000,所有的层的z-index只要小于这个值就可以了。

 


工具异常(bug):

1. 编辑器无法正常输入代码、无法输入中文:

工具bug,等官方解决吧,目前只能使用ctrl(command) + shfit + w进行重启了(仅仅是手动关闭重新打开工具解决不了)

2. 点击编译无反应,模拟器无法正常显示:

工具bug,出现概率低,同时开了两个项目窗口,其中一个点击编译无反应,模拟器无变化,关闭重新打开仍未解决,后边把所有开发者工具窗口都关掉重新打开才可以正常编译。

 

转载于:https://www.cnblogs.com/xyyt/p/9920944.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Angular中,可以使用File API获取文件内容并将其存储在本地。以下是一些实现方式: 1. 通过<input type="file">元素上传文件 可以使用以下代码获取input元素中的文件: ``` onFileSelect(event) { if (event.target.files.length > 0) { const file = event.target.files[0]; this.uploadedFile = file; } } ``` 其中,this.uploadedFile是一个文件类型的实例,可以在需要时将其存储在本地。 2. 通过p-fileUpload组件上传文件 p-fileUpload组件是PrimeNG中的文件上传组件,可以使用以下代码获取上传的文件: ``` onFileSelect(event) { if (event.files.length > 0) { const file = event.files[0]; this.uploadedFile = file; } } ``` 其中,this.uploadedFile是一个文件类型的实例,可以在需要时将其存储在本地。 3. 存储文件 要将文件存储在本地,可以使用FileReader API。以下是一个示例代码,将上传的文件存储在assets/photos目录下: ``` onFileSelect(event) { if (event.target.files.length > 0) { const file = event.target.files[0]; this.uploadedFile = file; const reader = new FileReader(); reader.onload = (e) => { const base64 = reader.result as string; const byteArray = new Uint8Array(atob(base64.split(',')[1]).split('').map(char => char.charCodeAt(0))); const blob = new Blob([byteArray], { type: 'image/jpeg' }); const url = `../../../assets/photos/${file.name}`; saveAs(blob, url); }; reader.readAsDataURL(file); } } ``` 其中,使用FileReader API将文件转换为base64格式,并将其保存为Blob。然后使用FileSaver API将Blob存储在本地文件系统中。此示例中的文件名采用上传文件的原始名称。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值