まず、新しいページを作成する(ページ)アプレットプロジェクト
最初のフォルダNEW_PAGEのルートディレクトリに新しいページ
NEW_PAGEフォルダを選択し、アプレットの開発ツールを右クリックして、新しいページのオプションがあるでしょうし、ファイルをクリックすると、直接NEW_PAGE下4つの新しいカタログを作成します。
- new_page.js
- new_page.wxml
- new_page.wxss
- new_page.json
これらのことに注意してください4つのファイルができ、フォルダNEW_PAGE名は異なりますが、4つのファイルが同じ名前である必要があり、そうでない場合は、アプレットは、ファイルパス依存性を見つけることができない、と私は混乱を避けるために、同じフォルダ名やファイル名をお勧めします
ここでは、小さなプログラムページの確立が完了すると、それは注目に値するその開発ツールの小さなプログラム(私は公式開発ツールの小さなプログラムを使用)、あなたはルートディレクトリに新しいページ、アプリを作成するとき。 JSON新しいデータのページを見ることができます
app.json
{ "ページ" :[ "ページ/インデックス/インデックス" 、 "/について/に関するページ" 、 "ページ/ NEW_PAGE / NEW_PAGE" // 新增的ページ记录 ]、 "窓" :{ "backgroundTextStyle": "光" 、 "navigationBarBackgroundColor": "#FFF" 、 "navigationBarTitleText": "微信" 、 "navigationBarTextStyle": "黒" }、 "sitemapLocation": "sitemap.json" }
これは、このようなアクセスへのインタフェースをルーティングスイッチとしても、ここで登録したアドレスが、だけでなく、navigateToを通じて、登録ページのルートですが、ナビゲーションバータブバーを使用して、ページの下部を作るために必要がある場合は、アドレス内の「ページ」に登録する必要があります
wxmlファイル
あなたは、アプレットタグは内部のページに設定されます使用することができ、それが自動的に同じディレクトリにスタイルシートwxss紹介します。具体的な使用と同様のCSSスタイルシートは同時に、あなたはまた、アプレットタグ構文を使用することができます
wxssファイル
- あなたはここにwxml要素のスタイルを編集することができ、そしてそれは、CSSタグセレクタのほとんどをサポートしていますが、優先度が異なる 優先順位のタグセレクタ<クラスセレクタ<IDセレクタ
- 、あまりにも劣ら書き込みの場合に比べて、現在のページのCSSスタイルが存在しない場合は、同じ名前を持つだけwxssファイルを使用wxml、あなたは@importを使っwxml wxssファイルが導入されたのと同じ名前の現在のディレクトリとファイルに新しいwxss wxssファイルを作成することができます
- wxssスタイル以下のページでは、唯一のwxmlファイルの現在のページに作用し、残りのJS、JSONファイルは同じです
JSONファイル
- 独占プロフィールページ、ページ上でのみ動作します。詳細な構成については、
JSファイル
// index.js ページ({ データ:{ テキスト:「これは、データページです」 }、 読み込み時:機能(オプション){ // ページが実行時間を作成し 、} :onShow 機能(){ // ページがフォアグラウンドで表示されたとき実行 }、 onReady:関数(){ // ページが最初に完全にレンダリングされたときに実行される }、 onHide:関数(){ // 前景からページが背景となったときに実行 }、 ONUNLOAD:関数(){ // ページが破棄されるときに実行 } 、 onPullDownRefresh:関数(){ // リフレッシュプルダウントリガー実行 }、 onReachBottom:関数(){ // 実行ページの底部を }、 onShareAppMessage:関数()は、{ // ページがときにユーザー共有実行される }、 onPageScroll:関数(){ // ページスクロール実行 }、 さらにonResize:関数(){ // 実行されたときに、ページ・サイズが変化 }、 onTabItemTap(アイテム){ //は、タブがクリック実行 にconsole.log(item.index) にconsole.log(item.pagePath) はconsole.logを( item.Text) } // 入射応答関数 viewTap。関数(){ この.setData({ テキスト: 'セットビューを更新するためのいくつかのデータ' }、関数(){ // これはコールバックのsetDataある }) } // 自由数据 customData:{ HI: 'MINA' } } )
各ページJSファイル、一度だけしかページ({})方法、そうでなければ最初の不明なエラーのみを実行します
各ページには、独自の独立したライフサイクルを持っていますが、またライフサイクル機能の魅力を提供し、各機能のライフサイクルは、我々は独自のビジネスコードの一部を実行することができます。しかし、まだ最初の任意の効果を持っているこれらのライフサイクルを理解します
onLoad
/ * * - *ライフサイクル機能ページのロードをリッスン * / のonLoad:機能(オプション){ // トリガは、ページは一度だけのページがロードと呼ばれるパラメータを受け取ります。パスの現在開いているページに含ま はconsole.log(オプション); }
現在のページはにgo_to_about方法です
go_to_about(){ wx.navigateTo({ URL: '/ページ/について/約ID = 12はいかがですか?' 、 }) } // {ID: "12"}でその値が印刷されるのonLoadオプション
onShow
- あなたは、いくつかの回をトリガすることができます
- onShow現在のページ、およびアプレットが背景から前景に切り替わり、ページが現在のページをトリガーするときに表示されている場合onShowアプレット(以下app.js、アプレットのライフサイクルではなく、ページのライフサイクル)実行後
- ページを切り替えると、現在のページを表示しているページはonSHhowトリガされます
- そしてアプレット異なる、onShowページはパラメータを受け取りませんonShow
- ページが最初にロードされると、onShowはonReady前に実行しました
onReady
- ときに一度だけ最初の実行、ページのライフサイクルページのレンダリングが完了しました
- 引数はありません
- APIは、次のような表示、変更するために使用さwx.setNavigationBarTitleを使用した後、onReady
1つの塩酸塩
- トリガーがあまりにも、背景に小さなプログラムが含まトリガーする背景にページ
- 引数はありません
- onHideアプレットの実行、および逆onShow前
ONUNLOAD
- トリガがアンインストールされた場合。別のページへwx.redirectToまたはwx.navigateBackなど。
- 引数はありません
onPullDownRefresh
- ドロップダウンモニターユーザーイベント
- 引数はありません
- 必要としている
app.json
のwindow
オプションやページレイアウトオープンにenablePullDownRefresh
。 - よるwx.startPullDownRefreshのリフレッシュにトリガープルダウン、トリガーのドロップダウンアニメーション、エフェクト、一貫したユーザーマニュアルプルダウンリフレッシュへの呼び出し後にリフレッシュ。
- 処理されたデータを更新すると、wx.stopPullDownRefreshは現在のプルダウン停止ページを更新することができます。
onReachbottom
onPagescroll
- ページのスクロールイベントをリッスン
- パラメータを受信
- {scrollTopスプライト:ナンバー}スクロールバーの高さ
onShareAppMessage
- (ページ上のモニター・ユーザーがクリックで進むボタンボタン アセンブリ
open-type="share"
)またはメニュー「進む」ボタンの動作の右上、および転送の内容をカスタマイズします。 - パラメータオブジェクトを受け取ります
- オブジェクトを返します
- 転送ページとページonHideアプレットがトリガーされますときときの両方onShow、休暇転送ページをトリガすることは注目に値します
さらにonResize
- ときにトリガアプレット画面の回転
- パラメータを受け入れ
onTapItemTap
- ナビゲーション・ページのタブとしてページ、およびタップで選択したトリガ
- パラメータを受信