図1に示すように、テンプレートリファレンス
同じページレイアウトに関連して、異なるコンテンツは、テンプレートによって参照することができます
一つの方法：
< インポートSRC = "./person-card.swan" />
< テンプレートである= "人物カード" データ= "{{人}}" />
方式二：
< 含まSRC = "header.swan" />
2.filterフィルタ
- フィルタファイルの名前は：モジュール名.filter.js。
- その内部のプライベート関数の外部被ばくの輸出デフォルトの方法でフィルタ。
- フィルタ機能は、機能のみをエクスポートすることができます。
- フィルタイベントコールバック関数は、成分として使用することができません。
- フィルタモジュールは、インラインの形態であってもよく、独立して、あまりにも作成することができます。
- フィルターは、グローバル変数をサポートしていません。
- 同一のフィルタタグ複数のSRC属性値を表示されない、属性値は、識別モジュール固有のIDモジュールです。
使用法：
// maxVal.filter.jsの
輸出デフォルト{
MAXIN：ARR => { VAR最大= 未定義。ため（VAR i = 0; iが<arr.length; ++ I）{ 最大=最大=== 未定義？ARR [I]： （最大> = ARR [i]の最大：？ARR [I]）; } 最大を返します。} }。
// index.js
ページ（{
データ：{
配列：[ 1、3、6、8、2、0]
}
}）。
<！ -白鳥模版- >
< 表示> {{swan.maxin（アレイ）}} </ ビュー>
< フィルタSRC = "./maxVal.filter.js" モジュール= "白鳥"> </ フィルタ>
3.公開cssファイルのインポート
/ * index.css * /
@のインポート"header.css"。
注意：互換性iPhoneX安全な領域の下部には、我々は直接の互換性スタイルのセットを提供します
白鳥セキュリティパディング下クラス
< ビュークラス= 「セキュリティ・スワンパディング下」>テスト</ ビュー>
< - iPhoneX他のモデルでは、ノードは自動的にビューを取得します「パディング下：34px」！スタイル- >
4.カスタムコンポーネント
コンポーネントは、便利なものをDingding小さなプログラムです
1、コンポーネントを作成します
<！ - 内部自己組織化テンプレート（custom.swan）の定義 - >
< ビュークラス= "名前" bindtap = "タップ">
{{名前}}、{{年齢}}
</ ビュー>
//カスタムコンポーネントロジック（Custom.js）
成分（{
プロパティ：{ // name属性は、組立時に使用されてもよい定義し、外部コンポーネントから渡された変数は、テンプレートに直接使用することができる名：{ タイプ：文字列、値：'白鳥'、} }、データ：{ 年齢：1 }、メソッド：{ TAP：関数（）{} } }）
2.コール
//页面JSON配置home.json
{ "usingComponents"：{ "カスタム"："/コンポーネント/カスタム/カスタム" } }
<！ -ページテンプレート（home.swan） - >
< 表示> <！ -カスタムコンポーネントのページで参照- > < カスタム名= "swanapp"年齢= '18「> </ カスタム> </ 表示> 。3、ソケットアセンブリのスロット文は、このことは、十分な理解ではありません,, INGの耳は柔軟えら穴を開け
<！ - コンポーネント定義 - >
< 表示> < スロット名= "SLOT1"> </ スロット> < スロット名= "SLOT2"> </ スロット> </ ビュー>
<！ -ページまたはコンポーネント部品を使用しています- >
< 表示>
< カスタムコンポーネント> < ビュースロット= 「SLOT1」> Iは上部アセンブリに挿入されている</ 表示> < ビュースロット= 「SLOT2、」> Iは、アセンブリの下に挿入される</ 表示> </ カスタムコンポーネント>