携手创作，共同成长！这是我参与「日新计划 8 月更文挑战」的第11天，点击查看活动详情

问题描述

最近这段时间我好像是跟小红书小程序杠上了，刚解决了上一次的公共样式失效问题，这就又碰到了新的问题——登录按钮的getphonenumber方法无法触发回调。刚开始碰到这个问题的时候，极度的自我怀疑疯狂的折磨着我，直到解决了之后才长长的舒了一口大气。

用户信息获取方法

小红书原生方法

跟微信小程序很相似，小红书小程序提供了自身的开放能力，支持开发者获取小红书用户绑定的手机号，但是因为需要用户主动触发才能发起获取手机号接口，所以该功能不由 API 来调用，需用button组件的点击来触发。

    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
    Page({
      getPhoneNumber (e) {
        console.log(e.detail.errMsg)
        console.log(e.detail.iv)
        console.log(e.detail.encryptedData)
      }
    });

Taro中获取

很遗憾的是，我们公司使用的是Taro框架，而且经过测试发现，如果Taro组件混用原生组件会导致编译问题。相对来说编译问题比较好解决，通过定义一个loader来做特殊处理即可。

处理的loader代码如下：

    xhsloader: {
        test: /.xhsml$/,
        use: [{
            loader: 'raw-loader',
            options: {}
        }]
    }

这就解决了Taro编译的问题，但是，解决完之后，发现这种混用的方式会导致原生组件渲染不出来，这就很尴尬了。迫于无奈，只能求助于度娘了。经过一番艰难的搜索工作，最终找到了小红书插件的issue。

解决方案

临时解决办法

我们在issue的下方，发现了 @tarojs/plugin-platform-xhs 团队确认这个问题确实是一个bug，而且提供了临时解决办法：

修改插件的源码，来兼容对button按钮的某些属性的特殊处理。

修改源码路径：node_modules/@tarojs/plugin-platform-xhs/dist/index.js

源代码文件行号：8

插入代码：

    Button: {
        'data-channel': '',
        bindGetPhoneNumber: '',
        bindGetUserInfo: '',
        bindOpenSetting: '',
        bindContact: '',
        bindChooseAddress: '',
        bindChooseInvoiceTitle: '',
        bindLogin: ''
    }

私有化插件

由于团队成员进行协作开发，而且会存在新的同事加入到小红书开发中来，所有修改源码的临时解决方法是不可行的。那么进一步的处理版本就是，将这个版本的代码clone下来，修改源代码，然后发布到私有化仓库中，然后通过公司内部的源进行依赖的安装（发布方式同发布到npm仓库的方式一致）。

运气爆棚的解决方案

我留言到官方维护团队说的是 <= 0.0.4 的版本存在问题，然后我又去npm仓库查看了一下发现最新的版本已经是0.0.7了，我就抱着侥幸的心理进行了代码依赖的升级，升级之后经过测试发现好用。

我只能说，上天还是眷顾我的，当然这种解决方案其实存在着很大的运气的成分，只能是抱着试试的态度查看一下，万一可以的话可以节省很多的时间。

好了，到这里就结束了，欢迎大家在下方进行留言交流。