WeChat Mini Program Practice (1) --- Implementing the Login Interface

Yesterday, on the first day of the public beta of the applet, I downloaded a applet with its own IDE and played with it. After looking at the API, I came up with a login interface to share with you.

Below is the main interface and code.

index.wxml

<view class="container">
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
    username:
    <input type="text" bindinput="userNameInput"/>
    password:
    <input type="text" bindinput="userPasswordInput" password="true"/>
    <button bindtap="logIn">登录</button>
  </view>
</view>

index.js

var app = getApp ()
Page({
  data: {
    motto: 'Welcome to WXapp',
    userName:'',
    userPassword:'',
    id_token:'',//Convenient to have local locateStorage
    response:'' //Access return 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 source code is here, https://github.com/Yangzhedi/myBlog-wxapp , welcome to star, issue~

The code is the above. Personally, I feel that the applet is really similar to react, which is not due to the sentence imoort react in the source code of the applet. So those with React foundation will be better at getting started with small programs~

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

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

But if you want to bind the data in data in wxml, you only use double brackets, and! unnecessary! this.data. Just {{XXX}}.

Looking back at the code, there are mainly two input boxes and a button in wxml. Through the native API of applet input - bindInput (document: applet input ), you can get the value of the input,

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

Then bind the logIn function in the js file through the bindTap of the button. (documentation: applet button )

In the logIn function, the two values ​​that have been entered are obtained through this.data.userName and this.data.userPassword.

By calling WeChat's send request API , put two values ​​in the request, which is a bit like ajax send request.

Then write down what you want to do after success in success. For example, in this example, jump to the welcom page.