Project technology stack

Wechat native small program + cloud development. Why choose micro channel native small program development? Because it can directly apply its cloud development capabilities.

Here I mainly use the small program side SDK of cloud development ability, which is to operate the database directly in javascript.

This preface

Cloud-based answer applets v2.0 source address, as well as hand in hand to teach you to build answer applets V1.0 series of article directory, are in the “cloud-based answer applets V2.0, finally completed on the last day of November” at the bottom of this article.

I think you have a question, in the last article, [answer activity small program based on cloud development v2.0- home page design and implementation] in this article, why I did not put the home page index.js file code posted.

I prefer short and concise essays to long ones. And here is mainly to carry out alone, a simple chat, why to achieve wechat authorized login? How to implement this feature?

Wechat authorized login

Why do you want to

If you read my previous article or get the source code to run, you should probably see a scenario like this. For example, in the leaderboard page, the wechat profile picture and nickname of the participant should be displayed.

How to implement

Go through the simple requirements analysis above and look at the technical feasibility here. According to the technical documentation, there is an official development interface for obtaining user information, wx.getUserProfile(Object Object).

It says something like this: “The page can only be invoked after a click event (such as in the Bindtap callback on button), and an authorization window will pop up on each request, and userInfo will be returned after the user agrees.”

I wrote the code like this:

.wxml

<view bindtap="login"> <button class='cu-btn bg-red round block LG margin-top'>Copy the code

Of course, you can write it this way. Do it more. Do it more and try different ways. After all, there is more than one right answer.

<view> <button class='cu-btn bg-red round block LG margin-top' bindtap="login"> </button> </view>Copy the code

.js

Wx.getuserprofile ({desc: 'used to complete membership information ', success: (res) => {this.setData({userInfo: res.userInfo }) } }) }Copy the code

Running effect

The complete code

The complete code of the index.js file on the home page is as follows:

const app = getApp() Page({ data: { userInfo: {}, hasUserInfo: False}, onLoad() {}, goToTest() {wx.navigateTo({url: '.. /test/test'})}, // goToDetails() {wx.navigateTo({url: '.. // goToHistory() {wx.navigateTo({url: '.. GoToRank () {wx. NavigateTo ({url: '.. Wx.getuserprofile ({desc: 'used to complete membership information ', success: (res) => {this.setData({userInfo: res.userInfo, hasUserInfo: true }) app.globalData.userInfo = res.userInfo app.globalData.hasUserInfo = true } }) }, OnShareAppMessage (res) {return {title: '@ you, come to participate in the fire safety knowledge answer activity ~'}},})Copy the code

This summary

In the development of wechat small programs, it is quite common to realize the wechat authorized login function and obtain the wechat profile picture and nickname. And I here is mainly used to answer the questions in the ranking data statistics and display, for the operation of the public number or small program is still a more important part.