项目文件构成
はじめに：
ミニプログラムには、プログラム全体を説明するアプリと、それぞれのページを説明する複数のページが含まれています。
小さなプログラムの主要部分は3つのファイル（app.js、app.json、app.wxssファイル）で構成され、プロジェクトのルートディレクトリに配置する必要があります。
小さなプログラムページは4つのファイル（jsページロジックファイル、wxmlページ構造ファイル）で構成されます。 、jsonページ構成、wxssスタイルファイル）構成
WeChatミニプログラムプロジェクトが正常に作成されると、次のフォルダ
が生成されます。このプロジェクトではさまざまなタイプのファイルが生成されます。
.json接尾辞JSON構成ファイル.wxmlhtmlファイルと同様のサフィックス付きWXMLテンプレートファイル.wxsscssファイルと同様のサフィックスWXSSスタイルファイル.js接尾辞付きJSスクリプトロジックファイル
次に、これら4つのファイルの機能を見てみましょう。
1. JSON 配置
JSONこれは、データ形式ではなく、プログラミング言語である。それはJSON果たしている静态配置役割を小さなプログラムで。
これは、プロジェクトのルートディレクトリで見ることができるapp.jsonとproject.config.json。
アップルト構成app.json
app.jsonは、現在のアップルトのグローバル構成であり、アップルトのすべてのページパス、インターフェイスパフォーマンス、ネットワークタイムアウト、下部タブなどが含まれます。app.json次のように構成で作成されたテンプレート：
pagesフィールド-現在のミニプログラムのすべてのページのパスを説明するために使用されます。これは、ミニプログラムページが現在定義されているディレクトリをWeChatクライアントに通知するためのものです。
windowフィールド-ミニプログラムのすべてのページの上部の背景色、テキストの色の定義などを定義します。
ページレイアウト：
各小さなページプログラムは、.jsonファイルと同じ名前を使用して、このページのウィンドウパフォーマンスを構成することもできます。ページ構成項目はapp.json、window同じ構成項目でカバーされます。
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "云开发 QuickStart",
"navigationBarTextStyle": "black"
}
ツール構成project.config.json
通常、ツールを使用する場合は、インターフェイスの色やコンパイル構成など、独自の設定に応じてパーソナライズされた構成を行います。別のコンピューターに変更してツールを再インストールする場合は、ツールを再構成する必要があります。
これを念頭に置いて、Mini Program Developer Toolは、各プロジェクトのルートディレクトリに1つ生成しproject.config.jsonます。ツールで行った構成はすべて、このファイルに書き込まれます。ツールを再インストールするか、コンピューターを動作するように変更する場合は、ダウンロードするだけで済みます。同じプロジェクトのコードパッケージを入力すると、開発者ツールは、エディターの色、コードのアップロード時の自動圧縮などの一連のオプションを含め、その時点でプロジェクトを開発したときに、パーソナライズされた構成に自動的に復元します。
ページ構成page.json
ページの下にpage.json実際に表現するために使用されるpages/logsディレクトリlogs.json構成の関連これらのページとアプレットのを。
アップルレット全体のスタイルが青の場合、app.jsonで一番上の色を青として宣言できます。ただし、アップルトの各ページが異なる機能モジュールを区別するために異なる色調を持っている場合、これはpage.jsonの役割であり、開発者はトップカラーなどの各ページのいくつかのプロパティを個別に定義できます。プルダウンリフレッシュなどを許可するかどうか。
2. WXML 模板
フロントエンドWebページは、HTML + CSS + JSを介して静的ページを形成します。ここで、HTMLは現在のページの構造を記述するために使用され、CSSはページのスタイルを記述するために使用され、JSは通常このページとユーザー間の対話を処理するために使用されます。
小さなプログラムでは、WXMLはHTMLと同様の役割を果たします。次のようにプロジェクトテンプレートは、次のとおりです。これは<view></view>似ていますhtmlで<div></div>
<view class="container">
<view class="userinfo">
<button wx:if="{
{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
<block wx:else>
<image src="{
{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{
{
userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{
{
motto}}</text>
</view>
</view>
上記のように、違いについて話しましょう：
标签名字有点不一样
一般的に使用されるコンポーネントを梱包すると、開発効率が大幅に向上します。AppletがWXML使用するタグはview、buttonなどですtext。これらのラベルは、開発者向けの小さなプログラムであり、基本的な機能が満載です。小さなマイクロチャネルの公式プログラムは、マップ、ビデオ、オーディオなどのアセンブリ容量も提供します。
遵循Vue语法
wx：ifなどの属性や、使用される開発モデル{ {}}などの式がありますMVVM（レンダリングとロジックの分離を提唱するReact、Vueなど。JSにDOMを直接制御させないでください。JSは、状態を管理するだけで済みます。はい。次に、テンプレート構文を使用して、状態とインターフェイス構造の関係を記述します。
インターフェイスにHelloWorld文字列を表示する必要がある場合は、アップルトのフレームワークでもこのアイデアを使用します。
WXMLは次のように記述されています。
<text>{
{
msg}}</text>
JSは状態を管理するだけで済みます。
this.setData({
msg: "Hello World" })
{
{}}の構文を使用して 変数をインターフェイスにバインドすることを、データバインドと呼びます。状態とインターフェイスのニーズとの関係を完全に説明するだけでは、データバインディングだけでは不十分ですif/else。forたとえば、内部の小さなプログラムで、これらの制御機能を使用wx:してプロパティの開始を表現します。
3. WXSS 样式
WeChatアプリレットにWXSSはCSSほとんどの特徴があり、WXSSでもアプリレットが拡張および変更されています。
- 寸法単位を追加しました。
CSSスタイルを作成する場合、開発者はモバイルデバイスの画面の幅とデバイスのピクセル比が異なることを考慮し、いくつかの手法を使用していくつかのピクセル単位を変換する必要があります。WXSSは最下層で新しいサイズ単位をサポートしますrpx。開発者は変換の問題を回避し、変換を小さなプログラムの最下層に任せることができます。変換で使用される浮動小数点計算のため、計算結果は期待される結果と少し異なります。
- グローバルスタイルとローカルスタイルを提供します。
そしてフロントapp.json、page.json同じコンセプトでapp.wxss、グローバルスタイルとして書くことができます。それは現在のアプリレットのすべてのページに作用し、部分的なページスタイルpage.wxssは現在のページのみを有効にします。
- WXSSは一部のCSSセレクターのみをサポートします
詳細なドキュメントについては、WXSSを参照してください。
4. JS 逻辑交互
サービスがインターフェイスを表示するだけでは不十分であり、ユーザーとの対話（ユーザーのクリックへの応答、ユーザーの場所の取得など）も必要です。アップルトでは、JSスクリプトファイルを記述してユーザー操作を処理します。
<view>{
{
msg }}</view>
<button bindtap="clickMe">点击我</button>
ボタンボタンをクリックします。画面msg表示を表示したい"Hello World"ので、ボタンのプロパティを宣言します。クリック操作に応答して、: bindtapdeclaresclickMeメソッド内のJSファイルで次のようにします。
Page({
clickMe: function() {
this.setData({
msg: "Hello World" })
}
})
また、我々はまた、簡単なように、マイクロチャネルを提供する能力から転送できるAPIが提供するJS豊富なAPIアプレットに呼び出すことができ获取用户信息、本地存储、微信支付というように。クイックスタートの例の前でpages/index/index.jsは、wx.getUserInfo取得したユーザーの頭とマイクロレターのニックネームと呼ばれ、最後setDataに取得した情報によって画面に表示されます。WeChatミニプログラムAPIの詳細
この記事は公式ウェブサイトから参照されています：https：//developers.weixin.qq.com/miniprogram/dev/framework/structure.html
プログラミング言語を学ぶ人は、公式の言語よりも自分の言語をよく知っています。学ぶための最良の方法は、公式のドキュメントを確認することです。