小規模なプログラム開発経験の要約

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>

ベストプラクティスは、以下を使用することです。最初に情報をnullに設定し、

data:{
    info:null
}

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

1.2：wx：for

wxを追加するループの場合：for-item = "item" wx：key = "item"

1.3：ブロックタグ

Wx：if、wx：for、wx：else、構文を意味するスタイルがない場合は、ブロックを使用してみてください

1.4：テンプレートコンポーネントテンプレート

共通ページモジュール/コンポーネントは、wxmlまたはインポートで直接使用できます。cssが関係している場合は、@ importをwxssにインポートする必要があります。

/**
* 方式一：直接使用
* 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

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

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

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

第二に、WXSS

2.1：背景アイコン

アプレットのバックグラウンドで使用できるのは完全なhttps画像パスのみであり、アイコンはプロジェクトで使用されます。

ベクターグラフィックスsvg：完璧なスケーラビリティを備え、調整が簡単（色、サイズなど）。
data-uri：画像ボリュームが20Kb未満の場合、base64メソッドが使用されます。フロントエンド画像最適化の導入方法の分析
大きいファイル：wxmlで直接イメージタグを使用する
外部アイコンの導入：アリババベクターライブラリー、使用してネットワークパスとローカルにダウンロードし使用する方法を。

pngローカル圧縮ツール：Tinypng

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;

参照記事：最も標準的なシステムフォント仕様font-family

2.4：rpxユニットの合理的な使用

rpxは、画面幅のパーセンテージに相当する相対単位です。これは、次の状況では推奨されません。

font-size和ボーダー幅;
翻訳変位はアニメーションに含まれます。一部のマシンでは、rpxが262.89pxなどのpxに変換されるときに小数が含まれます。WeChatは値を262pxに下げ、1pxのギャップが生じます。
QRコードなどのキャンバスの描画、画像の共有など。

三、JavaScript

3.1：二次パッケージwx.requestメソッド

promiseを使用して再パッケージする

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

onLoad：ページの読み込み。ページは1回だけ呼び出されます。ページパラメータオプションを取得できます。
onShow：ページ表示。ページが開かれるたびに1回呼び出され、バックグラウンドからフォアグラウンドに切り替わるときに1回呼び出されます。電話機は、最小化から最大化に画面のオフから表示画面に切り替わります。
onReady：ページが初めてレンダリングされます。ページは1回だけ呼び出されます。つまり、ページは準備ができており、ビューレイヤーと対話できます。
onHide：ページが背景に切り替えられたときに呼び出され、navigateToまたはtabが切り替えられます。
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：キャンバスが画像を生成する

キャンバスの複数行テキストと共有画像の生成

4.2：プラグインの使用

アプレットプラグインの使用

4.3：ページスタック制限

アプレットのページスタックは5つに制限されており、5つを超えると次のページにアクセスできません。

したがって、ページ数は注意して使用する必要があり、ナビゲーションAPIはwx.navigateTo、wx.redirectTo、wx.navigateBackと柔軟に組み合わせる必要があります。

アプレットページの5層制限の解決策

4.4：プロンプトポップアップダイアログ

コードの前でwx.hideLoadingを使用すると、次のwx.showToastが表示されなくなります。wx.showToastには、wx.showLoading（）プロンプトボックスを非表示にする機能があるためです。

5.その他

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

mpvue：vue構文仕様を使用して小さなプログラムとh5構文にコンパイル
太郎：reactに基づいて、小さなプログラム、h5、react-nativeなどに同時にコンパイルできます。

5.2：共通プラグイン

wxParse：リッチテキスト解析
wx-charts：チャートツール
wxapp-qrcode：QRコードジェネレーター