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 " )
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 サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

WebStorm Mac版
便利なJavaScript開発ツール

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
