WeChatミニプログラムクライミング日記

新会社は小さなプログラムから始めます。
エントリーから現在まで30日もあきらめていません。。。

ミニ番組はほぼ一年前に公開されましたが、ピットに登った兄弟のほとんどがピットに足を踏み入れました。そして、私は「Hello World」の学習段階で立ち往生しています。
まず、プロジェクトはなく、プロジェクトだけが実践的な学習の基礎です。次に
、出てきたばかりで、常に多くの落とし穴があります。クライミングはいつも苦痛で幸せです。

言い訳がいくつあっても、製品プロジェクトはテーブルで降伏する必要があります。
袖をカウンセリングしないでください。

WeChat Miniプログラム

新しいアプレット

WeChatは、すぐに使える、すぐに使えるユーザーエクスペリエンスを実現したい小さなプログラムを起動します。APPのダウンロードとインストールの面倒なプロセスを排除します。GoogleのPWAのように聞こえますが、PWAが中国で普及するまでにはしばらくかかります。WeChatユーザーグループの支援により、アプレットの埋め込みコストは低く、ユーザーは簡単に受け入れることができます。

アプレットのコードスタイルは、実際にはVueに非常によく似ていますが、Vue開発モデルに慣れている学生にとって、使い始めにそれほど問題はありません。

アプレットは、Vue、Angular、React、jQueryなどのメインストリームのフロントエンドフレームワークをサポートしていません。また、アプレットには独自のビューコンテナー（Dom）書き込みのセットがあり、これは、Webで作成する通常のHTMLとは異なります。しかし、CSS3はそれほど変わっていません。ファイル名は（.wxss）に変更されましたが

このプロジェクトでは、パッケージ化ツールとしてwebpackを使用し、コードをコンパイルして小さなプログラムに準拠するコードカタログ仕様にし、wechat-mina-loaderプラグインを使用しています。実際の開発は、Vueでの開発習慣と同じです。
BabelはES6からES5への変換、sassのコンパイル、圧縮、変換などをすべてwebpackに入れました。

dom操作をサポートしていません

ウィンドウやドキュメントオブジェクトはアプレットスクリプトでは使用できないため、domを操作することはできません。ノードを操作したい場合は、wx.createSelectorQuery()

さらに、データ駆動型開発モデルはVueと同じですが、記述が変更されています（vue：v-if、アプレット：wx：if）。

rpxレイアウト

rpx（応答ピクセル）：画面の幅に応じて調整できます。画面幅は750rpxです。たとえば、iPhone6では、画面の幅は375ピクセルで、物理ピクセルは750です。750rpx= 375px = 750物理ピクセルと1rpx = 0.5px = 1物理ピクセルです。

設計者はデザインドラフトのベースとしてiPhone6を使用できます。基本的に、pxをrpxに置き換えることができます。ただし、フォームやプロンプトページによっては、デザインドラフトでrpxを使用すると、小さな画面の携帯電話が小さく見えるようになります。プロンプトページは達成するためにpxを使用するにはweuiを参照してください

ルーティング階層

wx.navigateTo(OBJECT)

現在のページを保持し、アプリケーションのページにジャンプし、wx.navigateBackを使用して元のページに戻ります

wx.redirctTo(OBJECT)

現在のページを閉じて、アプリ内のページにジャンプします

wx.switchTab(OBJECT)

tabBarページにジャンプし、他のすべての非tabBarページを閉じます

wx.reLaunch(OBJECT)

すべてのページを閉じて、アプリのページを開きます

アプレットは同時に5ページしか開くことができません。5ページを開くと、wx.navigateToは通常、新しいページを開くことができません。複数レベルの対話を回避するか、wx.redirctToを使用してリダイレクトしてください

tabBar下部ナビゲーションバー

tabBarは配列です。最小2つ、最大5つのタブ配列を順番に並べ替えます

ページを上にスクロール

基本ライブラリ1.4.0のサポート

wx.pageScrollTo({
  scrollTop: 0   //滚动到页面的目标位置（单位px）
})

CSSの画像リソース、背景画像

CSSは、（開発ディレクトリ内の）ローカルリソースの画像を背景画像として使用できません。ネットワークイメージリソース、base64、またはイメージタグを使用できます。TabBarアイコンリソースはローカルリソースを使用できます

unionidとopenidの違い

各ユーザーは各アプレットに一意のopenidを持っています。ユーザー情報を複数のパブリックアカウントとアプレットで共有してユーザーを一律に識別したい場合は、unionidを使用する必要があります。uniondを取得するには、WeChatオープンプラットフォームを登録する必要があり、バインドする小さなプログラムとパブリックアカウントをバインドする必要があります（10以下、3番目の起動プラットフォームと呼ばれる認定を申請する必要があります）。

ページのスクロールにおけるテキストエリアのバグ

Textarea、map、その他のコンポーネントはクライアントによって作成されたネイティブコンポーネントであり、そのレベルは最高です。配置要素に遭遇した場合。常に上に、それをカバーすることはできません。

スクロールビュー、スワイパー、ピッカービュー、可動ビューでテキストエリアコンポーネントを使用しないでください
CSSアニメーションはテキストエリアでは無効です

プロジェクトのシナリオ：ボタン（位置：固定）はページの下部に固定されています。ページがスクロールすると、テキストエリアは常にボタン上にあります。ボタンをクリックしてテキストエリアをクリックします

ネットワーク要求のタイムアウトを設定できます

app.jsの設定

"networkTimeout": {
  "request": 10000 // 10秒
}

ウィンドウ構成

navigationBarTextStyleナビゲーションバーのタイトル色は黒/白の
ステータスバーのみをサポートし、ナビゲーションバー、タイトル、ウィンドウの背景色は無地の色をサポートし、グラデーション色はサポートしません

パラメータの問題

以下のようなURLパラメータを追加、url?a=1&b=2、onLoad(options) options.query.a, options.query.b利用可能に
アプレットコードをページにスキャンします。アプレットコードのURLのパラメーターを取得する場合は、options.sceneを介して取得できますが、QRコードのdecodeURIComponent（options.scene）でシーン値を変換する必要があります。開発ツールの条件付きコンパイルは、シミュレーション用にカスタムパラメータscene = xxxxをコンパイルします。開発ツールのシミュレーション中のシーンのパラメーター値は、urlencodeである必要があります（起動パラメーター：scene = n％3D1001）実際のシーン= n = 1001、パラメーターn = 1001

画像タグ画像

画像のデフォルトの幅：300px、高さ：225px、lazy-loadはページとスクロールビューの下の画像にのみ有効です。
モードズームモード、mode = "widthFix"がより一般的に使用されます（幅は変更されず、高さは自動的に変更され、元の画像の幅は維持されます）（高比率は変わらない）

アプレットを閉じた後、アプレットを監視できますが、ブロックできません

シナリオ：アプレットが終了したときにプロンプトボックスをポップアップして閉じられないようにしたい（一時的に達成できない）

アプレットコード

アプレットコード（ひまわりコード）にはいくつかの方法があり、アプレットがリリースされた後にのみ、アプレットコードを正常に表示できます。

アプレットの最初の提出のレビュー時間は、後者よりも長い

最初の提出レビューは通常1日から2日です。そのため、予定どおりにオンラインに接続できるようにするには、最初のレビューリリースの後で、最初に一時バージョン（プロンプトページを配置できます）に移動することをお勧めします。毎日のレビュー、2-3時間で十分です。

頻繁なsetDataはパフォーマンスの問題を引き起こします

頻繁なsetData操作は、ストール、深刻なフィードバックの遅延を引き起こし、さらにはクラッシュする可能性があります。

シナリオ：最初はデジタルアニメーションにcountUpを使用する予定でしたが、原則はデジタル値を頻繁に変更し、setData操作を行い、テンプレートにレンダリングすることです。

ES6からES5、アプレットがディレクトリ内のjsファイルを検出する（ごくわずか）

このプロジェクトでは、webpackを使用してES6をES5に変換したため、WeChatアプレットのES6からES5への機能がオフになりました。このピットはより隠されています。テスト中に、5Sの実際のマシンでjsエラーが報告されました。js（ES5ではなくES6が使用されました）ファイルが使用されていないことがわかりました。WeChatアプレットは、ディレクトリ内のjsファイルを検出します。 WeChatはES6からES5に付属しており、ディレクトリ内のjsファイルがES5と互換性がないことを検出し、エラーを報告します。このバグは5Sの実際のマシンでのみ発生し、5Cは正常です。WeChat開発ツールでES6からES5をオンにすると、自動的に変換作業が完了し、同様の問題が発生しなくなります。

小規模なプログラム開発のために一般的に使用されるいくつかのサードパーティライブラリを共有する

weui-wxss（アプレットバージョンのweuiスタイルライブラリ）Github：https : //github.com/Tencent/weui-wxss
wepy（小さなプログラムコンポーネント化フレームワーク）Github：https : //github.com/Tencent/wepy
skyvow / vux（小さなプログラムコンポーネントライブラリ）Github：https : //github.com/skyvow/wux
xiaolin3303 / wx-charts（小さなプログラムアイコン）Github：https : //github.com/xiaolin3303/wx-charts

著者：との交流
紙原稿、その歓迎過度な場所。出典を明記してください。