Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how to achieve authorized login by WeChat Mini Programs". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to achieve authorized login by WeChat Mini Programs" can help you solve your doubts. Let's follow the editor's train of thought to slowly deepen, let's learn new knowledge.

I. Preface

Due to the official modification of the getUserInfo API by Wechat, it is not possible to pop up the authorization window as soon as you enter WeChat Mini Programs. It can only be triggered through button.

Second, the realization train of thought

Write a Wechat authorization login page to enable users to click, that is, through the button component to trigger the getUserInof interface. When the user enters WeChat Mini Programs, determine whether the user is authorized, and if there is no authorization, the authorization page is displayed and the user is asked to perform the authorization operation. If it has been authorized, skip this page and go to the home page.

III. Brief introduction of the interface

1. Without tabBar

two。 With tabBar

IV. Source code

1.index.wxml

Apply for the following permission to get your public information (nickname, avatar, etc.) to log in, please upgrade the Wechat version of my home page

2.index.wcss

Header {margin: 90rpx 0 90rpx 50rpx; border-bottom: 1px solid # ccc; text-align: center; width: 650rpx; height: 300rpx; line-height: 450rpx;} .header image {width: 200rpx; height: 200rpx;} .content {margin-left: 50rpx; margin-bottom: 90rpx;} .content text {display: block; color: # 9d9d9d; margin-top: 40rpx;} .bottom {border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx;}

3.index.js

Page ({data: {/ / determine whether the API, callback, parameters, components, etc. of Mini Program are available in the current version. CanIUse: wx.canIUse ('button.open-type.getUserInfo'), isHide: false}, onLoad: function () {var that = this / / check whether to authorize wx.getSetting ({success: function (res) {if (res.authSetting ['scope.userInfo']) {wx.getUserInfo ({success: function (res) {/ / the user has been authorized, and there is no need to display the authorization page. So there is no need to change the value of isHide / / add other operations according to your own needs / / what I am implementing here is after the user authorization is successful. Call the wx.login API of Wechat to obtain code wx.login ({success: res = > {/ / after obtaining the user's code: res.code console.log ("user's code:" + res.code) / / you can pass it to the backend, and then parse to obtain the user's openid / / or you can directly use the API provided by Wechat to obtain the openid directly. The method is as follows: / / wx.request ({/ make up your own APPID and SECRET / / url: 'https://api.weixin.qq.com/sns/jscode2session?appid= your own APPID&secret=, your own SECRET&js_code=' + res.code +' & grant_type=authorization_code' / / success: res = > {/ get the user's openid / / console.log ("user's openid:" + res.data.openid) / /} / /});} else {/ / user does not have authorization / / change the value of isHide to display the authorization page that.setData ({isHide: true});}) }, bindGetUserInfo: function (e) {if (e.detail.userInfo) {/ / the user presses the allow authorization button var that = this; / / to get the user's information and prints it to the console to see the console.log ("the user's information is as follows:"); console.log (e.detail.userInfo) / / after the authorization is successful, change the value of isHide to display the implementation page and hide the authorization page to that.setData ({isHide: false}) } else {/ / user pressed the deny button wx.showModal ({title: 'warning', content:'if you clicked to deny authorization, you will not be able to enter Mini Program. Please authorize and then enter!', showCancel: false, confirmText: 'return authorization', success: function (res) {/ / user failed to authorize successfully There is no need to change the value of isHide if (res.confirm) {console.log ('user clicked' return authorization') }))

With regard to the processing of TabBar, you only need to set up the page written above into app.json.

After reading this, the article "how to achieve authorized login by WeChat Mini Programs" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.