Shulou(Shulou.com)06/01 Report--

The knowledge of this article "how to develop the Mini Program login interface" is not understood by most people, so the editor summarizes the following contents for you, with detailed contents and clear steps, which can be used for reference. I hope you can get something after reading this article. Let's take a look at this "Mini Program login interface how to develop" article.

Example of Mini Program login interface style development:

Index.wxml

{{motto}}

User name:

Password:

Log in

Index.js

Var app = getApp ()

Page ({

Data: {

Motto: 'welcome to WXapp'

UserName:''

UserPassword:''

Id_token:'',// facilitates the existence of local locakStorage

Response:'' / / access returned data

}

UserNameInput:function (e) {

This.setData ({

UserName: e.detail.value

})

}

UserPasswordInput:function (e) {

This.setData ({

UserPassword: e.detail.value

})

Console.log (e.detail.value)

}

LogIn:function () {

Var that = this

Wx.request ({

Url: 'http://localhost:8000/admin',

Data: {

Username: this.data.userName

Password: this.data.userPassword

}

Method: 'GET'

Success: function (res) {

That.setData ({

Id_token: res.data.id_token

Response:res

})

Try {

Wx.setStorageSync ('id_token', res.data.id_token)

} catch (e) {

}

Wx.navigateTo ({

Url:'.. / components/welcome/welcome'

})

Console.log (res.data)

}

Fail: function (res) {

Console.log (res.data)

Console.log ('is failed')

}

})

}

})

The data in Page in js file is similar to the mechanism of state in react.

After that, if you want to call the data in data in the js file, you must use this.data.XXX only.

But if you want to bind data in data in wxml, you only use double parentheses, and! No need! this.data. Directly is {{XXX}}.

Back in the code, there are mainly two input boxes and a button in wxml. You can obtain the value of input through the native API-bindInput of Mini Program input (document: Mini Program input)

Then define two (userName and userPassword) in the data to access the input values of the two input.

Then bind the logIn function in the js file through button's bindTap.

In the logIn function, you use this.data.userName and this.data.userPassword to get the two values you entered.

By calling Wechat's send request API, putting two values in the request, this is a bit like sending a request by ajax.

Then write down what you want to do after success in success, such as in this case, jump to the welcome page.

The above is about the content of this article on "how to develop Mini Program login interface". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about it, please 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.