WeChat アプレット
ラベル
<view></view> // div
<scroll-view scroll-x></scroll-view> // 可滑动的视图标签
// scroll-x里面元素的滑动方向
<image></image> // img
<input type="text" ></input> // input
app.json ファイル
app.json は現在のアプレットで全局配置あり、アプレットのすべてのページ パス、ウィンドウの外観、インターフェイスのパフォーマンス、下部のタブなどが含まれます。
プロジェクト内の app.json 構成
①pages現在のアプレットのすべてのページのパスを記録するために使用されます。
デフォルトでは、内部のパスが最初のパスになり、ホームページになります。
② window: アプレットのすべてのページの背景色、テキスト色などをグローバルに定義します。
③ style: アプレットコンポーネントが使用するスタイルバージョンをグローバルに定義
④ sitemapLocation: sitemap.json の場所を示すために使用されます。
WXMLとは
WXML (WeXin Markup Language) は、一連の小さなプログラム フレームワーク設計であり标签语言，用来构建小程序页面的结构、その機能は Web 開発における HTML に似ています。
WXMLとHTMLの違い
①レーベル名が違う
HTML (div,span,img,a)
WXML(ビュー、テキスト、画像、ナビゲーター)
② 異なる属性ノード
<a href="#">超链接</a>
<navigator url=""></navigator>
③ Vueと同様のテンプレート構文を提供します。
データバインディング、リストレンダリング、条件付きレンダリング
WXSSとCSSの違い
①rpx寸法単位を追加
cssではremなどのピクセル単位の変換を手動で行う必要があります
WXSS は最下層で新しいサイズ単位 rpx をサポートし、アプレットは異なるサイズの画面上でそれを自動的に変換します。
②グローバルスタイルとローカルスタイルを提供
プロジェクトのルート ディレクトリにある app.wxss は、すべてのアプレット ページで動作します
部分ページの .wxss スタイルは、現在のページでのみ有効です
③ WXSS は一部の CSS セレクターのみをサポートします
.class と #ids
要素
ユニオンセレクター、子孫セレクター
::after や ::before などの疑似クラス セレクター
applet.js ファイルの分類
アプレットの js ファイルは、次の 3 つのカテゴリに分類されます。
①app.js
はい整个小程序项目的入口文件、App()函数アプレット全体は次によって開始されます
②ページの.jsファイル
はい页面的入口文件、呼び出してPage()函数ページを作成して実行します
③ 通常の.jsファイル
はい普通的功能模块文件、公共的函数或属性ページで使用するためにラップするために使用されます
コンポーネント
アプレットコンポーネントの分類
アプレット内のコンポーネントもホスト環境によって提供されます
①ビューコンテナ、②基本コンテンツ、③フォームコンポーネント、④ナビゲーションコンポーネント、⑤メディアコンポーネント、⑥マップコンポーネント、⑦キャンバスコンポーネント、⑧開発力、⑨バリアフリーアクセス
よく使用されるビュー コンテナ クラスのコンポーネント
1、見る
① 通常の表示領域。
② HTML の div と同様、ブロックレベルの要素です。
③ ページのレイアウト効果を実現するためによく使用されます
2、スクロールビュー
① スクロール可能なビューエリア;
② スクロールリスト効果を実現するためによく使用されます
3、スワイパー 和 スワイパーアイテム
①カルーセルコンテナコンポーネントとカルーセルアイテムコンポーネント
| 属性 | タイプ | デフォルト | 説明する |
|---|---|---|---|
| インジケータードット | ブール値 | 間違い | パネルインジケーターポイントを表示するかどうか |
| インジケーターの色 | 色 | rgba(0,0,0,.3) | キューポイントの色 |
| アクティブカラーを示す | 色 | #000000 | 現在選択されているキューポイントの色 |
| 自動再生 | ブール値 | 間違い | 自動で切り替えるかどうか |
| 間隔 | 番号 | 5000 | 自動切り替え時間間隔 |
| 円形 | ブール値 | 間違い | ジョイントスライディングを使用するかどうか |
よく使用される基本的なコンテンツ コンポーネント
1、テキスト
①テキストコンポーネント
②HTMLのspanタグと同様のインライン要素です
コピーエフェクトを長押ししてテキストタグのselectable属性を使用します
```
2、リッチテキスト
①リッチテキストzujian
② HTML文字列のWXML構造へのレンダリングをサポート
リッチテキストコンポーネントのnodes属性ノード。HTML文字列を対応する UI 構造としてレンダリングします。
<rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>
その他の一般的なコンポーネント
1、ボタン
①ボタンコンポーネント
②HTMLのボタンボタンよりも機能が豊富です
③WeChatが提供する各種機能（カスタマーサービス、転送、ユーザー認証取得、ユーザー情報取得等）をopen-type属性を通じて呼び出すことが可能
| 属性 | 属性値 |
|---|---|
| タイプ（ボタンタイプ） | main (メインカラーボタン)、warn (警告ボタン) |
| サイズ（ボタンのサイズ） | mini（小さいサイズのボタン） |
| 無地（中空ボタン） | 真実 |
2、イメージ
①画像コンポーネント
②画像コンポーネントのデフォルトの幅は約300px、高さは約240pxです
| モード値 | 説明する |
|---|---|
| スケールして塗りつぶす | (デフォルト) スケーリング モード、不保持纵横比缩放图片画像の幅と高さが完全に引き伸ばされるようにする填满image元素 |
| アスペクトフィット | スケーリングモード、保持纵横比缩放图片，使图片的长边能完全显示出来。つまり、全体像が表示されます |
| アスペクトフィル | スケーリングモード、保持纵横比缩放图片，只保证图片的短边能完全显示出来。つまり、通常、画像は水平方向または垂直方向でのみ完成し、他の方向で傍受が発生します。 |
| 幅固定 | スケーリング モード、 は宽度不变，高度自动变化、元の画像のアスペクト比を変更せずに維持します。 |
| 高さ修正 | スケーリング モード、 は高度不变，宽度自动变化、元の画像のアスペクト比を変更せずに維持します。 |
3、ナビゲーター
① ページナビゲーションコンポーネント
② HTMLのリンクに似たもの
ミニプログラムホスティング環境-API
ミニプログラム API の 3 つのカテゴリ
1.イベント監視
①特徴：onから始める监听某些事件的触发
例: ウィンドウ サイズ変更イベントのリッスン
wx.onWindowResize(function callback);
2.同期API
特徴:
①Syncで終わる API は同期 API です
②同期APIの実行結果は関数の戻り値から直接取得でき、実行エラーが発生した場合は例外がスローされます。
例: コンテンツをローカル ストレージに書き込む
wx.setStorageSync("key","value");
3.非同期 API
特徴: jQuery の関数と同様に$.ajax(options)、成功、失敗、完了を通じて呼び出しの結果を受け取る必要があります。
例: ネットワークリクエストを送信し、成功コールバック関数を介してデータを受信する
wx.request()
データキャッシュストレージ
特徴：
①ローカルキャッシュで指定されたキーにデータを保存します。
②ライフサイクルはアプレット自体と一致していますが、ユーザーが積極的に削除するか、一定期間後に自動的に消去されない限り、データは常に存在します。
③データ保存制限は10MBです
同期と非同期の違い:
①同期メソッドは、同期メソッドが戻るまで現在のタスクをブロックします。
②非同期メソッドは現在のタスクをブロックしません
データを保存する
非同期:wx.setStorage()
同期:wx.setStorageSync()
データを取得する
特徴：
非同期:wx.getStorage()
同期します。wx.getStorageSync()
キャッシュを空にしてください
非同期:wx.clearStorage()
同期:wx.clearStorageSync()
指定したキャッシュを削除する
非同期:wx.removeStorage()
同期:wx.removeStorageSync()
ライフサイクル機能
アプレットの 7 つのライフサイクル機能:
1. onLoad ページの読み込みを監視する onLoad 関数: ページは 1 回だけ呼び出され、現在のページによって呼び出されたクエリ パラメータは onLoad で取得できます。例: onLoad:function(options){}
2. onReady は、ページの最初のレンダリングが完了すると onReady 関数を監視します。ページは 1 回だけ呼び出され、ページが準備され、ビュー レイヤと対話できることを示します。例: onReady:function(){}
3. onShow 監視ページには onShow 関数が表示されます。この関数はページが開かれるたびに 1 回呼び出されます。例: onShow:function(){}
4. OnHide モニター ページは、onHide 関数を非表示にします。この関数は、navigateTo または下部のタブが切り替わったときに呼び出されます。例: onHide:function(){}
5. onUnload モニター ページのロード onUnload 関数: redirectTo または navigateBack のときに呼び出されます。例: onUnload:function(){}
6. onlaunch モニター アプレットの初期化 onlaunch 関数: アプレットが初期化されると、onLaunch がトリガーされます (グローバルに 1 回のみ) 例: onLaunch:function () {},
7. onError エラー監視関数 onError: アプレットでスクリプトエラーが発生した場合、または API 呼び出しが失敗した場合、エラー情報とともに onError がトリガーされます 例: onError:function () {}
WXML テンプレートの構文
条件付きレンダリング
1.wx:if
wx:id="{
{condition}}"コードをレンダリングする必要があるかどうかを判断するために使用します
<view wx:if="{
{condition}}">true</view>
wx:elifと を使用してwx:elseelse判定を追加することもできます
<view wx:if="{
{type === 1 }}">男</view>
<view wx:if="{
{type === 2 }}">女</view>
<view wx:else>保密</view>
2. wx:ifを組み合わせて使用する
必要に応じて一次性控制多个组件展示与隐藏、<block></block>タグを使用して複数のコンポーネントをラップし、そのタグで wx:if コントロール属性を使用できます。
3.隠された
アプレットでは、次のように直接使用しますhidden="{
{condition}}"也能控制元素的显示与隐藏。
<view hidden="{
{condition}}">条件为true隐藏，条件为false显示</view>
4.wx: if と hidden のコントラスト
違う走りをする
① wx:if は动态创建和移除元素要素の表示と非表示を制御するために使用されます。
② hidden は切换样式メソッド (display:none/block;) を使用して要素の表示と非表示を制御します。
使用
①の場合は频繁切换hiddenを使用することをお勧めします
② 控制条件复杂、表示と非表示を切り替えるには、wx:elif、wx:elseと一緒にwx:ifを使用することをお勧めします
リストのレンダリング
1.wx:用
wx:for を通じて、指定された配列に従って繰り返しコンポーネント構造をループでレンダリングできます。
<view wx:for="{
{arr}}">
索引是：{
{index}}当前项是：{
{item}}
</view>
2. 現在の項目のインデックスと変数名を指定します
①wx:for-index指定可能な当前循环项的索引変数名を使用する
②wx:for-item指定可能な当前项変数名を使用する
<view wx:for="{
{arr}}" wx:for-index="i" wx:for-item="temp">
索引是：{
{i}} 当前项是：{
{temp}}
</view>
3. wx:keyの使用
Vue リスト レンダリングと同様に:key、アプレットがリスト レンダリングを実装するときに、レンダリングされたリスト項目に一意のキー値を指定することもお勧めします提高渲染的效率。
// data 数据
data:{
list:[
{
id:1,name:'张三'
},
{
id:2,name:'王五'
},
{
id:3,name:'李四'
}
]
}
// wxml结构
<view wx:for="{
{list}}" wx:key="id">{
{item.name}}</>