[微信MiniProgram] 001 - プロジェクトディレクトリのファイル構造と基本的な構成

ファイル構造

1.ルートディレクトリ

メインロジックプログラムをapp.js

app.json設定ファイル

属性「ページ」する必要が相対パス宣言ページの方法

{
  "pages": [
    "pages/about/about",
    "pages/weekly/weekly"
  ],
  "sitemapLocation": "sitemap.json"
}

app.wxssメインプログラムのスタイル

ここではすべてのページには、クラスで使用されるいくつかの一般的なスタイルを設定する可能性があります

project.config.jsonプログラム情報

このファイルは、自動的に開発ツールによって生成されます

ページのフォルダ

これは、すべてのページの小さなプログラムを含むフォルダ

---

フォルダ内の2ページページファイルフォルダ

ページについての例以下は、

ページのロジックabout.js

こちらのページオブジェクトを作成するには

Page({})

プロフィールページabout.json

ここでは、そのようなナビゲーションバーのタイトルとして、ページの情報を設定することができます

{
  "navigationBarTitleText": "关于"
}

ページレイアウトabout.wxml

同様の構文のHTMLページレイアウトの説明では、注意がエンドマーカー持っている必要があります
サンプルコードを：

<view class="container">
  <image src="/images/profile.JPG" class="icon"></image>
  <text class="title">电影周周看</text>
  <view>
    <navigator url="/pages/weekly/weekly" style="display: inline;" class="nav-text" hover-class="nav-hover" open-type="navigate">
    每日推荐
    </navigator>
    <text class="subtitle">一部好电影</text>
  </view>
  <text class="subtitle">我的微博：Luke玄</text>
</view>

ページスタイルabout.wxss

ここでは、スタイルクラス定義は、ページの使用
サンプルコードを：

.container{
  background-color: #eee;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.icon{
  width: 375rpx;
  height: 375rpx;
  border-radius: 50%;
}

.title{
  font-size: 60rpx;
  font-weight: bold;
}

.subtitle{
  font-size: 30rpx;
  font-weight: lighter;
}

.nav-text{
  color: lightblue;

.nav-hover{
  color: grey;
}
}