使用uni-app开发微信小程序之登录模块

使用uni-app开发微信小程序之登录模块

从微信小程序官方发布的公告中我们可获知：小程序体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败，需使用 open-type="getUserInfo"> 引导用户主动进行授权操作：

 1.当用户未授权过，调用该接口将直接报错

 2.当用户授权过，可以使用该接口获取用户信息

但在实际开发中我们可能需要弹出授权询问框，因此需要我们自己来写模拟授权弹框（主要是对 open-type="getUserInfo">的包裹+用户是否是第一次授权判断来显示该页面），代码如下：

1.页面结构

<template>
    <view>
        
        <view v-if="isCanUse">
            <view>
                <view class='header'>
                    <image src='../../static/img/wx_login.png'>image>
                view>
                <view class='content'>
                    <view>申请获取以下权限view>
                    <text>获得你的公开信息(昵称，头像、地区等)text>
                view>

                <button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
                    授权登录
                button>
            view>
        view>
        
    view>
template>

这里的isCanUse是用来记录当前用户是否是第一次授权使用的，wx_login.png图在底部下载获取即可。

2.样式

 

3.脚本部分

 

4.最终效果如下：

 

                           

 

wx_login.png图：

 

posted on 2019-03-04 18:51 WFaceBoss 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/wfaceboss/p/10472413.html