ログイン登録機能を実装するために、アプレットMINAフレームワーク、データフローに

参考資料

小さなアプリケーション開発フレームワーク・・・ガイドおよび他のAPI
たちをアプレット・開発・登録・・支払いの対象情報
の小さなプログラム開発支援の
開発者コミュニティの
アプレットを・クラウド開発

アプレットは、MVVMフレームワークとは？

私たちは多くの類似の場所がある私たちの3つのフレームワークと、それはまた、ビュー層と論理層分離された、小さなプログラムを開発しました。しかし、小さなマイクロチャネルが番組MINAフレーム、及びVUEで使用され、これらMVVM同様のフロントエンドフレームを反応させます。

MINAフレーム（Miniappアプリではありません）は、マイクロチャネルのアプレットを開発するためのフレームです。その目標は、開発者がマイクロ手紙でのサービスのネイティブアプリの体験を開発するためのように簡単かつ効率的な方法です。

MINAフレーム、アプレットの内容全体を2つのレベルに分けられる：ビュー層（描画層）と論理層、ビュー層は、構造層、プレゼンテーション層、アプレットWXML仕様及び記述言語WXSSを提供する層を含み、制御アプレットページ外観、所定のパターンとその構造、論理層は、データ処理、等アプレットを担っているが、アプレットは、論理フレームワークのJavaScriptベースの層を提供します。
レンダリングと論理層は、アプレット管理によって、2つのスレッド表される：界面層は、レンダリングのWebViewを使用してレンダリングされ、JsCoreスレッドは、論理層JSのスクリプトを使用して実行されます。

MINAフレームワーク

MINAフレームワークは、プロパティMVVMフレームを組み合わせ、MINAフレームワークは、リッチコンポーネントとマイクロチャンネル毎ネイティブAPIを提供します。あり、ページ管理機能のページのルーティングは、全体のアプレットを管理し、そのページに切り替えて、ライフサイクルを完了シームレスに行うことができます。開発者が行う必要があり、ページデータ、方法、フレームに登録されたライフサイクル機能、他のすべての複雑な操作フレームワークのプロセスにあります。

良いですがどのようなフレームワーク、その最大の特徴は、私たちの開発者が特定の方法でコードを書くことができるようにすることです

データフロー

ストレージ状態が状態で反応し、アプレットは、一方向データが同じ点であり、結合と反応され、そして最後にthis.setState（{}）で状態を変更する必要があり、およびアプレットに格納されたデータ：画像を見ることができますdataデータを変更する必要がある場合の内部、あなたが必要とするthis.setData({})データを変更します

小さなプログラムを結合一方向のデータであることを確認します

1. 現在のデータオブジェクトのデータ・ページからのデータへのアプレット

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

2. データは、使用上の結合場合は小さなプログラムでは、{{}}構文、この構文が呼び出された口ひげ、私たちが知っているVUEで、{{}}jsの声明である補間式は、そこにあります。

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

3. それが結合双方向のデータであれば、一般的に我々は、入力を変更し、データは、例えば、データの変更が続くv-model、*ngModel2ウェイバインディングを達成するために、ない同様の命令アプレットはありません

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

4. 我々は、入力ボックスの内容を変更すると、データはデータが変更されていないことがわかります
   
5. だから我々はそれだけで結合する1つのイベントのように反応することができ、

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

6. データ処理機能を変更します

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

我々はまた、データセット内の一般的な目標とは、currentTargetを使用しますが、イベントデリゲートを見たい場合はどの、選択、およびターゲットがバブリングされます

リストデータをレンダリング

アプレットは、一方向のデータバインディングと反応するが、彼女はまた、我々は、リストデータをレンダリングするなど、VUEと自分の説明書を持ってNGたい一方でwx:for、現在の項目に配列変数名はデフォルトの添字をデフォルトindex、アイテムの現在の配列をデフォルトでは、変数名ですitem

ログイン登録機能

wxml構造は、ログイン設定し登録ボタンに注意を払うform-type="submit"フォームが値の形を得るために提出されます

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

私たちはここに、主ログイン登録機能を実現しているので、おそらくインタフェースは以下のとおりである、独自のスタイルと写真を準備する

ボタンがログイン登録をクリックしたときに、我々は、データを取得することができます

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

そして、あなたは私達のデータベースによると、バックグラウンドの検証にログインすることができます

我々はまた、マイクロチャネルのユーザーのログイン情報を使用することができます

• getUserInfo：タイプオープン：ユーザ情報取得は、ユーザ情報にbindgetuserinfoコールバックから得ることができます。
• bindgetuserinfo：ユーザーがボタンをクリックすると、それはユーザ情報を取得するために返され、一貫性のあるコールバック詳細データとwx.getUserInfoが戻ったとき開放型=「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の開発フレームワークの横方向の位置合わせ（ヴュ、反応して角）
のMVVMフレームワーク
3つのフレームガイド