WeChat ミニプログラムをゼロから開発する (2)

小云云
リリース: 2018-03-21 09:42:57
オリジナル
2548 人が閲覧しました

前の章では、WeChat アプレットを最初から開発する方法 (1) を説明しました。アプレットを登録し、新しいプロジェクトを追加した後、この章で共有したいことは、一般的な準備と開発が完了したことです。簡単なページを作成します。 ミニ プログラム ページの具体的な手順:

1. ページにディレクトリを追加します。

ページを選択し、ハードディスク ファイルを開いた後、マウスを右クリックして開きます。新しいフォルダーテスト(または +サインをクリックして1つずつディレクトリを追加し、必要なファイルをディレクトリの下に追加します)







または次のように追加します

2. 新しいwxmlファイルを作成します

testフォルダーの下に新しい空のwxmlファイルを作成します


3. test.wxmlファイルを編集します

テストの便宜のために、いくつかの内容を入力しましょう

<view class="container">  
    <text>这是我的test页面哦哦!!!</text>  </view>
ログイン後にコピー

4. 同様に、test.js ファイルを作成し、test.js ファイルを編集します

test フォルダーの下に新しい空の js ファイルを作成します

同じものを使用しますテストを容易にするために、上記のメソッドで test.js ファイルを作成します (ファイルを空白のままにすることもできます)。

//test.js  //获取应用实例  var app = getApp()  
Page({  
  data: {  
    userInfo: {}  
  },  
  onLoad: function () {  
    console.log(&#39;onLoad test&#39;);  
  }  
})
ログイン後にコピー

5.テストページをapp.jsonに追加します

グローバルファイルapp.jsonを開き、ファイルに「pages/test/test」を追加します(テストページが配置されているディレクトリを追加します)

6.ホームページ上のジャンプアクセスリンク

すべての準備が整い、追加する必要があるものはすべて追加されました、今が奇跡を目撃する瞬間です、ホームページにページエントリを書いて、ページ上でテストしたいものにジャンプしてください、コードの一部とホームページのpages/index/index.wxmlへのリンクを直接追加します

<view class="btn-area">  
   <navigator url="/pages/test/test" hover-class="navigator-hover">跳转test页面</navigator>  
 </view>
ログイン後にコピー

7. テスト

コードを保存し、上のコンパイルボタンをクリックすると、すべてのコードが実行されます。ホームページの「テストページにジャンプ」をクリックすると、以下のようにジャンプが成功します。

8 )、たとえば、前回作成したテスト ページでは、pages/test/ ディレクトリを見つけて、新しい test.json ファイルを作成し、次のコードを追加します。

{  "navigationBarTitleText": "详情页"}
ログイン後にコピー

効果は次のとおりです:


OK、この時点で、ページの作成とページ間のジャンプが完了したことがわかります

関連する推奨事項:

WeChat アプレットを最初から開発する ( 1)


WeChat ミニ プログラムの簡単な紹介

WeChat ミニ プログラムのグローバル構成開発例

以上がWeChat ミニプログラムをゼロから開発する (2)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート