メインコンテンツまでスキップ

クイックスタート

このドキュメントでは、宜搭のカスタムページ機能を使用して、シンプルなデモを作成し公開する方法を説明します。デモの効果は以下の通りです：

上記の効果を見ると、ユーザーが入力フィールドに氏名を入力して「生成」ボタンをクリックすると、プログラムが自動的に挨拶文を生成し、ボタンの下に表示することがわかります。各ステップをできるだけ詳細に説明します。このプロセスで宜搭の製品機能に疑問がある場合は、宜搭使用マニュアル を参照してください。以下では、0から始めて上でのデモ効果を実現します。

ヒント

ユーザーは Hello サンプル にアクセスして実際の効果を確認できます。また、カスタムコンポーネントデザイナー にアクセスして具体的な実装を確認することもできます。

ステップ1：宜搭アプリケーションの作成​

まず、宜搭ワークベンチでアプリケーションを作成する必要があります（詳細は 使用マニュアル 参照）。既に利用可能なアプリケーションをお持ちの場合は、この手順をスキップできます。以下に示すように、demo サンプル という名前の空白アプリケーションを作成します：

ステップ2：カスタムページの作成​

次に、デモ機能を実現するためのカスタムページを作成する必要があります。以下に示すように、現時点ではページテンプレートを必要としないため、テンプレート選択画面で スキップ ボタンをクリックして、カスタムページデザイナーに直接移動できます：

宜搭のカスタムページデザイナーは以下の通りです。具体的な機能説明は デザイナードキュメント を参照してください。開発者はデザイナーに入ったら現在のページ名を変更できます：

ステップ3：コンポーネントのドラッグ＆ドロップと属性の設定​

私たちのデモサンプルは非常にシンプルで、合計3つのコンポーネントが含まれています。開発者はコンポーネントライブラリパネルからコンポーネントをキャンバスにドラッグできます。ユーザーは コンポーネントドキュメント にアクセスして、より多くのコンポーネント設定機能を確認することもできます：

  • 入力フィールド- 氏名入力用。コンポーネントの タイトル 属性を"氏名"に設定します；
  • ボタン- ユーザーの氏名入力を取得し、挨拶文を生成する用。ボタンコンポーネントの タイトル 属性を"生成"に設定します；
  • テキスト- 挨拶文を表示する用。美観のため、スタイルパネルで上マージン：20px、フォントサイズ：20pxを設定します。以下参照；

ステップ4：グローバル変数の作成​

このステップからロジック部分の実装を開始します。まず、挨拶文を保存するためのグローバル変数を作成する必要があります（グローバル変数の使用方法は グローバル変数ドキュメント 参照）。以下に示すように、helloWord という名前のグローバル変数を作成します：

ステップ5：ボタンクリックイベントのバインド​

ユーザーがボタンをクリックしたときに、入力フィールドの内容を取得し、挨拶文を生成して下に表示する必要があります。次に、イベントをバインドして挨拶文を生成する方法を説明します：

**1.**ボタンにクリックイベントをバインドします。以下に示すように、バインド後、アクションパネルに自動的にJS関数が生成されます（ユーザーは関数名をカスタマイズできます）；

**2.**getValue APIを使用して入力フィールドの内容を取得します。宜搭は非常に豊富な 宜搭JSAPI を提供しています。以下に示すように、入力フィールドコンポーネントのユニーク識別子に基づいてユーザーの入力内容を取得します：

**3.**挨拶文を構築し、setState APIを使用してグローバル変数の内容を更新し、ページの再描画をトリガーします。onClick の全コードは以下の通りです：

export function onClick() {
  // 氏名入力フィールドの内容を取得
  const name = this.$('textField_kzdxqcod').getValue();

  // グローバル変数を更新
  this.setState({
    helloWord: `Hello ${name} !`,
  });
}

ステップ6：文言にデータソース変数をバインド​

最後のステップとして、グローバル変数をテキストコンポーネントの 内容 属性にバインドして表示します。以下参照：

ステップ7：プレビュー&公開​

以上で、デモサンプルの開発は完了です。ユーザーはデザイナーの右上にある プレビュー ボタンをクリックしてプレビューできます：

プレビュー完了後、保存 ボタンをクリックしてページを保存します。次に、アプリケーションの右上にあるアクセスボタンをクリックして、作成したデモページにアクセスできます：

最後に​

以上でクイックスタートデモサンプルの制作が完了しました。ユーザーは Hello サンプル にアクセスして効果を確認できます。このサンプルを通じて、ユーザーは宜搭カスタムページの基本的な使用プロセスを概略的に理解できます。より複雑なサンプルチュートリアルを知りたい場合は、TodoMVC チュートリアル を参照してください。

この文書は機械翻訳により生成されています。翻訳により生じた齟齬や相違点は拘束力を持たず、コンプライアンスや執行目的において法的効力はありません。
© DingTalk (Singapore) Private Limited