ミニプログラムの開発仕様についてどれくらい知っていますか?

小規模プログラム開発仕様:

(学習ビデオ共有: プログラミングビデオ)

1. ディレクトリの概要

コンポーネント ファイル

コンポーネント関連のファイルはすべてコンポーネント ディレクトリに配置されます。

イメージ ファイル

プロジェクト イメージ ファイルはルート ディレクトリのイメージ フォルダーに配置され、コンポーネントの一意のイメージは現在のコンポーネント イメージ ディレクトリに配置されます

モデル ファイル

モデル ファイルは主に、さまざまなビジネス モデルを記述するために使用されます。プロジェクト モデル ファイルはルート ディレクトリの models フォルダーに配置され、コンポーネント関連のモデルはコンポーネント ディレクトリの models フォルダーに配置されます。

動作ファイル

動作ファイルは、参照されるコンポーネントのディレクトリに配置されます。

WXML 仕様

1. WXML 仕様

wxml タグが単独で出現できる場合は、<input /> のように単独で出現するようにしてください。

<input />

HTML の各行のコード数を 50 文字以内に制御して、読みやすく閲覧しやすくします。冗長なコードは改行され、タグの属性は改行されます。

<v-music
wx:if="{{classic.type===200}}"
img="{{classic.img}}"
content="{{classic.content}}"
>
</v-music>

分割されたコンテンツを適切に表示し、インライン スタイルを使用しないでください。

//推荐使用
<image class="tag"></image>

2. コメント仕様

コンポーネントを除き、他のブロックレベル要素はその関数をコメントアウトし、他のコードと区別するためにその上下に行を残す必要があります。

<view>...</view>
//导航栏
<view>...</view>
<view>...</view>

CSS 仕様

1. CSS 仕様

開発プロセスでは、rpx と px の両方が使用される場合があります。たとえば、通常、rpx は間隔、フォント サイズ、および文字サイズに使用されます。 pxを使用して、開発者が実際の状況に応じて決定します。

width: 100rpx;
font-size: 14px;

CSS コードには、明確なコード インデントが必要です。各スタイル クラスの間には 1 行を空白のままにしておきます。

.v-tag{
width: 100%;
}
.v-container{
width: 100%;
}

乱雑にならないように、省略した属性を使用し、同じ属性をまとめて配置するようにしてください。

/**使用简写属性**/
.v-image{
margin: 0 auto;
}
/**同一属性放在一块**/
.v-tag{
margin-left: 10rpx;
margin-right: 10rpx
}

レイアウトには flex を使用し、float とvertical-align は禁止します。

.container{
disaplay: flex;
flex-dirextion: row
}

2. コメント仕様

wxss ルールのグループ間でブロック コメントを使用します。コードの直後にコメントしないでください。

/** 修改button默认的点击态样式类**/
.button-hover {
background-color: red;
}

JS 仕様

1. JS 仕様

ネーミング仕様

変数名と関数名は一律にキャメルケースのネーミングを使用します。名前が接頭辞として付けられる 関数の機能を示すために明確な動詞を追加する必要があり、プライベート関数またはプロパティはアンダースコアで始めることによって示す必要があります。定数は const で宣言する必要があります。

クラス名の最初の文字は大文字にする必要があります。

ES6 キーワード let を使用して変数を定義し、var は使用しないでください

//定义常量
const a = 1
//定义变量
let imageContent =  res.data
//函数命名
getInfo:function(){
return '';
}
//私有函数
_getInfo:function(){
return '';
}

コールバック関数の仕様

コールバック関数は、Promise 関数とパラメーターを使用して均一に記述されます。成功したコールバックの場合、統合されるのは res で、エラー パラメータは err です。

// promise 处理回调
let back = new Promise((resolve, reject) => {
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
back.then((res) => {
console.log('成功回调！', res);
}).catch((err) => {
console.log('失败回调！', error);
});

プライベート関数とコールバック関数はライフサイクル関数の後に配置されます。

js ファイル内の未使用のライフサイクル関数を削除して、コードをクリーンな状態に保ちます。

Pages({
data:{
},
onLoad:function(event){
},
_self:function(){
}
})

構造体は各関数の間に空白行を入れて区切ります。

データ バインディング変数の定義仕様

データ バインディングに関係するすべての変数はデータ内で初期化する必要があります。 setData を定義せずに直接 setData することは禁止されています。

Pages({
data:{
id : null
},
onLoad:function(event){
let id = event.target.dataset.id
this.data.id = id
}
})

クリックイベント仕様

クリックイベント関数の命名方法はイベント名または事業名となります。

onLike: function(event){
}

コンポーネント仕様

コンポーネント名の命名仕様

コンポーネントを使用する場合、コンポーネント名は「v-」で始まります。単語名 「－」接続で形成されます。コンポーネント タグがページ ページで使用される場合は、単一の閉じたタグを使用することをお勧めします (この制約は、スロットを含むコンポーネントには無効です)

<v-movies />

トリガー イベント仕様

コンポーネント クリックすることをお勧めします。トリガー イベントはコロンで区切ります。

自動検出

<v-component-tag-name bind:myevent="onMyEvent" />

externalClasses 命名規則

命名形式は次の形式を採用します: v-class-{name}、名前は定義可能自分で

v-class-icon

コンポーネント スタイルの仕様

チームが作成したすべてのコンポーネント スタイルはクラスで記述する必要があり、名前は v- で始まる必要があります。インライン スタイルと ID スタイルは許可されません

.v-container{
disaplay: flex;
flex-dirextion: row
}

句読点の指定

JS ステートメントはセミコロンで終わる必要はなく、セミコロンは常に省略されます。

JS では、バックティック `` または一重引用符 ' ' が常に使用されます、二重引用符は使用されません。

WXML、CSS、および JSON では二重引用符を使用する必要があります。

CSS 属性のコロンはスペースで区切られます。

一貫したインデントを実行します (スペース 4 個)

一貫した改行スタイルを実行します ('unix')、

関連する推奨事項: 小さなプログラム開発チュートリアル

以上がミニプログラムの開発仕様についてどれくらい知っていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。