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 を選択して入力した後、編集用にファイルの最初の中括弧内にコードを追加し、複数のノードをカンマで区切ります。

 

おすすめ

転載: blog.csdn.net/zgscwxd/article/details/132135448
おすすめ