アプレットの練習(1)

前書き

テキスト

1. 次にアプレットのディレクトリ構造を説明します。
   
   project.config.json：アプレットの設定ファイルです。プロジェクトのパッケージング設定、アップロードコードの自動圧縮などを含み、開発、パッケージングなどのためのいくつかの設定です。
   
   app.json: 現在のプロジェクトの設定ファイルです。プロジェクトのページ紹介、ナビゲーションバーの色、ナビゲーションバーのタイトルなどを含む、コード開発設定に固有のプロジェクトです。いくつかの設定を紹介します：
   
   pages: 含まれるページ。新しいページを追加するたびに、ここで紹介しなければなりません。そうしなければ、新しいページのjsonコンフィギュレーションは有効になりません。 最初に書かれたページが最初にレンダリングされるので、最初の配列が最初のページになることに注意してください。ここに新しいページを書くと、対応するフォルダが自動的にpagesフォルダに生成されます。
   
   window: すべてのページナビゲーションバーのフォント、色、背景色などを設定します。
   
   app.js: アプレットエントリーファイル。アプレット、App({}) のインスタンスを生成します。通常、ユーザー情報、認証情報、グローバル変数の定義などを取得します。
   
   app.wxss: アプレットグローバルスタイルファイル。プロジェクト ページ全体に適用されます。通常、プロジェクトのフォントとベースカラーを指定し、いくつかのパブリックスタイルを定義します。
   
   utils: ユーティリティディレクトリ。通常、いくつかのパブリックメソッドを置くために使用されます。例えば、カプセル化されたリクエストや、データを扱うためのメソッドなどです。
   
   pages: アプレットの pages ディレクトリ。アプレットのすべてのページはここに書き込まれます。

1. これらの設定が完了すると、全体的なスタイルが設定され、ログインページの構築を開始します。
   
   ここでは、プロジェクトを開くには、常にホームページを読み込みますが、その上にログインページへの直接アクセスを決定するためのアクセス許可の使用の背面に、急ぐことはありませんし、初期には、まず小さなプログラムのページの構成を理解することができます

.js: getApp() はアプレット・インスタンスを取得し、グローバル変数などを取ります。

.wxml: アプレットがサポートするタグは、spanはサポートされていますが、divはサポートされていません。 ----- htmlに似ており、同様のwx:if関数、MVVMパターンを提供します。

.wxss：マウスイベントがサポートされていないことを除いて、CSSに大きな変更はありませんが、ほとんどのCSSはサポートされています。





セレクタ、いくつかはサポートされていません rpx（responsive pixel）は、適応の画面幅に基づいてすることができます、rpx -> px :画面幅/750、px ---> rpx 750/画面幅の草案の設計では、ビジュアル草案としてiphone6を使用することをお勧めします、2倍良い計算スタイルの導入、@importを使用してください。

2. さて、パラメーターの渡し方、イベントの基本的なルールの縛り方について話したら、次はログインページにジャンプする方法ですが、4種類のジャンプ方法で使われるjsのアプレットについて話す必要があります。

// これは最も一般的なジャンプ方法で、公式の説明では「現在のページを保持したまま、アプリケーション内のページにジャンプする」となっている。”
wx.navigateTo({
 url: 'test?id=1'
})
// 現在のページを閉じ、アプリケーション内のページにジャンプする。
wx.redirectTo({
 url: 'test?id=1'
})
// タブバーページにジャンプし、タブバー以外のページを閉じる。
{
 "tabBar": {
 "list": [{
 "pagePath": "index",
 "text": " 
 },{
 "pagePath": "other",
 "text": " 
 }]
 }
}
wx.switchTab({
 url: '/index'
})
// すべてのページを閉じ、アプリケーション内のページを開く。wxの.redirectTo 戻る矢印は左上隅には表示されないが、両者は同一ではない。
ここで、アプレットのgetCurrentPages()メソッドについて触れておく。
 .navigateTowx.navigateBackでは、新しいページにジャンプするたびに、元のページは
wx.navigateBack(OBJECT)スタックに保存されたページを取得することで、前のレベルや複数のレベルに戻ることができる；
wx.redirectTo,メソッドはスタックに追加されないが、wx.navigateBackメソッドを通してアクセスすることができる。.navigateBack(OBJECT)メソッドはスタック内のページを返す
wx.reLaunch メソッドは現在のスタックを空にする。
wx.reLaunch({
 url: 'C?id=1'
 })

1. さて、以上4種類のジャンプについてお話しました。

この問題を解決した後、ログインページのタイトルを変更できます。login.jsonに "navigationBarTitleText": "Login "を追加するだけです。あるいは、login.jsでwx.setNavigationBarTitle({title: ` `})

ここで、アプレットの中で、dataの値を変更するときは、reactのsetStateと同様に、this.setData({tel: '234'})を使う必要があります。

別の問題がある、それは、入力ボックスを使用する場合、ラベル上の値を使用しないでください、データ内のデータをバインドすると、これは双方向バインディングのために入力のちらつきを引き起こす、このといえば、アプレットでは、プロパティに値をバインドするには、バインディングのための二重括弧内の二重引用符で、他の操作は、それが自動的に解決されます、文字列のスプライシングを使用する必要がある場合は、二重引用符を使用して文字列を記述し、スプライシングのための+記号を使用して変数と：たとえば、次の文字列はdsa $ { 2}であり、次にスプライシングのための+記号を使用して変数と：たとえば、次の文字列はdsa $ { 2}です。文字列の連結が必要な場合は、二重引用符を使って二重中括弧の中に文字列を記述し、+記号を使って変数と連結します：例えば、次の文字列はdsa${2wer}です。

その後、スタイルやコンポーネントを記述するだけでなく、ロジックをチェックするためにいくつかのコードを記述することですが、私は詳細に行くことはありませんが、詳細は次のとおりですとパスワードを忘れてしまいました。 と新規ユーザー登録、2つのジャンプ、リターナブルジャンプモードを使用しています。

それから、パスワード変更ページと新規ユーザー登録ページのスタイルとコードも改善します。

3つのページの構築が完了した後、あなたは今、パスワードの変更や新規ユーザー登録が成功したことをシミュレートすることができます、それはプロンプトを表示する必要があるはずですし、自動的にログインページにジャンプし、このシーンは、その後、ここでは、プロンプトボックスを使用する必要があり、 プロンプトボックスを作成するには、wx.showToastを使用することができますし、前のページにジャンプするには、wx.navigateBackを使用することができます。 ページ、デルタ：1前のページに戻る、2最後の2ページに戻る、数字は、ホームページへのリターンを超えて、ステップを表します。