微信ウィジェット-開発経験総括(継続更新)

5621 ワード
最近、小さなプログラムが出てきて、会社も私たちに小さなプログラムを開発するように要求しました.ということで、手始めにやってみましたが、1週間足らずの差があったのか、いろいろな問題もあったので、ここでまとめてみます.前にも简単に游ぶdemoを送ったことがありますが、面白いところもあるはずです(主にAndroid开発者の角度から话していますが、こまごました知识や経験があるかもしれませんが、もし皆さんがまだ补充しているなら、歓迎します)
まとめ
1:伝参、方法判断
  • jsでは、javaではできないメソッドとしてメソッドを渡すことができます.例えばstartプロジェクトの
    •  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //      
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  • ここでは形参,cbを伝達する方法であり,ここでは巧みな判断方法
    • がある.
    typeof cb == "function" && cb(that.globalData.userInfo)

    利用する&&の演算法則は、まずcbが1つの方法であるかどうかを判断し、ここの==はタイプとして相当するかどうかを判断することができ、そして&&の中で前のが満たさなければ、後のは実行しない.cbがメソッドである場合、cbメソッドが呼び出され、successが正常にコールバックしたuserinfoパラメータが入力されます.
  • もう一つ、if(this.globalData.userInfo)はnullかどうかの判断条件としてjavaではできません.

    • 2:log印刷
  • logの印刷は、「」+変数を直接印刷するといけません.なぜなら、toString()メソッドがないからです.
     X console.log("info"+info);

    別々に印刷するしかありません
    console.log("info");
console.log(info);

    3:jsonオブジェクト
    jsonの使用は、json[「key」]でサブオブジェクトを取得できます.
     person: {
      name: "jafir",
      age: "11",
}

var name = person["name"];
var age = person["age"];

     info: {persons:[{name:"123",age:11},{name:"jafir1",age:12}]}
//              
 console.log(that.data.info["persons"][1].name)
 console.log(that.data.info["persons"][1].age)

    4:booleanタイプ値の定義
    pageのdataでbooleanタイプの値を定義する場合は、isSuccess:trueではなくisSuccess:trueである必要があります.
    if (this.data.isSccess) {
      console.log("true")
    } else {
      console.log("false")
    }

    isSucess:falseの場合、結果はtrueであるため、問題はありませんが、isSucess:falseの場合、結果はtrueのままです.ここのisSuccessはbooleanではなく、空ではないので、ifはtrueの場合、デフォルトundefined、ifはfalseです.
    5:「that」の使用
    page{}の外側にthat変数を定義し、onLoadでthisに値を割り当てることをお勧めします.その後、すべての場所でthatを使用することができます.これにより、pageのコンテキストオブジェクトを指す場所ではありません.
    //     
var that;
page({
 onLoad: function (options) {
    //       options           
    that = this;
 }

...
that.setData({
        xxx: xxx,
      })
})

    6:pageのライフサイクルメソッド
  • onloadにoptionsパラメータがあるだけで、ページ転送値を取得できるなど、onloadは1回
    • しか実行できません.
  • しかしonShowはページを切り替えるたびに実行できるので、ページをリフレッシュするたびのデータ要求が必要で、onShowに置くことができて、テストしたことがあって、性能体験は基本的に
    • に影響しません.
  • pageのライフサイクルはAndroidほど豊富ではなく、ページ間の転送にも一定の制限があります.
  • は通常のurlの伝値方式で値を伝えることができます.xxx?key=valueですが、私たちが伝えた値は文字列とurlがつながっていることに相当します.オブジェクトにはtoStringメソッドがないので、直接オブジェクトを伝えないでください.
  • jsonオブジェクトを渡すには、次の手順に従います.
  • jsonオブジェクトを文字列にし、それ自体があればそのまま使用し、jsonオブジェクトであればparseString(json)
    • が必要である.
  • とurlはパラメータのつなぎ合わせを行いますか?key=value
  • 取得時にonloadのoptionsから取り出し、onLoad:function(options){var value=options.key}
  • その後JSON.stringify(value)からjsonオブジェクトへ
    • を使用
    7:ページ間ジャンプ
    ホームページから新しいインタフェースをジャンプします.新しいインタフェースで論理処理が成功したかどうか、終了した後、どのようにホームページの結果を通知しますか?このような状況は、一般的には解決できない.テストの結果、2級非ホームページインタフェースから直接navigatorでホームページを開きたい場合は、だめです.エラーが発生します.したがって、2次インタフェースでデータを処理した後、直接戻って、ホームページインタフェースでデータを再抽出する戦略を採用しています.したがって、私たちのリクエストインタフェースはonShowメソッドで実行されます.onloadは1回しか実行できないので
    8:wxml
  • textラベルはbindtap
    • を使用できます.
  • は、デフォルトのピクチャ
    • を表示するために使用することができる.
  • ラベルにdata-xx-oo=「value」を使用することをさらに強調します.対応するオブジェクトではe.currentTarget.dataset.xxOoで入手できます.ここでのxx-ooは、-実はアルパカのピークを意味します.この一般的な使用シーンでは、クリックまたはバインドされたイベントのviewにデータを設定できます.例えば、pickerに5つのviewがあれば、各viewの異なる値をバインドすることができ、イベントをトリガーするときに対応する値
    • を取得することができます.
  • 隠しviewを表示したい場合はwx:if=「true/false」で処理できますが、falseの場合、pageはこのviewをレンダリングせず、その位置空間も予約されず、下のviewが上に並ぶとします.その位置空間を残すには、
    • を解決するためにstyleスタイルを変更することができます.
    style="visibility:{{isShow?'visible':'hidden'}}"

    9:統合ネットワーク要求処理結果
    ネットワークリクエストの返信結果をカプセル化し、統一的に処理することができます.
    requestWithGet: function(paramsData) {
  data.method = 'GET'
  this.requestInternal(paramsData)
},
requestWithPost: function(paramsData) {
  data.method = 'POST'
  this.requestInternal(paramsData)
},
requestInternal: function (paramsData) {
  var that = this;
  console.log('requestInternal:       [' + paramsData.url + ']');
  //      
  wx.request({
    url: paramsData.url,
    data: paramsData.data,
    method: paramsData.method,
    success: function (res) {
      console.log('requestInternal:       [' + paramsData.url + ']');
      paramsData.success(res);
    },
    fail: function (res) {
      console.log('requestInternal:       [' + paramsData.url + ']');
      console.log(res);
      ////             
      wx.showToast({
        title: '      ',
        duration: 1500
      })
      typeof paramsData.fail == "function" && paramsData.fail(res);
    },
    complete: function (res) {
//           
      typeof paramsData.complete == "function" && paramsData.complete(res);
    }
  })
}

    このようにリクエストを使用する場合、直接wx.request({})を使用することで、IDEが対応するリクエストフォーマットを連想して生成し、そのまま「wx.request」を「requestWithGet」または「requestWithPost」に置き換えることができます
    Tutorialチュートリアル:フーリエ変換を使用して画像エッジを検出する
    logstash elasticsearchにデータを出力する際のダイナミックマッピングテンプレートの問題