Tencent micro app to get wechat user information

Whether you love or hate low code development , There is no doubt about the strength of wechat ecosystem . Therefore, it is necessary to be familiar with micro build technology ! In most applications , Both need to obtain and track user information . This article demonstrates in detail how to obtain and store user information in wechat , Because the acquisition and storage of user information is the foundation of applications .

One . Micro build

Every wechat platform claims that you can simply drag and drop to generate an application , I think this statement is " Exaggerate ". In fact, the advantages of micro build are generally , The front end defines many components , It saves a lot of time for developers to package components , This is one of ; Second, for back-end development , It saves the deployment of the server ( There is no need to omit back-end development ), Reduce the amount of back-end coding .

Based on the above cognition , I think people who learn about the development and application of wechat still need the following knowledge :

1.1 front end

1. HTML

Because a lot of encapsulated components provided by the platform are used , So it's slightly right HTML Lower requirements , But at least we should understand Containers (div) The concept of , therefore html The cost of learning is almost negligible .

2. CSS

Micro build application pair CSS Your requirements are no better than web Low development , Therefore, it is suggested that the front-end focus should be on learning CSS Knowledge . Among them, the more important knowledge points are :

• Box model
• Elastic layout

1.2 Back end

Most low code development platforms are based on nodejs, So master javascript Is a must . If you are afraid of any programming language , And hope to save you , This is a golden dream ! javascript Version iteration is very fast , I really want to be a programmer , After basic study , Go deeper ts, because ts Enhanced type check , It makes this scripting language more powerful , Very similar to python, java etc. .

1. Tencent Weibo data source

Tencent Weibo data source adopts text database , Of course, there are many similarities with the operation of relational databases , And the platform provides a basic database Additions and deletions Methods , Convenient for developers . But complex logic still needs to be used javascript For cloud development , This is also an emphasis on learning micro build , Study javascript Important reasons .

Two . actual combat

Next, we will develop a small program application on how to obtain and store user information . The premise is that you have registered Tencent low code development platform , At present, the platform provides three months of free use . Registered address

2.1 create data source

Data source can be understood as background database , A place for storing information . In order to protect the database resources of the old system , Wechat currently supports two data sources : Self built data source and external data source , The external data source is to use the original database , For example, the old system mysql, sqlserver Relational database ; Self built data source , It is the text database provided by the micro platform , Here we use Self built data source !

• Navigate on the side of the console to find " data source "
• an " data source ", find " Data model "
• Right content area , You can see " New data model "

The above operations are shown in the figure below :

Next, in the pop-up window , Enter the data source name and id , As shown in the figure below :

Click when finished " Start to create " Button , The platform opens the add model field window , As shown in the figure below :

Be careful , The micro build platform will define many fields for each data model , You can ignore these for a while , Click directly below " Add fields ", Pop up the following window , Define a specific field .

After setting up , Click on " determine " Button . Continue to add the next field . After all fields are added , As shown below :

Finally, click " determine " Button , It's done. " User information " Data source creation .

2.2 Create an

• go back to " Console ", Click on " Create an ";

• In the content area on the right , choice " Create a new custom application "
  

• Fill in the application name , And select the applet

• Add a page to the app , Add a home page by default (index)

2.4 Defining variables

Variables are used to store information , It is divided into global variables and page variables , Global variables are variables that can be accessed by all pages , Page variables can only be used within the pages defined in , Here we define two variables :

• openid: Global variables , Used to save the data obtained from the cloud platform openid, Every wechat user has a unique openid.
• userInfo: Page variables , Used to save user information .

Specific operation , There is a variable definition button in the top menu of the main application

Click to open , As shown in the figure below :

Be careful , The above figure shows the effect after definition , At the beginning of definition , Click on " overall situation " After "+", The definition of global variables will pop up , hold openid Define as an empty string , userInfo It should be defined in the homepage , The initial value here is a little complicated , It's an object type .

2.5 Code writing

1. Get wechat user ID

Back to the console , find " Custom connector ", Click on " Create a new custom connector " Button , As shown in the figure below :

Then the following window pops up :

Fill in the name , identification , choice " Create from blank ", Click when finished " Start to create " Button . Then it shows as follows :

Click on " Create... Now ", It is shown as follows :

According to the above figure , Finally, click " Check the details ", The code of this method is displayed . Delete all the codes inside , Then write the following code :

//  Custom connector 
const cloud = require('wx-server-sdk')
cloud.init({
    
  env: cloud.DYNAMIC_CURRENT_ENV
})

module.exports = async function(params, context){
    
  const wxContext = cloud.getWXContext()
  return {
    
    openid: wxContext.OPENID,
    appid: wxContext.APPID,  
  }
}

In addition, be sure to add " The ginseng ", That is, the return value . as follows :

About Custom connector ：

1. Generally speaking , A custom connector serves a specific data source .
2. It can also be independent of specific data sources , For example, we have established this , Because there is no access to specific data sources , Instead, it accesses cloud functions , Therefore, it can be independent of specific data sources .

2. Use “ Custom connector ”

Use... As defined above “ Custom connector ”, Get the user's openid, And save it to a global variable openid in , The reasonable position is in the global life cycle , That is, call it during application loading .

• In the top collapse menu of the main application , find “ Low code editor ” menu

• After opening the low code editor , You can see the application lifecycle function at the top , The following is the life cycle function of each page .
  

• In the application lifecycle （ In the global lifecycle ） Enter the following code ：

  async onAppLaunch(launchOpts) {
        
      //console.log('---------> LifeCycle onAppLaunch', launchOpts)
      const objData = await app.cloud.dataSources.getopenid_a6gatyp.getopenid();
      console.log(objData)
      app.dataset.state.openid=objData.openid;  // Assign to global variables 
    },
  

  Among them getopenid_a6gatyp That's what we define “ Custom connector ” The logo of , getopenid() For methods in connectors . Be sure to modify it according to your own definition ！

So far, we have finally finished getting users openid The job of , Then let's build the front page .

2.6 Front page

The outline tree of the front page is as follows ：

The results of the first two containers are exactly the same , But the purpose is completely different . But the image and text in the first container are bound with data , But it is conditional , This is the key . Here are the displayed conditions ：

$page.dataset.state.userInfo.openid!=''

in other words , When the user is not logged in , This container will not be displayed ！

The second container , It is also shown by conditions , Just the conditions are different , as follows ：

$page.dataset.state.userInfo.openid==''

This condition means , When there is no login . That is, the effect on the far right of the above figure .

So how to get user information ？ We are “ Sign in ” Button to add event handling code , Get the information of wechat users .

2.6.1 Add button event handling

• Write event handling code

  Need to go back to “ Low code editor ”, choice “index” On the page “handler”, Add an event handling method
  

In the above code , The data obtained in the following line is stored in the user information database ：

let ret =await app.dataSources.userInfo_lb6ln7w.wedaCreate($page.dataset.state.userInfo);

userInfo_lb6ln7w Is the identifier of the user information data source you created , Be sure to make your own modifications .

• The binding event
  

2.7 test

When the program is finished , How to see the effect ？ Then the first step is to release , Published here as “ Experience version ” that will do . After the release , Will provide QR code , After scanning the wechat code , You can test .

Thanks to those guys who have common interests , I also thank those who understand and share with me , It feels special here “ Low code preacher ”.