小程序浅谈MINA框架、数据流到实现登录注册功能

参考文档

小程序开发·指南·框架·API等
小程序介绍·开发·注册·主体信息·支付
小程序·开发支持
开发者社区
小程序·云开发

小程序是一门MVVM框架吗？

我们开发小程序的时候，发现它也是视图层和逻辑层的分离，跟我们的三大框架有很多类似的地方。但是，微信小程序使用的是MINA框架，和VUE,React这些MVVM前端框架类似。

MINA（Miniapp Is Not App）框架是微信开发小程序的框架。它的目标是通过尽可能的简单、高效的方式让开发者可以在微信中开发具有原生App体验的服务。

MINA框架中，整个小程序内容分为两个层次：视图层（渲染层）和逻辑层；视图层包括结构层和表现层，小程序提供图层描述语言规范WXML和WXSS；控制小程序页面的样貌；规定它的结构和样式；而逻辑层负责小程序的数据处理等等；小程序提供了基于JavaScript的逻辑层框架。
小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。

MINA框架

MINA框架结合了MVVM框架的特性；MINA框架还提供一套基础的组件和丰富的微信原生API。还有一个页面管理功能，管理了整个小程序的页面路由，可以做到无缝切换，并给页面完成的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数注册进框架中，其他的一切复杂操作都交给框架处理。

不管什么框架都好，它最大的特点就是让我们开发者必须按照特定的方式编写代码

数据流

通过图片可以看出：小程序是单向数据绑定，这点和react是一样的，react是state存储状态，最后我们通过this.setState({})来改变状态，而小程序将数据存储在data里面，如果需要改变数据，则需要this.setData({})来改变数据

验证小程序是单向数据绑定

1. 小程序的数据从当前页面对象的data数据中来

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

2. 在小程序中，如果将数据绑定到哪就使用{ {}}的语法,这种语法叫做mustache,在vue我们可以知道，{ {}}里面是一个插值表达式，也就是一个js语句。

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

3. 那么，如果是数据的双向绑定，一般我们改变input，而data数据也随之跟着变化，比如v-model,*ngModel实现的双向绑定，而小程序没有类似指令

<input type='text&#