小規模なプログラム開発経験のまとめ

1. WXML

---

1.1: wx:if および wx:else

フロントエンドは情報リストを取得します。バックエンドインターフェースを介して、データが存在する場合はデータの内容が表示され、存在しない場合は見つからない情報が表示されます。 if-else がこのスイッチにブール値を使用する場合、ページは最初は false 状態で表示され、次に true に更新されます。つまり、情報が見つからないというコンテンツがフラッシュされます。理想的。

<view wx:if="{{true}}">
	<text>这是信息列表</text>
</view>
<view wx:else>
	<text>找不到信息</text>
</view>

最良の方法は、先頭で info を null に設定します、

data:{
    info:null
}

<view wx:if="{{info === 1}}">
	<text>这是信息列表</text>
</view>
<view wx:if="{{info === 0}}">
	<text>找不到信息</text>
</view>

1.2: wx:for

for ループwx:for-item="item" wx:key="item"

1.3: ブロックタグ

wx:if、wx:for、wx: を追加するには: 1.4: テンプレート コンポーネント template

は、パブリック ページ モジュール/コンポーネントであり、で直接使用できます。 wxml またはインポートされた方法。 CSS が関与する場合は、wxss の @import 経由で導入する必要があります。

/**
* 方式一：直接使用
* 1. 给template 设置name属性
* 2. 组件传过来的值可以直接使用  hidden="{{!isloading}}"
*/
<template name="loading">
  <view class="weui-loadmore" hidden="{{!isloading}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">正在加载</view>
  </view> 
</template>

/** 
* 方式二：按路役引入 
* 1. is 等同方式一的name
* 2. data="{{isloading}}" 给template的数据
*/
<import src="../template/loading.wxml"/>
<template is="loading" data="{{isloading}}"></template>

1.5: スクリプト言語 wxs

は、特に wxml ページ上で実行されるスクリプト言語です。JavaScript とは異なり、ES6 構文の使用をサポートしておらず、参照することはできませんjs.

<wxs module="wxs" src="../../utils/wxs.wxs"></wxs>

module.exports = {
	//输出百分比
	formatProgress: function (c,m) {
		return c/m*100
	}
}

2. WXSS

2.1: 背景アイコン

---

完全な背景アイコンのみが使用できます。アプレットの背景 https 画像パス、プロジェクトでのアイコンの使用方法:

Vector svg: 完璧なスケーラビリティ、調整が簡単 (色、サイズなど);

• data-uri: 画像サイズは 20Kb 未満です。base64 を使用してください。 [フロントエンドイメージの最適化導入方法の分析][segmentfault.com/a/119000001…]

• 大きなファイル：wxmlでイメージタグを直接使用

• 外部アイコンの紹介: ネットワーク パスを使用してローカルにダウンロードして使用できる Alibaba ベクター ライブラリなど。

• #2.2: スタイルのリセット

2.3: フォントファミリー標準仕様

font-family: 
/*西文：*/
-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,
/*中文：*/
PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif;

2.4: rpx 単位の合理的な使用

rpx は画面幅のパーセンテージに相当する相対単位であり、次の状況では使用しないことをお勧めします。

• ##font-size と border-width; アニメーション アニメーションにはディスプレイスメントの変換が含まれます。一部のマシンが rpx を px に変換し、262.89px などの小数が表示される場合、WeChat はその値を 262px に引き下げます。 、1pxのギャップが生じます。

• QR コードなどのキャンバス描画、写真の共有など。

• #3. JavaScript

3.1: wx.request メソッドの二次カプセル化

---

3.2: ページのライフ サイクル

onLoad: ページの読み込み中、ページは 1 回だけ呼び出されます。ページパラメータオプションを取得できます。

onShow: ページ表示。ページが開かれるたびに 1 回呼び出され、バックグラウンドからフォアグラウンドに切り替えるときに 1 回呼び出されます。携帯電話は、最小化から最大化まで、画面を表示画面に切り替えます。
onReady: ページの初期レンダリングが完了しました。ページは 1 回だけ呼び出されます。これは、ページの準備ができており、ビュー レイヤーと対話できることを意味します。
onHide: ページが背景に切り替わるとき、navigateTo、またはタブが切り替わるときに呼び出されます。

• #onUnload: ページのアンロード。ページが閉じられている場合、またはメモリが不足している場合に、ページを積極的に破棄します。
3.3: 新しい日付の互換性

• Android は
new Date("2018-05-30 00:00:00 " )

形式ですが、IOS は

2018/05/30 00:00:00 形式のみを認識します。ダッシュはスラッシュに置き換える必要があります。 var iosDate= date.replace(/-/g, '/')。

#3.4: バブルイベントbindtap: イベント バインディングはバブル イベントのバブルアップを妨げません

catchtap: イベント バインディングにより、バブリング イベントが上方にバブリングするのを防ぐことができます

• 4. ミニ プログラム関数

• # 4.1: Canvas による画像の生成

4.2: プラグインの使用

---

#4.3: ページスタックの制限

ミニ プログラムのページ スタックの最新バージョンは 10 に制限されています。10 を超えると、次のページに入ることができません。

したがって、ページ数は注意して使用する必要があり、ナビゲーション API は wx.navigateTo、wx.redirectTo、および wx.navigateBack

4.4 と柔軟に組み合わせる必要があります。プロンプト ポップアップ ウィンドウ Dialog

コードの前で wx.hideLoading を使用すると、後で wx.showToast が表示されなくなります。なぜなら、wx.showToastにはwx.showLoading()プロンプトボックスを非表示にする機能があるからです。

#5. その他

• 5.1: メインストリーム フレームワーク

mpvue: vue 構文仕様を使用して小さなプログラムと h5 構文にコンパイルします

---

Taro: React をベースに、小さなプログラム、h5、react-native などにコンパイルできます。同時に。

#5.2: 一般的に使用されるプラグイン

wxParse: リッチ テキスト解析

• # #wx-charts: チャート ツール

wxapp-qrcode: QR コード ジェネレーター

• 推奨チュートリアル: 「

  WeChat アプレット」

  >>

以上が小規模なプログラム開発経験のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。