WeChatミニプログラム開発【0から1へ～入門編】 2023.08

小さなプログラムの主要部分は 3 つのファイルで構成されており、次のようにプロジェクトのルートディレクトリに配置する必要があります。

書類	しなければならない	効果
アプリ.js	はい	アプレットロジック
アプリ.json	はい	ミニプログラムアナウンスの構成
アプリ.wxss	いいえ	ミニプログラム告知スタイルシート

3. スモールプログラムプロジェクトの構造

小さなプログラムページは、次の 4 つのファイルで構成されます。

ファイルの種類	しなければならない	効果
js	はい	ページロジック
wxml	はい	ページ構造
json	いいえ	ページ構成
wxss	いいえ	ページスタイルシート

》》》》》》》》》》》》》》

まず、Demo プロジェクトのルートディレクトリに app.json ファイルを作成します。その内容は次のとおりです。

{
  "pages":[
    "pages/index/index"
  ]
}

次に、デモプロジェクトのルートディレクトリの下に新しいページディレクトリを作成し、ページディレクトリの下に新しいインデックスディレクトリを作成して、インデックスディレクトリの下に 2 つのファイル、index.wxml と Index.js を作成します。
Index.wxml の内容は次のとおりです。

<view>
  <view style="text-align:center;padding:200rpx">
    <text>{
   
   {motto}}</text>
  </view>
</view>

Index.js の内容は次のとおりです。

Page({
  data: {
    motto: 'Hello World',
  },
  onLoad() {
  }
})

上記の手順を完了すると、開発者ツールの構造は次のようになります。

ミニプログラム開発者ツールの [コンパイル] コマンドをクリックすると、開発者ツールはデモプロジェクトのコンテンツをコンパイルし、WeChat 開発者ツールのエミュレータインターフェイスに Hello World の結果を表示します。

4.4 アプレットの現在のページのローカル構成を設定します (例として、index.wxml: 背景とフォントの色を変更します)。

1. ページの下のインデックスディレクトリにあるindex.json ファイルを選択して、構成を変更します

完全なコードは次のとおりです。直接コピーして貼り付けることができます

{
    "usingComponents": {},
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "第一个小程序项目",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }

4.3 アプレットに新しいページを追加する

1. app.json と入力し、最初のページ配列に生成されたページファイルのパスを指定して自動的に作成します

注記！どのページを最初に表示するかを順番に並べることができ、最初のページのパスが最初に表示されるページになります

4.5 アプレットのモップバーを設定する (グローバル設定)

1. app.json を選択して入力した後、編集用にファイルの最初の中括弧内にコードを追加し、複数のノードをカンマで区切ります。