uni-app 百度小程序的联合登录找不到方法

uni-app 百度小程序的联合登录找不到方法

开发环境 版本号 项目创建方式
Windows 20H2 HBuilderX 
产品分类：uniapp/小程序/百度

### 示例代码：
```html
<!-- #ifdef MP-BAIDU -->
<login bindgetphonenumber="getphonenumber" bindloaderror="loaderror"></login>
<!-- #endif -->  

methods: {
    getphonenumber(e){
        console.log(e)
    },
    loaderror(e){
        uni.showToast({
            title:e.detail.errMsg,
            icon:'none'
        })
    }
}

操作步骤：

找不到方法

预期结果：

希望知道怎么绑定小程序的方法

实际结果：

暂未解决

bug描述：

<login bindgetphonenumber="getphonenumber" bindloaderror="loaderror"></login> 这是百度小程序那边的联合登录，我在uniapp里面找了下没有相关组件，只有拿百度小程序那边的组件用，但是绑定方法又不能在uniapp中使用，请问这种怎么解决？


更多关于uni-app 百度小程序的联合登录找不到方法的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

我也遇到这个问题了，你解决了没

更多关于uni-app 百度小程序的联合登录找不到方法的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用百度小程序的联合登录组件，确实会遇到原生组件无法直接绑定 uni-app 方法的问题。这是因为百度小程序的 <login> 组件是原生组件，其事件绑定方式与 uni-app 的 Vue 事件机制不兼容。

解决方案：

  1. 使用 @ 替代 bind：在 uni-app 中，应使用 Vue 的事件绑定语法 @，而不是百度小程序的 bind。将代码修改为：

    <!-- #ifdef MP-BAIDU -->
<login [@getphonenumber](/user/getphonenumber)="getphonenumber" [@loaderror](/user/loaderror)="loaderror"></login>
<!-- #endif -->

  2. 确保组件正确引入：百度小程序的 <login> 组件是原生组件，无需额外引入，但需确保在 pages.json 中正确配置百度小程序的权限和组件。检查是否在 mp-baidu 配置中声明了所需权限：

    "mp-baidu": {
  "usingComponents": {},
  "permission": {
    "scope.userPhoneNumber": {
      "desc": "用于联合登录获取手机号"
    }
  }
}

  3. 事件参数处理：百度小程序原生组件的事件参数通常通过 e.detail 传递，而 uni-app 中可能需要直接访问 e.detail。调整方法中的参数处理：

    methods: {
  getphonenumber(e) {
    const detail = e.detail || e; // 兼容处理
    console.log('手机号信息:', detail);
    // 可进一步调用 uni.login 或后端接口完成联合登录
  },
  loaderror(e) {
    const errMsg = (e.detail && e.detail.errMsg) || '加载失败';
    uni.showToast({ title: errMsg, icon: 'none' });
  }
}
回到顶部