微信小程序开发实战第五讲yunhuaikong的专栏-

      上一节，我们实现了简单的通过用户名和密码调用接口进行登录的实战，但是在小程序中，有个特殊的情况，就是很少有厂商去开发一个注册功能或者是通过用户名+密码来登录的逻辑，为什么？因为APP、小程序为了用户体验，是尽量多的避免用户多次输入交互，所以，这个时候，一键通过微信登录，非常方便。就像我们的平常做的SNS社交一键登录一样。本节我们来学习使用微信一键登录功能。

首先准备一张微信UI素材，网上到处都是，自己觉的哪个美观就用哪个。将其添加到我们项目中的resource目录中。修改登录按钮样式为如下。

添加如下四个样式：

页面wxml文件中新增如下控件

 保存文件，你将可发现页面变化，多了个微信登录的按钮。

 这里着重强调一下样式，wx-label里面增加 了一个left属性，值为10rpx,这个的目的是增加图标与文字之间的间距，不至于两个挨在一起，过于丑陋。当然你可以不给wx-label来增加left属性，你可以给wx-icon增加right属性，均可实现同样的效果。图标和文字仍然是水平居中对齐。

细心学习的同学可能已经发现了问题！什么问题？我怎么没有发现？说明你真的没有用心去体会，我们每每在写CSS样式时，就需要在脑子里面进行页面的假想绘制，我们通过这样的CSS样式绘制出来的页面应该长什么样的！如果你有所怀疑，你现在就去认真的看看这新增的4个 样式应该展示什么样的页面。

1、这个”微信登录”的按钮字体怎么这么粗，明明和上面的登录字体大小设置一样，它为什么变粗了？

2、这个”微信登录”的按钮宽度不对呀，明明是70%，为什么宽度明显小了很多？

现在，我们来查查为什么，究竟是什么东西影响了这个组件的显示。我们通过调试器窗口来观看添加到这个组件上的所有的样式，一探究竟。

 咦，为什么会出现这么多的莫名其妙的 user agent stylesheet?其实不难理解，应该是浏览器默认定义的一些常规样式，它里面定义的样式等级最低，我们可以直接在我们自己的样式中重新写一次，将其覆盖。理论上是这样的，标准也是这样制定的。可是问题又来了，我们明明在wx-button-view中已经定义了width属性，为什么不起作用了，你先别懵逼！同时，我们在wx-button-view定义font-weight期待覆盖user agent stylesheet里面的值的时候，也失败了！也就是说，理论上它的优先级是最低的，但是我们尝试覆盖的时候，失败了。你可以理解为这是微信小程序的BUG。但是我们可以修改配置文件来修正此问题，通过这种方式，我猜测，微信官方它就是这样干的，没有将优先级处理好或者是考虑到一些其他的场景，此处没有根据常规的优先级等级来进行渲染！

    我们打开app.json全局配置文件，看到有一个v2的style定义，将其干掉，我们发现一切就正常了。故而不要纠结于微信官方为什么没有按照等级优先级来渲染，只需要知道删除这个配置数据即可。

 将其删除掉，保存。再来看看页面，一切就又正常了。

 宽度是我们定义的宽度，样式是我们写的样式。

我们回到login.wxml页面文件中，继续进行我们的功能实现。我们为button添加如下属性。记住就是这样用的即可，不用管为什么会这样子。并且只有button属性open-type=’getPhoneNumber‘的时候才可以触发微信授权！你把button换为view它就不行，记住即可。授权后的数据会通过绑定在bindgetphonenumber属性上的函数回调给你，我们绑定的回调函数名称为：getMobilePhone

我们在login.js文件里面实现此函数：

保存文件，在页面上点击”微信”登录的按钮，如不出意外，你将看到如下的页面：

点击允许，你将在绑定的函数中监听到微信授权数据：

有了这些数据，你将可以根据微信官方提供的API来获取到用户的数据，比如手机号等信息。获取到手机号，后面你们怎么生成用户信息，那都是很方便、自然的事情了。