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)

背景

由于微信小程序官方調(diào)整了用戶昵稱獲取方法，這里特別吐槽下微信官方就微信昵稱頭像接口方法差不多每年都得改一次，無力吐槽每次給的最佳實踐每年都在被推翻，畢竟人家是騰訊想改就改，不服你又不能打他，哈哈~~

微信官方2021年的調(diào)整：https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801

2021年的最佳實踐

微信官方2022年的調(diào)整：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=文章來源地址http://www.zghlxwxcb.cn/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>