We explained the user registration function at the beginning of the tutorial. The original plan was to allow users to choose their own roles as soon as they come in, and then submit user information. If they are not registered, they will jump to the registration interface.
With the deepening of the tutorial, I also referred to many online small programs, and found that this mode also has certain shortcomings. Because as a user who logs in for the first time, he does not understand the specific functions of your program, so it is a bit inhumane to force the user to register.
In order to improve the experience of the applet, we modify the business logic to prevent users from registering information as soon as they open it. We still put it on my page to realize user registration. Therefore, it is necessary to modify the original function
1 Optimization of data sources
In the last article, the data source we designed has taken into account the acquisition of the user's nickname and avatar. The original data source has already designed some fields, we expand several fields on the basis of the original
2 Update page
After adding fields to the data source, our registration page should also be adjusted accordingly. Select the form container, click the refresh button of the data source, and
check our newly added fields.
Newly added fields will automatically generate components according to the type of the field. After the component is updated, there is a problem. The user’s WeChat nickname and avatar already exist. Do I need to upload it again? Official components have taken this issue into account, and corresponding configurations have been added to advanced properties.
First select the nickname, in the property panel on the right we find the ability to open the applet, open the configuration,
select the avatar, and also open the ability to open the applet
to open these two configurations, if you publish it as a small program, when you enter information, you can The WeChat nickname and avatar will pop up, which can be selected directly.
3 Modify the logic when the applet starts
Our original logic is to judge whether the user is registered when the applet is started. If registered, we will take out the information and store it in the global variable. If not registered, we will jump to the registration interface. Now our logic is that we only need to get user information without jumping to the page
export default {
async onAppLaunch(launchOpts) {
//console.log('---------> LifeCycle onAppLaunch', launchOpts)
//$app.auth.currentUser.openId = "o29js5TnCwiYJayG9AieKzkIlOBg"
const userInfo = await $app.auth.getUserInfo();
console.log(userInfo)
const result = await app.cloud.callModel({
name:'yhxx_5wybupo',
methodName:'wedaGetRecords',
params:{
pageNo:1,
pageSize:1,
where:[
{
key:"openid",
rel:"eq",
val:userInfo.openId
}
]
}
})
console.log(userInfo.openId)
console.log(result)
if(result.total>0){
$app.dataset.state.user = result.records[0]
/*app.navigateTo({
pageId:"index",
params:{}
})*/
}
},
onAppShow(appShowOpts) {
//console.log('---------> LifeCycle onAppShow', appShowOpts)
},
onAppHide() {
//console.log('---------> LifeCycle onAppHide')
},
onAppError(options) {
//console.log('---------> LifeCycle onAppError', options)
},
onAppPageNotFound(options) {
//console.log('---------> LifeCycle onAppPageNotFound', options)
},
onAppUnhandledRejection(options) {
//console.log('---------> LifeCycle onAppUnhandledRejection', options)
}
}
4 Update user information after registration
Another problem is that on my page, if we are not registered, we need to display the registration button. After registration, we need to return to my page and display the user's avatar and nickname. This involves the need to update variables after submission
The first thing to think about is, what happens after the user submits it? After the user clicks the submit button, the form container has set a default submit event.
In the micro-build, general events are called in a chain. For example, the method of creating a single record of the data source is called first, and then returns to the previous page after success.
Then our idea is to save the output parameters stored in the data source to a global variable first, then return to the previous page and then query the data and bind it to the page according to this variable
We first define a global variable to save the parameters returned by the submission method
Then bind the defined variables to the output parameter
and then query the data again in the life cycle function of my page and assign it to the global variable
export default {
async onPageLoad(query) {
console.log('---------> LifeCycle onPageLoad', query)
if (app.dataset.state.userid != "") {
const user = await app.cloud.callModel({
name: 'yhxx_5wybupo',
methodName: 'wedaGetItem',
params: {
_id: app.dataset.state.userid
}
})
if (user._id != '') {
app.dataset.state.user = user
}
console.log("user", app.dataset.state.user)
}
},
onPageShow() {
console.log('---------> LifeCycle onPageShow')
},
onPageReady() {
console.log('---------> LifeCycle onPageReady')
},
onPageHide() {
console.log('---------> LifeCycle onPageHide')
},
onPageUnload() {
console.log('---------> LifeCycle onPageUnload')
},
}
Summarize
We continue to improve the user registration function in this article, mainly to update the fields of the user table, and load the user information again after the registration function. If you are interested, follow the tutorial to experiment.