Error in onChooseAvatar hook: “TypeError: Cannot read property ‘apply‘ of undefined“-Toy模板网

这篇具有很好参考价值的文章主要介绍了Error in onChooseAvatar hook: “TypeError: Cannot read property ‘apply‘ of undefined“。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

unapp编译微信小程序后运行报错[Vue warn]: Error in onChooseAvatar hook: "TypeError: Cannot read property 'apply' of undefined"

错误信息

vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10 [Vue warn]: Error in onChooseAvatar hook: "TypeError: Cannot read property 'apply' of undefined"

(found in pages/my/modifInfo.vue)(env: Windows,mp,1.06.2301160; lib: 2.25.2)
fe @ vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10
Li.e.config.errorHandler @ vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10
yt @ vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10
vt @ vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10
gt @ vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10
Li.e.__call_hook @ vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10
In.p.default.__call_hook @ vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:4
n.indexOf.e.<computed> @ vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:4
i.safeCallback @ WASubContext.js?t=wechat&s=1677471036886&v=2.25.2:1
(anonymous) @ WASubContext.js?t=wechat&s=1677471036886&v=2.25.2:1
J @ WASubContext.js?t=wechat&s=1677471036886&v=2.25.2:1
(anonymous) @ WASubContext.js?t=wechat&s=1677471036886&v=2.25.2:1
(anonymous) @ WAServiceMainContext.js?t=wechat&s=1677471036886&v=2.25.2:1
a @ VM10 asdebug.js:10
c @ VM10 asdebug.js:10
(anonymous) @ VM10 asdebug.js:1
f @ VM10 asdebug.js:1
g @ VM10 asdebug.js:1
(anonymous) @ VM10 asdebug.js:1
_ws.onmessage @ VM10 asdebug.js:1
vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10 TypeError: Cannot read property 'apply' of undefined
    at gt (vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10)
    at a.Li.e.__call_hook (vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10)
    at a.In.p.default.__call_hook (vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:4)
    at Bo.n.indexOf.e.<computed> [as onChooseAvatar] (vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:4)
    at Object.i.safeCallback (WASubContext.js?t=wechat&s=1677471036886&v=2.25.2:1)
    at WASubContext.js?t=wechat&s=1677471036886&v=2.25.2:1
    at J (WASubContext.js?t=wechat&s=1677471036886&v=2.25.2:1)
    at WASubContext.js?t=wechat&s=1677471036886&v=2.25.2:1
    at WAServiceMainContext.js?t=wechat&s=1677471036886&v=2.25.2:1
    at a (VM10 asdebug.js:10)(env: Windows,mp,1.06.2301160; lib: 2.25.2)

Error in onChooseAvatar hook: “TypeError: Cannot read property ‘apply‘ of undefined“,web前端,Vue,uniapp,微信小程序,用户昵称接口,Powered by 金山文档

背景

由于微信小程序官方调整了用户昵称获取方法，这里特别吐槽下微信官方就微信昵称头像接口方法差不多每年都得改一次，无力吐槽每次给的最佳实践每年都在被推翻，毕竟人家是腾讯想改就改，不服你又不能打他，哈哈~~

微信官方2021年的调整：https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801

2021年的最佳实践

微信官方2022年的调整：https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01

2022年的最佳实践

我按官方文档把代码copy到unapp项目运行，https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html，结果让人很意外。

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}"></image>
</button> 
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})

错误原因

代码不能单纯的复制过去就行，小程序的bind:chooseavatar=和vue里的不一样不能单纯改为v-bind:chooseavatar=，要改为 @:chooseavatar=文章来源地址https://www.toymoban.com/news/detail-698914.html

最终的代码

<u-form>
    <u-form-item label="头像">
        <image class="avatar" :src="avatarUrl"></image>
        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
        </button> 
    </u-form-item>
    <u-form-item label="昵称">
        <input type="nickname" placeholder="请输入昵称" style="text-align:right"/>
    </u-form-item>
</u-form>
<script>
export default {
    data() {
        return {
            avatarUrl: ‘换成默认图片地址’,
        };
    },
    methods: {
        onChooseAvatar(e) {
            const { avatarUrl } = e.detail 
            this.setData({
              avatarUrl,
            })
        },
    }
};
</script>

到了这里，关于Error in onChooseAvatar hook: “TypeError: Cannot read property ‘apply‘ of undefined“的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！