On the applet MINA framework, data flow to implement the login registration function

Reference Documents

Small application development framework · · · Guide and other API
applet us · Development · registration · · information subject to pay
a small program-development support
developer communities
applet · Cloud Development

An applet is a MVVM framework it?

We have developed a small program, we found it is also the view layer and logical layer separation, with our three framework there are many similar places. However, small micro-channel is used by the program MINA frame, and VUE, React these MVVM similar front-end frame.

MINA (Miniapp Is Not App) frame is a frame to develop micro-channel applet. Its goal is as simple and efficient way for developers to develop native App experience of service in the micro letter.

MINA frame, the entire contents of the applet is divided into two levels: view layer (rendering layer) and a logical layer; view layer comprises a structural layer and presentation layer, the layer providing the applet WXML specification and description language WXSS; control applet pages appearance; predetermined pattern and its structure; the logical layer is responsible for data processing, etc. applet; applet provides a logical framework JavaScript based layer.
Rendering and logical layers are represented by the applet management two threads: the interface layer is rendered using a rendering WebView; JsCore thread runs using logical layer JS script.

MINA framework

MINA framework combines the properties MVVM frame; MINA framework provides a rich component and a micro-channel basis native API. There is also a page management function page routing, manage the entire applet, it can be done seamlessly switch to the page and complete the life cycle. Developers need to do is page data, methods, life cycle function registered into the frame, all other complex operations to the framework process.

Whatever framework is good, its greatest feature is to allow our developers to write code in a particular way

data flow

data flow
Image can be seen: the applet is one-way data binding, which is the same point and react, react storage state is state, and finally we have to change the state by this.setState ({}), and the data stored in the applet datainside, if the need to change the data, you need this.setData({})to change the data

Verify small program is a one-way data binding

Applet to data from the current data object's data page

// pages/demo/demo.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    msg:'如何改变小程序的data的数据'
  }
})

In a small program, where if the data binding on the use of {{}}syntax, this syntax is called Mustache , in vue we know, {{}}there is an interpolation expression, which is a js statement.

<!--pages/demo/demo.wxml-->
<text>{{msg}}</text>

So, if it is a two-way data binding, generally we change the input, and the data also will be followed by changes in the data, for example v-model, *ngModelto achieve the two-way binding, but there is no similar instruction applet

<input type='text' value='{{msg}}' focus></input>

When we change the contents of the input box, the data can be seen that the data has not changed
So we can only react like that bind one event

<input type='text' value='{{msg}}' focus bindinput='changeMsg'></input>

Change the data processing functions

  changeMsg(e){
    console.log(e)
    this.setData({
      msg: e.detail.value
    })
  },

data
We also use the general target and currentTarget inside the dataset, choose which, if you want to see the event delegate; and target is bubbling

Render list data

While applets react with one-way data binding, but she also wants to vue and ng that have their own instructions, such as we render list data wx:for; default subscript of an array variable name defaults to the current item index, the current array of items The default is the variable nameitem

Login registration function

wxml structure, pay attention to the Register button to set the login form-type="submit"form is submitted in order to obtain a form of value

<!--pages/login/login.wxml-->
<form bindsubmit="loginHandle">
  <view class="container">
    <view class="header">
      <image src="../../images/sign.png" mode="aspectFit"/>
    </view>
    <view class="inputs">
      <input 
        class="username" 
        name="username"
        placeholder="请输入用户名" 
        value="{{ username }}"/>
      <input 
        class="password" 
        type="password" 
        name="password"
        placeholder="请输入密码" 
        value="{{ password }}"/>
    </view>
    <view class="buttons">
      <button type="primary" form-type="submit">登陆</button>
      <button type="default" form-type="submit">注册</button>
    </view>
  </view>
</form>

Prepare their own style and pictures, because we are here mainly achieved Login Register function, probably the interface is as follows
login
when the button click Login Register we can get the data

Page({
  data: {
    username:'',
    password:''
  },
  loginHandle(e){
    console.log(e.detail.value)
  },
})

Then you can log in the background verification according to our database

We can also use the micro-channel user login information

of the type-Open: getUserInfo : obtaining user information can be obtained from bindgetuserinfo callbacks to user information
bindgetuserinfo : When the user clicks the button, it will return to obtain user information, consistent callback detail data and wx.getUserInfo returned when the open-type = "getUserInfo" effective

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

  data: {
    userInfo: {},
    hasUserInfo: false
  },
  getUserInfo(e){
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },

We can use this information to log in

Other frameworks

JavaScript development framework lateral alignment (Vue, React and Angular)
MVVM framework of
three frame guide