02-WeChat アプレットのディレクトリ構造と構成

WeChat のディレクトリ構造

了解微信小程序项目的目录以及一些文件用途

アプレットでは、html、js、css がすべて拡張および制限され、ファイルのサフィックスが新たに定義されます。

• 3 つのファイルで構成されるメイン ファイルは、次のようにプロジェクトのルート ディレクトリに配置する必要があります。

  • app.js の役割: アプレット ロジック必填项
  • app.json 関数: ミニプログラムの公開設定必填项
  • app.wxss の役割: アプレットのパブリック スタイル シート非 必填项

• このページは、次の 4 つのファイルで構成されます。

ファイルの種類	効果	必要ですか?
js	ページ ロジック (WeChat アプレットにはウィンドウ オブジェクトとドキュメント オブジェクトがありません)	はい
wxml	ページ構造 (HTML 構文ではなく WeiXin マークアップ言語)	はい
wxss	ページスタイルシート（WeiXinスタイルシートはrpxサイズ単位を拡張、WeChat専用のレスポンシブピクセル）	いいえ
json	ページ構成	いいえ

注: 開発者が構成項目を減らしやすくするために、説明ページの 4 つのファイルは同じパスとファイル名を持つ必要があります。

設定手順

app.json 設定項目

app.jsonこのファイルは、WeChat アプレットのグローバルな構成、ページ ファイルのパスの決定、ウィンドウのパフォーマンス、ネットワーク タイムアウトの設定、タブの設定などに使用されます。

{
    
    
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    
    
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

アプレットのルート ディレクトリにあるファイルはapp.json、WeChat アプレットをグローバルに構成するために使用されます。ファイルの内容は、次のプロパティを持つ JSON オブジェクトです。

構成アイテム

属性	タイプ	必要	説明	最小バージョン
エントリページパス	弦	いいえ	アプレットはデフォルトでホームページを開始します
ページ	弦[]	はい	ページパスのリスト
窓	物体	いいえ	グローバルなデフォルトのウィンドウ動作
タブバー	物体	いいえ	ボトムバーtabの動作
ネットワークタイムアウト	物体	いいえ	ネットワークタイムアウト
デバッグ	ブール値	いいえ	デバッグモードを有効にするかどうか。デフォルトはオフです。
機能ページ	ブール値	いいえ	プラグイン機能ページを有効にするかどうか、デフォルトはオフです	2.1.0
サブパッケージ	物体[]	いいえ	下請け構造の構成	1.7.3
労働者	弦	いいえ	Workerコードが置かれているディレクトリ	1.9.90
必須バックグラウンドモード	弦[]	いいえ	「音楽再生」などバックグラウンドで使用する必要がある機能
必須プライベート情報	弦[]	いいえ	と呼ばれる位置関連のプライバシー インターフェイス
プラグイン	物体	いいえ	使用されているプラ​​グイン	1.9.6
プリロードルール	物体	いいえ	サブパッケージの事前ダウンロード ルール	2.3.0
サイズ変更可能	ブール値	いいえ	PC アプレットがユーザーによるウィンドウ サイズの任意の変更 (ウィンドウの最大化を含む) をサポートしているかどうか、iPad アプレットが画面の回転をサポートしているかどうか。デフォルトではオフになっています	2.3.0
コンポーネントの使用	物体	いいえ	グローバルカスタムコンポーネント構成	開発者ツール 1.02.1810190
許可	物体	いいえ	アプレットインターフェースの権限に関する設定	WeChat クライアント 7.0.0
サイトマップ場所	弦	はい	sitemap.jsonの場所を指定します
スタイル	弦	いいえ	アップグレードされた weui スタイルを使用するように指定します	2.8.0
useExtendedLib	物体	いいえ	参照する必要がある拡張ライブラリを指定します	2.2.1
入場宣言	物体	いいえ	アプレットを使用して WeChat メッセージを開く	WeChat クライアント 7.0.9
ダークモード	ブール値	いいえ	アプレットはダークモードをサポートします	2.11.0
テーマ場所	弦	いいえ	theme.json の場所を指定します。darkmode は true である必要があります。	開発者ツール 1.03.2004271
遅延コード読み込み	弦	いいえ	カスタム コンポーネント コード インジェクションをオンデマンドで構成する	2.11.1
シングルページ	物体	いいえ	シングルページモード関連の設定	2.12.0
サポートされている素材	物体	いいえ	チャットマテリアルアプレットの関連する設定を開きます	2.14.3
サービスプロバイダーチケット	弦	いいえ	カスタマイズされたサービスプロバイダーのメモ
埋め込まれたAppIdList	弦[]	いいえ	ハーフスクリーン アプレットの appId	2.20.1
半分のページ	物体	いいえ	動画番号 生放送半画面シーン設定	2.18.0
デバッグオプション	物体	いいえ	デバッグ関連の構成	2.22.1
イネーブルパッシブイベント	Object或boolean	否	touch 事件监听是否为 passive	2.24.1
resolveAlias	Object	否	自定义模块映射规则
renderer	string	否	全局默认的渲染后端	2.30.4
rendererOptions	Object	否	渲染后端选项	2.31.1
componentFramework	string	否	组件框架，详见相关文档	2.30.4
miniApp	Object	否	多端模式场景接入身份管理服务时开启小程序授权页相关配置，详见相关文档
static	Object	否	正常情况下默认所有资源文件都被打包发布到所有平台，可以通过 static 字段配置特定每个目录/文件只能发布到特定的平台(多端场景) 相关文档

window配置项

可以借助UE编辑器来随便找个颜色

window用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。参见注 2。	iOS/Android 微信客户端 6.6.0，Windows 微信客户端不支持
homeButton	boolean	default	在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键	微信客户端 8.0.24
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
enablePullDownRefresh	boolean	false	是否开启全局的下拉刷新。 详见 Page.onPullDownRefresh
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为 px。 详见 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋转设置，支持 auto / portrait / landscape 详见 响应显示区域变化	2.4.0 (auto) / 2.5.0 (landscape)
restartStrategy	string	homePage	重新启动策略配置	2.8.0
initialRenderingCache	string		页面初始渲染缓存配置，支持 static / dynamic	2.11.1
visualEffectInBackground	string	none	切入系统后台时，隐藏页面内容，保护用户隐私。支持 hidden / none	2.15.0
handleWebviewPreload	string	static	控制预加载下个页面的时机。支持 static / manual / auto	2.15.0

• 注 1：HexColor（十六进制颜色值），如"#ff00ff"

• 注 2：关于

  navigationStyle
  

  • iOS/Android 客户端 7.0.0 以下版本，navigationStyle 只在 app.json 中生效。
  • iOS/Android 客户端 6.7.2 版本开始，navigationStyle: custom 对 web-view 组件无效
  • 开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用）可方便切到旧视觉
  • Windows 客户端 3.0 及以上版本，为了给用户提供更符合桌面软件的使用体验，统一了小程序窗口的导航栏，navigationStyle: custom 不再生效

restartStrategy

基础库 2.8.0 开始支持，低版本需做兼容处理。

重新启动策略配置

可选值	含义
homePage	（默认值）如果从这个页面退出小程序，下次将从首页冷启动
homePageAndLatestPage	如果从这个页面退出小程序，下次冷启动后立刻加载这个页面，页面的参数保持不变（不可用于 tab 页）

如：

{
    
    
  "window": {
    
    
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

tabBar配置项

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置 项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性	类型	必填	默认值	描述	最低版本
color	HexColor	是		tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是		tab 的背景色，仅支持十六进制颜色
borderStyle	string	否	black	tabbar 上边框的颜色， 仅支持 black / white
list	Array	是		タブのリスト。list詳細については属性の説明を参照。少なくとも 2 つ、最大 5 つのタブ
位置	弦	いいえ	下	tabBar の位置はbottom/のみをサポートしますtop
カスタム	ブール値	いいえ	間違い	tabBar をカスタマイズ、詳細を参照	2.5.0

このうち、list は配列を受け入れ、最小 2 つ、最大 5 つのタブのみ設定できます。タブは配列の順序でソートされており、各項目はオブジェクトであり、そのプロパティ値は次のとおりです。

属性	タイプ	必要	説明する
ページパス	弦	はい	ページ パス。ページ内で最初に定義する必要があります
文章	弦	はい	タブ上のボタンのテキスト
アイコンパス	弦	いいえ	画像パス、アイコンのサイズは 40kb に制限されており、推奨サイズは 81px * 81px です。ネットワーク画像はサポートされていません。がの場合、アイコンは表示されません。positiontop
selectedIconPath	弦	いいえ	選択時の画像パス、アイコン サイズは 40kb に制限され、推奨サイズは 81px * 81px で、ネットワーク画像はサポートされていません。がの場合、アイコンは表示されません。positiontop

例

自分のページを作成する

ここでpages、以下に新しいディレクトリdemoとdemo新しいindex.wxmlファイルを作成します。

app.json他のファイルは、設定が保存されるときに自動的に生成されます。

{
    
    
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo/index"
  ],
  "window":{
    
    
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#80ff80",
    "navigationBarTitleText": "我的第一个微信小程序",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    
    
    "list": [
      {
    
    
        "pagePath": "pages/index/index",
        "text":"首页"
      },
      {
    
    
        "pagePath": "pages/logs/logs",
        "text":"日志"
      },
      {
    
    
        "pagePath": "pages/demo/index",
        "text":"设置"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

下の tabBar のテキストが中央に配置されていないことがわかりますが、これはエディタの問題であり、実機でテストするのが通常です。

実機デバッグ

開発者ツールで [リアル デバイス デバッグ] をクリックし、QR コードが読み込まれるまで待ち、携帯電話の WeChat で QR コードをスキャンします。

携帯電話の下部にあるフォントは依然として非常に優れています。

デバッグを終了する

次の章 WeChat ミニ プログラムの共通コンポーネント - コンテナ コンポーネントの表示