WeChat アプレット: シンプルな形式、ローカル ストレージ

コンテンツ例

ログインインターフェース

ログインフォームデータの処理

ログインフォームデータの処理(非同期)

ローカルデータのクリア

例 1: ログインインターフェース

app.json にログインページページを追加ログイン/ログインして入口として設定します。

保存後、関連ファイルが自動的に生成されます（非常に便利です）。

ビュー ファイルを変更します。 ; view class="row"> パスワード: text>パスワード" name="userPassword" placeholder="パスワードを入力してください" /> view> ログイン ボタン>ビュー>フォーム>ビュー>ログイン スタイルを変更します。 1px #0099CC;}.row{ 表示: flex; align-items: center; margin-bottom: 0.8rem;}.row text{ flex-grow: 1; text-align: right;}.row input{ : 0.7rem; カラー: #ccc; ボーダー: 1px ソリッド #0099CC; ボーダー半径: 0.3rem; ; }.row button{ パディング: 0 2rem;} スタイルを見てください:

フォーム関連の属性:

属性名 タイプ 説明 report-submit ブール型 テンプレート メッセージを送信するために formId を返すかどうか bindingsubmit EventHandle は送信イベントをトリガーするためにフォーム内のデータを運びます。event.detail = { value : {"name":" value"} , formId: "" } bindingreset EventHandle フォームがリセットされると、リセット イベントがトリガーされます。ここでは、送信されたフォーム データを処理するために Bindsubmit が使用されます。
入力関連属性

属性名 タイプ デフォルト値 説明 値 文字列 入力ボックスの内容 タイプ 文字列 テキスト入力タイプ、有効な値: テキスト、数値、IDカード、数字、時刻、日付 パスワード ブール値 false パスワード タイプのプレースホルダーかどうか文字列入力ボックス 空の場合のプレースホルダー placeholder-style String プレースホルダーのスタイルを指定します placeholder-class String input-placeholder プレースホルダーのスタイル クラスを指定します disable Boolean false maxlength を無効にするかどうか 数値 140 最大入力長。0 に設定すると、最大長は制限なし auto focus Boolean false 自動的にフォーカスを合わせてキーボードを引き上げます。ページに入力できるのは 1 つだけです。 auto-focus 属性 focus Boolean を false に設定すると、入力ボックスがフォーカスを失うと、bindchange イベントがトリガーされます。 bininput EventHandle 日付/時刻タイプ以外の入力ボックス。キーボードが入力されると、入力イベントがトリガーされ、event.detail={value:value} の処理関数が文字列を直接返すことができ、その内容が置き換えられます。入力ボックス。 bindingfocus EventHandle 入力ボックスにフォーカスがあるときにトリガーされます。event.detail = {value:value} bindingblur EventHandle 入力ボックスがフォーカスを失ったときにトリガーされます。event.detail = {value:value}button 関連属性

属性名 タイプ デフォルト値 説明 size文字列のデフォルト 有効な値のデフォルト、ミニタイプ 文字列のデフォルト ボタンのスタイルタイプ、有効な値 プライマリ、デフォルト、警告プレーン Boolean false ボタンが中空で背景色が透明かどうか disable Boolean false 読み込みが無効かどうか Boolean false かどうか名前の前に読み込みアイコンがあります。 formType String 有効な値はありません: submit 、reset、クリックすると送信/リセット イベントがトリガーされます。 hover-class String button-hover は、押されたボタンのスタイル クラスを指定します。 hover-class="none" の場合、クリック状態の効果はありません。このデモでは、ボタンの formType が submit に設定され、フォーム送信イベントがアクティブになります。
例2: ログインフォームデータの処理

login.js
//pages/login/login.jsPage({ data:{ userName:'', userPassword:'', }, formSubmit:function(e){ console. log(e.detail.value);//Format Object {userName: "user", userPassword: "password"} // フォームデータを取得 var objData = e.detail.value if(objData.userName && objData.userPassword) { // フォームデータを同期的に保存 wx.setStorageSync('userName', objData.userName); wx.setStorageSync('userPassword', objData.userPassword); // 成功ページにジャンプします wx.navigateTo({ url: '. . /index/index' }) } }, //ロード後、イベントを処理 //ローカルデータがある場合は直接表示 onLoad:function(options){ //ローカルデータを取得 var userName = wx.getStorageSync('userName '); var userPassword = wx.getStorageSync('userPassword'); console.log(userName){ this.setData({userName}); { this.setData({userPassword: userPassword}) } }, onReady:function(){ // ページのレンダリングが完了しました}, onShow:function(){ // ページが表示されました}, onHide:function(){ // ページが非表示になりましたここでは、wx.getStorageSync と wx.setStorageSync が使用されます。上記 2 つのメソッドは、HTML5 のローカル ストレージに似ており、同期ストレージ メソッドです。
これら 2 つのメソッドは使用するのが非常に簡単です。パラメータをリストします:
wx.setStorageSync(KEY,DATA)
属性名のタイプが必要です 説明 key String は、ローカル キャッシュ データ内の指定されたキーです Object/String は、必要なコンテンツです保存された wx .getStorageSync
属性名 タイプ 説明が必要です。 KEY 文字列は、ローカル キャッシュ内の指定されたキーです。 Name: text> text " name="userName" placeholder="ユーザー名を入力してください" value="{{userName}}" /> view> パスワード: text> view>この小さな例では、ログイン時にログイン情報をローカル ストレージに保存します。 、ローカルストレージに対応する情報がある場合は、直接入力します。
効果 (再度実行すると、情報が自動的に入力されます):

例 3: ログインフォームデータの処理 (非同期)

データはここに非同期で保存されます。
login.js を変更します
//pages/login/login.jsPage({ data:{ userName:'', userPassword:'', }, formSubmit:function(e){ console.log(e.detail.value) ; //Format Object {userName: "user", userPassword: "password"} //フォームデータを取得 var objData = e.detail.value; if(objData.userName && objData.userPassword){ //フォームデータを同期的に保存しますsetStorage({ key:'userName', data:objData.userName }); wx.setStorage({ key:'userPassword', data:objData.userPassword }); //成功ページにジャンプします wx.navigateTo({ url: '../index/index' }) } }, //ロード後、イベントを処理 //ローカルデータがある場合は直接表示 onLoad:function(options){ //ローカルデータを取得 wx; .getStorage({ key: 'userName', success: function(res){ console.log(res.data); that.setData({userName: res.data}); } }); 'userPassword', success: function(res){ console.log(res.data); that.setData({userPassword: res.data}) } }); // ページのレンダリングが完了しました}, onShow:function(){ // ページ表示}, onHide:function(){ // ページ非表示}, onUnload:function(){ // ページを閉じました}})wx.setStorage(OBJECT)
属性名型 必須説明キー 文字列は、ローカル キャッシュ データ内の指定されたキーです。 オブジェクト/文字列は、保存する必要があるコンテンツです。 success 関数 No 成功したインターフェイス呼び出しのコールバック関数 failed 関数 No 失敗したインターフェイス呼び出しのコールバック関数 complete Function No コールバックインターフェース呼び出しの終了関数 (呼び出しが成功しても失敗しても実行されます) wx.getStorage(OBJECT)
属性名 型 必須 説明 キー 文字列はローカルキャッシュ内の指定されたキーです。 関数は呼び出されるコールバック関数です。インターフェースにより、res = {data: キーに対応する内容} failed Function No インターフェースの呼び出しに失敗したコールバック関数 Complete Function No インターフェース呼び出しを終了するコールバック関数 (呼び出しが成功または失敗した場合に実行されます) ) 例 4: ローカル データをクリアする

ここでは詳しくは書きませんが、これら 2 つのローカル データをクリアする方法を直接紹介します。
wx.clearStorage()
wx.clearStorageSync()
直接実行するだけです。

その他の WeChat ミニ プログラム: シンプルなフォーム、ローカル ストレージ関連の記事については、PHP 中国語 Web サイトに注目してください。