微信の小さいプログラムの開発の少しの心得

1.スタイルの問題

主に微信ウィジェットと以前のweb開発で一致しなかった要素について話します.

1.1 buttonボタン

カスタム転送機能を実装する必要がある場合がありますが、button要素のスタイルを再設定すると、buttonのスタイルをどのように設定しても枠が取れないことに気づくかもしれません.あとでafterの偽要素だった理由がわかりました(ブラウザなら開発者ツールで直接見られる偽要素があれば、ウィジェットではだめだと思いますが、これはちょっと穴が開いていると思います).
ソリューション:

.btn::after{
  border:none;
}

ちなみに、WeChatウィジェットbuttonのデフォルトスタイルを列挙します.

button {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    line-height: 2.55555556;
    border-radius: 5px;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    color: #000000;
    background-color: #F8F8F8;
}

デフォルトの行の高さ、padding、marginのいくつかの属性はやはり注意しなければなりません.

1.2イメージ画像

ウィジェットのimage要素にはmode属性があり、ピクチャのトリミング、スケールのモードを設定し、imageコンポーネントのデフォルト幅300 px、高さ225 pxがあります.すなわち、modeプロパティを設定せずにwidthの値だけを設定すると、画像の高さは適応ではなく225 pxであるため、画像は変形するに違いない.
2つのソリューションを提供します.

mode属性

を設定する.

// mode   13  ，  4  ，9  。
//  ：
// widthFix  ， ， 
//  mode="widthFix" width ， 

// wxml
"widthFix"
    class="info--head"
    src="{{src}}">
// wxss
.info--head {
    width: 750rpx;
}

modeプロパティを設定せず、widthやheightを設定して画像の幅を固定したり、変形しすぎたりすることはありません.主にマルチキャスト図やリストページのサムネイルなどに適していると思います.

1.3 fixed位置決め

position: fixed;を設定する要素はscroll-view要素には存在しません.最外層であることが望ましいです.そうしないとiosシステムで様々な問題が発生します.

2.ライフサイクル

2.1ホームフェースに入る->サブページに入る->ホームフェースに戻る

ライフサイクルは、ホームフェースonLoad->ホームフェースonShow->ホームフェースonReady->サブページonLoad->サブページonShow->サブページonReady->サブページonUnload->ホームフェースonShowの順です.
このプロセスでサブページのonHideはトリガーされないことがわかります.

2.2 tabページ間の切り替え

前のtabページonHide->現在のtabページonShow.
1と2の間、tabページはonUnloadイベントをトリガーしないことがわかります.

2.3 onHideトリガタイミング

ページがバックグラウンドに非表示/切り込まれたときにトリガーされます.navigateToや下部tabが他のページに切り替わったり、ウィジェットがバックグラウンドに切り込んだりします.

2.4 onUnloadトリガタイミング

ページのアンインストール時にトリガーされます.redirectToやnavigateBackのように他のページに移動した場合.

2.5 chooseImage

これは私が出会った大きな穴で、wxを呼び出すときです.chooseImageというAPIのときに、このページのonHideとonShowイベントがトリガーされるのは、バックグラウンドに切り込んだときにonHideをトリガーすることに対する理解が足りないからかも??前にやったプロジェクトはインスタント通信IMと関係がありますが、私はなぜ画像を選んだ後、チャットの記録がどうして乱れたのかと言っていました.その時、本当に私は多くの時間を費やして、本当に大根の穴でした.

2.6問題

主にページを終了するときにタイマーをクリアしたいのですが、onHideとonUnloadのトリガタイミングの理解が足りないため、debugを開いてライフサイクルを具体的にデバッグしました.
もう一つ、重要なのは、webview内にタイマーがある場合は、ウィジェットページを終了するときに必ずwebviewのsrc属性を空に設定することです.そうしないと、webviewは破棄されないようですか?どうせ私のタイマーはまだあるので、srcを空に設定すれば解決できます.

3.npmサポート

公式の紹介は4歩しかありません.

ウィジェットでコマンドを実行してnpmパッケージをインストールします:npm install;

開発者ツールのメニューバーをクリック:ツール-->npmの構築;

「npmモジュールの使用」オプションをチェックします.

構築が完了するとnpmパッケージが使用されます.

一度やってから、うん、いいですね.what???私の操作は間違っていますか?全部で4歩しかないのに、まさか私は間違いを犯すことができますか?後で調べてみると、まだ重要な一歩が少ないことに気づきました.
package.jsonファイル.そうですね.普段プロジェクトをしているとき、この書類は一番欠かせません.どうして微信の小さなプログラムに着いたら忘れてしまいましたか.やはり本を読むのが少なすぎるようです.

解決策：

まずnpm initを使用してプロジェクトルートディレクトリの下にpackageを新規作成する.jsonファイル.

の後、公式文書に従ってください.私は書きません.

4.新規API

私が前回小さなプログラムを書いたのは1年前だったので、新しいAPIはみんなよく知っているかもしれないと思います.軽く噴くのが好きではありません.

4.1 wx.getImageInfo画像情報の取得

このAPIは、画像のwidth、height、path、orientation、typeなどの情報を取得するために使用され、画像の幅と高さだけでなく、ネットワーク画像のアドレスをローカル画像のアドレスに変えることができることを見ることができます.もちろん、ネットワーク画像はdownloadドメイン名を配置してから効果があります.

4.2 FileSystemManager.readFileローカルファイルの内容を読み込む

ファイルをbase 64として読み込むなど、encodingを指定することでhtml 5 FileReaderと同様の効果が得られます.ウィジェットがサポートするencodingは多いので、公式ドキュメントを自分で見ることができます.

4.3 FileSystemManager.getFileInfoこのウィジェットの下のローカル一時ファイルまたはローカルキャッシュファイル情報を取得

このAPIは主にファイルのサイズ、すなわちsizeプロパティを取得するために使用されます.ファイルのサマリーが必要な場合は、次のAPIを使用します.

4.4 wx.getFileInfoファイル情報の取得

このAPIは主にファイルのsizeとdigest情報を取得するために使用され、現在md 5とsha 1の2種類がサポートされている.

4.5 wx.PageScrollToターゲットにページをスクロール

インスタント通信をするときは、新しいメッセージを受け取ったら、コンテンツを増やした後もページを下にスクロールします.ドロップダウン・リフレッシュも上部に戻らなければなりません.この时、このAPIはとても役に立ちました.そうしないと、仕方がありませんね.一年前はこの机能がなかったような気がします.

4.6まとめ

実は列挙したのはすべて私が小さいプログラムとテンセントのクラウドIMのインスタント通信をする时使うAPIで、テンセントのクラウドIMの公式のドキュメントはweb端だけあって、小さいプログラムの直接あなたにweb端を参考にさせて、APIの违いのため、基本的にすべての机能はすべて自分でカプセル化する必要があって、普通のは悪くなくて、IMはピクチャーをアップロードしてこれは穴があいて、IMはbase 64コードのファイルを送ることしかできなくて、小さいプログラムがbase 64コードを支持したことを见て、もう少しで諦めるところだった.
画像を圧縮することを考慮しない場合、画像の選択からIM画像メッセージの送信まで、ウィジェット側だけで4つのAPIを呼び出さなければなりませんが、ウィジェットは簡略化できませんか?

5.ユーザ情報getUserInfoの取得

これはまるで大きな穴で、プロジェクトをする前にコミュニティに行って見てみると、このAPIは今窓を弾いて注意することができなくて、ユーザーがボタンをクリックしなければ取得できなくて、つまりボタンがなくて、窓を弾いても弾けないことを発見しました.この問題に対して、私は直接楽屋に言ったが、あちらは意外にも他の人の家だと言ってボタンをクリックしなくても手に入れることができて、あなたはどうしてボタンをクリックしなければなりませんか?私はあなたに言って、ユーザーにボタンをクリックさせるのはきっと現実的ではありません.それはユーザーの体験に多く影響して、あなたは自分で方法を考えて行きます.
what???公式にはそんなに明確に言われていますが、3つの解決策しかありません.どれもボタンを迂回できません.どうすればいいですか.最後に長いこと口を酸っぱくして、その上私は他の人の家の小さなプログラムも彼らの前に置いて、彼らにボタンがあるかどうかを一つ一つはっきりさせて、やっとできました.

6.まとめ

正直に言うと、开発者として、私はやはりwebのこのような开発のプラットフォームが好きで、微信の小さいプログラムは本当に1歩1つの穴で、もしできるならば、本当に微信の小さいプログラムをしたくありません!残念ながらo(ㄛ゜ㄛ)oはありません.