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

比眉伴天荒 2022-02-02 11:15 330阅读 0赞

### 参考文档 ###

[小程序开发·指南·框架·API等][API]  
[小程序介绍·开发·注册·主体信息·支付][Link 1]  
[小程序·开发支持][Link 2]  
[开发者社区][Link 3]  
[小程序·云开发][Link 4]

### 小程序是一门MVVM框架吗？ ###

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

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

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

### MINA框架 ###

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

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

### 数据流 ###

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

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

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

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

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

<text>{
       {msg}}</text>

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

1.  当我们改变输入框的内容，可以看出data的数据并没有发生改变  
    ![编辑][20190512102211100.png]
2.  所以我们只能像react那样绑定一个事件

1.  处理函数改变数据

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

![数据][20190512104937470.png]  
我们一般还用到target和currentTarget里面的dataset，选择哪个，看你是否要事件委托；而target是冒泡

### 渲染列表数据 ###

虽然小程序跟react都是单向数据绑定，但是它自己也想vue和ng那样有自己的指令，比如我们渲染列表数据`wx:for`;默认数组的当前项的下标变量名默认为`index`，数组当前项的变量名默认为`item`

### 登录注册功能 ###

wxml的结构，注意登录注册按钮要设置`form-type="submit"`提交表单，这样才能获取表单的值

<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>

样式和图片自己准备，因为我们这里主要实现登录注册功能，大概的界面如下  
![login][]  
当点击登录注册按钮的时候我们即可获取数据

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

接下来就可以根据我们的数据库进行后台验证登录了

### 我们也可以使用微信用户信息进行登录 ###

*  **open-type:getUserInfo**:获取用户信息，可以从bindgetuserinfo回调中获取到用户信息
 *  **bindgetuserinfo**：用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效

<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
        })
      },

我们可以利用这些信息进行登录

### 其它框架 ###

[JavaScript 开发框架横向比对（Vue、React 和 Angular）][JavaScript _Vue_React _ Angular]  
[ MVVM框架][MVVM]  
[三大框架指南][Link 6]

[API]: https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/introduction.html
[Link 1]: https://developers.weixin.qq.com/miniprogram/introduction/index.html
[Link 2]: https://mp.weixin.qq.com/cgi-bin/wx
[Link 3]: https://developers.weixin.qq.com/community/develop?idescene=1
[Link 4]: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html
[Link 5]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220202/519803c5564d4a5da9fa0ca264b40f83.png
[20190512102211100.png]: /images/20220202/3c830d1281c844c592e296be77e47328.png
[20190512104937470.png]: /images/20220202/97a539c79e7b44f1ae121b2415f25387.png
[login]: /images/20220202/ab8cd6103c384cbdb683e2adbaab6f51.png
[JavaScript _Vue_React _ Angular]: https://blog.csdn.net/deniro_li/article/details/80507863
[MVVM]: http://baijiahao.baidu.com/s?id=1596277899370862119&wfr=spider&for=pc
[Link 6]: https://baijiahao.baidu.com/s?id=1609374985643812253&wfr=spider&for=pc