uniapph5授权成功后返回上一页_微信小程序：授权登录

一：原因

看到标题也许也许有的人会奇怪，我们不是已经在页面中显示用户的头像和昵称了吗，而且open-data组件也可以显示用户的其他信息。

其实，仅仅是这样只是让用户看到了他自己的头像和昵称不足以我们让对用户信息进行管理。我们需要通过授权将得到的用户信息上传至云数据库，才能方便我们管理用户信息。

再来回顾一下我们编写的“个人”页面：

习惯了首页的简洁，再看个人页面文件夹混乱的文件都快看不下去了，现在你也许体会到建立images文件夹的意义。把这些图片移动到images文件夹是个不错的选择哦(我偷个懒就懒得改了吧hhh)。

---

二：编译模式

在编译器上方编译和预览按钮旁边有个选择编译模式：

如果你没有对编译模式进行更改的话。

每次重启小程序出现的第一个页面就是在app.json的pages数组的第一个页面，也就是程序的首页。

但是，我们的小程序的首页很显然是

"pages/index/index"

所以我们需要更改pages顺序

这时候小程序每次重启进入的页面都是首页。

问题又来啦，我们现在要开发个人页面，不可能每次重启后都通过底部的tabbar栏或者其他方式切换吧。

解决方法：切换不同的编译模式可以让我们设置重启后的启动页面，也就是重启小程序后显示的第一个页面。

点击普通编译右边那个小三角形符号，选择添加编译模式：

模式名自取，启用页面指在该编译模式下小程序启动出现的第一个页面。

完成后可通过再次点击三角形图标添加其他编译模式或者切换编译模式，也可以点击我们自定义的编译模式(如图中的个人)后的图标修改或删除该编译模式。

这样比改pages方便多了，可随便切换。

三：授权

小程序中通过将button组件的open-type属性的属性值设置为getUserInfo调动授权面板。

但是，仅仅是这样的写是没有意义的，由于不占用空间，所以在页面中看不到。

乱写的话，用户可能也不知道是什么意思。我们可以像这样写入请先授权这四个字提示用户。

请先授权

如上图，多了一个组件，页面重新排列。

头像上多了button组件，所以相对button而不是最上面的图片向上移动了我们原先设置的80rpx。点击button按钮，弹出了我们需要的授权框。

那么，我怎么在小程序端知道用户是点了“允许”还是“拒绝”按钮呢。这时候就要用到另一个属性了。

bindgetuserinfo：返回用户的选择信息

小提示：这个属性的字母都是小写的哦~

bindgetuserinfo的属性值是一个方法名，该方法在页面js文件中与data，onLoad等平级。该方法可通过一个参数接受系统返回给我们的用户选择信息，参数名自取。我给参数取的名字是e,其实随便你怎么取，符合js命名规范即可。

准备好了，我们再次点击授权button看看会返回什么信息给我们。

①情况一：第一次弹窗授权窗口的时候点了允许

这时候授权窗口不会再弹出了了，但是控制台打印出了我们想要的信息。

点开查看详细信息

显然信息是作为js对象的形式返回的。在type的detail的userInfo有当前用户详细信息。

除此之外，在detail的rawData也有信息

②情况二：第一次弹窗授权窗口的时候点了拒绝

模拟器重新弹窗授权窗口，点击拒绝，在type的detail的userInfo出现了下列信息。

这时候已经没有rawData和userInfo了，只有errMsg

③情况三：第一次点了接受，但是想看拒绝返回的信息是什么

点了接受，后面再点击button就不会再弹出授权窗口了，所以我们需要点击编译器上方的清缓存按钮，选择清除授权数据选项，这样就清除了授权，也就是回到了还没点允许或者拒绝的阶段。

三：条件渲染

button和下面的open-data挤在一起不仅很难看，而且容易误导用户。那么能不能控制页面两者选其中一个显示，需要显示哪个就显示哪个呢？

条件渲染：wx:if=""

通过条件渲染选择需要展示的界面

Boolean类型的默认值为false，当然，你也可以写canIUse:false。

小提示：B是大写的不能写boolean哦

如果是true

小提示：我们需要在授权前有这么一个授权按钮，所以canIUse的默认值应该设置为true而不是false。这个时候，逻辑上就出现问题了，canIUse为true在逻辑上理解应该是授权了的，而我们却让为true的时候不显示头像昵称，让为false的时候选择显示头像昵称。

自己思考解决方法哦~我懒得写哈哈哈

我在组件中不止写了wx:if,在open-data组件外加了一个view并写上了wx:else。wx:if绑定的变量的值是true，就显示wx:if绑定的组件，不显示wx:else绑定的组件。如果wx:if绑定的变量的值是false,就显示wx:else绑定的组件，不显示wx:if绑定的组件。

如果有三个以上的组件且有更多的选择区域：

就需要wx:elif了

在语法绑定{{}}中不仅可以直接写变量名，还接受对变量的值进行算数比较，数值的比较的结果boolean类型也就是true或者false，这就满足了我们的条件渲染。

示例如下：在data中定义money变量,随便给一个数值

小提示：>=是大于等于的意思

<view wx:if="{{money<998}}"> 普通栏目<view wx:else>别看了，你学不会的 view>

中间有多个选项就用多个wx:elif：

<view wx:if="{{money<998}}"> 普通栏目 view>

<view wx:elif="{{money>9999}}"> 超级vip栏目 view>

<view wx:elif="{{money>=998}}"> vip栏目view>

<view wx:else> 别看了，你学不会的 view>

通过js的条件语句也就是if(值){代码1}else{代码2}设置data中canIUse的值。

而在js的getUserInfo(也就是button的bindgetuserinfo属性的值)方法得到的参数中detail的rawData在允许授权时存在，拒绝授权时不存在，可以作为判断的调节。

补充：

允许，也就是rwaData对象中的数据不为空，在if()中自动转换成了true

拒绝，也就是rawData的值为Undefined，在if()中自动转换成了false

代码如下：

这样，在点击允许或者拒绝的时候data中canIUse值的切换就完成了。

问题又来了，getUserInfo方法只有我们点击button时才会触发。而小程序重启后canIUse又恢复了默认值true，这时候授权的button显示在页面上，而opne-data两个组件也就是我们的头像昵称没有显示。最尴尬的是，因为我们原先点了允许按钮，现在再点button不会再弹出授权窗口了。

所以，我们需要在小程序重启时重新判断是否授权。

wx.getSetting：获取授权信息

文档地址如下：

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/setting/wx.getSetting.html、

success方法，在wx.getSetting调用成功时执行，可设置一个参数用于接受返回的信息。

没有授权时authSetting的scope.userInfo的值是false，授权成功时为true。这样我们再次通过if设置canIUse的值。

但是，由于onLoad函数的特殊性，我们后期肯定还要在其中写入代码，到时候代码太多了看起来就特别费劲。

解决方法：在Page({})中定义一个和onLoad平级的方法装入判断授权信息的代码，再在onLoad中调用该方法即可。

在onLoad中通过this.方法名()的格式调用。

我这里叫getInfo其实也是名字和内容不符的那种命名，我就是随便写写，建议你们合理命名哦。

根据整体与分割思想，在外层加一个view组件，将这两个组件和两个open-data组件分隔。从对称性和页面可读性的角度考虑增加一句请先点击滑稽授权哦~。

编写样式：

坑来了：小程序默认给button的默认样式中有

padding-left: 14px;

padding-right: 14px;

显然会影响图片的位置，所以我将padding设为0

小提示：我的滑稽图本来就有多余的空白，所以没有占满整个圆形。

可以用一些炫酷的动态图哦~