微信小程序开发实战第五讲

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

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

添加如下四个样式:

微信小程序开发实战第五讲_第1张图片

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

微信小程序开发实战第五讲_第2张图片

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

微信小程序开发实战第五讲_第3张图片

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

微信小程序开发实战第五讲_第4张图片

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

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

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

微信小程序开发实战第五讲_第5张图片

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

微信小程序开发实战第五讲_第6张图片
微信小程序开发实战第五讲_第7张图片

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

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

微信小程序开发实战第五讲_第8张图片

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

微信小程序开发实战第五讲_第9张图片

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

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

微信小程序开发实战第五讲_第10张图片

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

微信小程序开发实战第五讲_第11张图片

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

微信小程序开发实战第五讲_第12张图片

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

微信小程序开发实战第五讲_第13张图片

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

你可能感兴趣的:(微信小程序开发实战第五讲)