资讯专栏INFORMATION COLUMN

小程序引导用户授权

huayeluoliuhen / 2711人阅读

摘要:用户信息授权对于小程序未授权的用户,官方取消方法的直接调用,首次授权必须主动触发自定义按钮,才可调起官方授权组件可以获取到的信息有昵称头像性别国家省份城市性别语言思路步骤查看是否授权已授权使用获取用户信息,保存未授权显示带有的自定义页面会返

用户信息授权
对于小程序未授权的用户,官方取消wx.getUserInfo方法的直接调用,首次授权必须主动触发自定义按钮,才可调起官方授权组件

可以获取到的信息有:昵称、头像、性别、国家、省份、城市、性别、语言

思路步骤

wx.getSetting查看是否授权

已授权使用wx.getUserInfo获取用户信息,保存

未授权显示带有button的自定义页面,bindGetUserInfo会返回用户信息,该按钮会调用微信官方授权

授权完成保存用户信息

项目实现

app.js----我放在登陆方法之后

// 查看是否授权,保存授权状态
    wx.getSetting({
        success: function(res) {
            if (res.authSetting["scope.userInfo"]) {
                wx.setStorageSync("isAuthorize", "true");
                wx.getUserInfo({
                    success: function(res) {
                        wx.setStorageSync("userInfo", res.rawData);
                    }
                })
            } else {
                wx.setStorageSync("isAuthorize", "false");
            }
        }
    })

main.wxml------项目主页面


main.js------onload中进行判断是否要显示自定义的按钮

// 已授权隐藏弹框,未授权显示弹框
this.authorize = this.selectComponent("#authorize");
if (wx.getStorageSync("isAuthorize")=="true"){
    this.authorize.hideDialog()
}

main.json-----主页面配置参数

"usingComponents": {
    "authorize": "自定义授权组件的路径"
}

authorize.js------自定义带有button的页面/弹窗组件autiorize,这里只贴出js部分

/*authorize.js*/
Component({
    options: {
        multipleSlots: true
    },

    data: {
        isHide: false,
        canIUse: wx.canIUse("button.open-type.getUserInfo")
    },

    methods: {

        //隐藏弹框
        hideDialog() {
            this.setData({
                isHide: true
            })
        },
        // 授权信息保存
        bindGetUserInfo(e){
            wx.setStorageSync("isAuthorize", "true");
            wx.setStorageSync("userInfo", JSON.stringify(e.detail.userInfo));
            this.hideDialog()
        }

    }
})

这样整个授权就完成了!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99552.html

相关文章

  • 程序授权功能(废)

    摘要:用户确认授权用户取消授权授权成功授权成功重新登陆因外部原因授权失败因外部原因授权失败授权提示小程序需要您的微信授权才能使用哦错过授权页面的处理方法删除小程序重新搜索进入点击授权按钮 小程序登陆和使用授权(亲测无效,不用看了,直接看评论) 不想重新写页面引导用户授权,因为官方说明 scope 为 scope.userInfo 时,无法弹出授权窗口,请使用 理一下思路: 登陆操作,获取用...

    K_B_Z 评论0 收藏0
  • 程序开发中的那些

    摘要:解决方法用组件替换组件,用微信小程序的实现点击切换效果除此之外,在中也不能使用组件。接口更改问题微信小程序最近被吐槽最多的一个更改,就是用户使用开发和体验版时不会弹出授权,正式版不受影响。 最近专门做小程序开发中,跟大家分享下遇到那些不得不处理的小坑,欢迎指正 1.小程序用 WxParse 在手机上不能正确解析 html 代码并显示 解决办法: 这个是 wxparse 代码的一个...

    CODING 评论0 收藏0
  • 程序开发中的那些

    摘要:解决方法用组件替换组件,用微信小程序的实现点击切换效果除此之外,在中也不能使用组件。接口更改问题微信小程序最近被吐槽最多的一个更改,就是用户使用开发和体验版时不会弹出授权,正式版不受影响。 最近专门做小程序开发中,跟大家分享下遇到那些不得不处理的小坑,欢迎指正 1.小程序用 WxParse 在手机上不能正确解析 html 代码并显示 解决办法: 这个是 wxparse 代码的一个...

    jerryloveemily 评论0 收藏0
  • 程序开发中的那些

    摘要:解决方法用组件替换组件,用微信小程序的实现点击切换效果除此之外,在中也不能使用组件。接口更改问题微信小程序最近被吐槽最多的一个更改,就是用户使用开发和体验版时不会弹出授权,正式版不受影响。 最近专门做小程序开发中,跟大家分享下遇到那些不得不处理的小坑,欢迎指正 1.小程序用 WxParse 在手机上不能正确解析 html 代码并显示 解决办法: 这个是 wxparse 代码的一个...

    Achilles 评论0 收藏0
  • 浅析微信支付:开发前的准备

    摘要:本文是浅析微信支付系列文章的第三篇,主要会讲一下在开发前的一些注意事项。浅析微信支付系列已经更新两篇了哟,没有看过的朋友们可以看一下。开通微信支付需要注册登陆微信商户平台,微信支付相关的信息都需要在这个平台上进行操作。 本文是【浅析微信支付】系列文章的第三篇,主要会讲一下在开发前的一些注意事项。 浅析微信支付系列已经更新两篇了哟~,没有看过的朋友们可以看一下。 浅析微信支付:前篇大纲...

    yanest 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<