Android開発者の微信ウィジェットが穴を埋める道(2)

前言
前の1篇は9月27日に書いたので、この1篇の私がペンを動かす時間は10月10日(特殊な日)で、中間は13日隔てています--もちろん国慶節のためです.正直に言うと、この13日間、私は小さなプログラムに関するものに触れていませんでした.結局、小さなプログラムの開発を学ぶのも興味から始まっただけで、普段の仕事はそれに関連するものには触れませんでした.しかし、この13日間、私は小さなプログラムブームが徐々に消えていることを明らかに感じることができます.あるいは、みんなが穏やかな姿勢でそれを受け入れているのは、実はいいことです.公測の到来を期待する.
それから私は直接本題に入りました.また、文末に私の国慶節を皆さんと分かち合いたいと思います.
PS:この文章は前の文章に続いてAndroid開発者の微信の小さなプログラムが穴を埋める道(1)を書いたもので、前の文章を見たことがない人はまず前の文章を見てみることをお勧めします.
本文
6、バックグラウンドでpostリクエストを受信するにはフォームが必要ですか?
まず問題は、バックグラウンドpostにいくつかのデータを入力しますが、バックグラウンドではフォームを受信する必要があります.フォームを取得したり、ローカルのデータをフォームに変換したりするにはどうすればいいですか?
Wechat-weapp-gankの提出ドライモジュールを書いたとき、私はこの問題に遭遇しました.最初はとても退屈で、明らかにバックグラウンドに必要なデータをすべて伝えたのに、結局バックグラウンドはいつも私に私のデータが間違っていると言って、それから私はバックグラウンドの向こうがフォームを受信するように要求したので、私が伝えたのはjsonデータです.そこで私は長い探索の旅を始めました.△この問題のために、夜11時過ぎから翌日の午前4時過ぎまでやっていました...あるグループにベテランの運転手が手伝ってくれなかったら、この問題で死んでしまったかもしれません.
まず、既成のjsonデータをformフォームに直接変換できますか?私はもう負ける情報を取得してjsonデータにする仕事を終えたので、jsonオブジェクトをformオブジェクトに直接変換できれば、プログラムの変更は最小に違いありません.しかし残念なことに、実行可能な案はないようだ.(私のjsの基礎が悪いからかもしれませんが、私は確かに相応の方法を見つけていません.formを生成するにはdocumentが必要なようですが、小さなプログラムではそれを得ることはできません)
この道は通じない,別の道を探す.資料を調べているうちに、HTMLにこのラベルがあるようだと気づきました.それから、私は喜んでまた小さなプログラムの公式ドキュメントをめくってみました.案の定、小さなプログラムは良心的で、この方面の説明があります.
それから私は喜んで公式の紹介に従ってラベルでデータを提出しました.jsのコードはこうです.

formSubmit: function (event) {
        wx.request({
            url: Constant.BASE_URL + "/add2gank",
            method: "POST",
            //      ，event.detail.value     <form>        
            data: event.detail.value,
            complete: function (res) {
                  //  
            }
        });
}

私は喜んでいいと思っていたが、結果はだめだった.のバックグラウンドはやはり私に得たデータに問題があると言って、結局私はconsole.log()を見て私に返したデータを見て、それは意外にもjsonです.約束したformは!だまされたような気がする.
崩壊寸前.幸いなことに、この時、古い運転手が私を起こしました.どうしてそんなに地元のデータにこだわるのですか.結局私たちはデータをバックグラウンドに転送するので、データを要求の中でformのフォーマットにすればいいのではないでしょうか.だからformフォームはリクエストの中でどんな顔をしていますか?

json  ：
{name: "lypeer",  gender: " "}
form  ：
"name=lypeer & gender= "

だから直接データを操作すれば、鬼jsonオブジェクトformオブジェクトなどを気にする必要はありません.あのベテラン運転手は方法を書いて、私は恥知らずに直接持ってきました.

function json2Form(json) {
    var str = [];
    for(var p in json){
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p]));
    }
    return str.join("&");
}

OK、それからこの方法でデータを変換してpostを送信することができます.

formSubmit: function (event) {
        console.log(event);
        wx.request({
            url: Constant.BASE_URL + "/add2gank",
            header: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            method: "POST",
            data: Util.json2Form(event.detail.value).concat("&debug=false"),

            complete: function (res) {
                //  
            }
        });
}

ここで注意すべき点は、content-Typeをapplication/x-www-form-urlencodedに変更する必要があります.そうしないと、問題が発生します.
また、このラベルについては、直接formフォームに戻ることはないと言っていますが、私はそれがとても使いやすいと感じて、直接中の多くの情報を得ることができて、面倒な1つ1つのデータを得る必要はありません.しかし、このラベルにもいくつかの穴があります.以下で説明します.
7,HTMLコードブロックを解析しますか?
HTMLコードブロックを解析する必要がある場合があります(ページを登って解析する必要がある場合や、バックグラウンドが何らかの理由でHTMLコードブロックを返した場合)がありますが、通常はString値(jsonで返される)が得られます.この場合、通常、正規一致文字列を直接使用するか、DOM(Document Object Model、ドキュメントオブジェクトモデル、JSにあまり接触していない学生はこれについてよく知らないかもしれません)に装って解析する2つの解析方法が考えられます.
ここでは具体的には言いませんが、これは時には使いやすいものですが、時にはそんなに便利ではありません.HTMLを解析するために生まれたものではありません.DOMへの変換といえば、このコードが頭に浮かびます.

var el = document.createElement( 'html' );
el.innerHTML = htmlString;//htmlString    HTML     String  

その後、elに対して一連の解析操作を実行することができる.

el.getElementById( idName );
el.getElementsByTagName( tagName );
......

間違いなく、この方法は多くの場合、正則よりも簡単で便利です.結局、適切な正則表現を書く必要はありません.では問題ですが、ウィジェットではwindowやdocumentオブジェクトを直接取得することはできません.では、HTMLコードのString値をDOMに変換するにはどうすればいいのでしょうか.フロントエンドのベテランドライバーがどうやってやったのか分かりませんが、どうせ私はそうしました.

function parseHtml(htmlBlock) {
        var parser = new DOMParser();
        return parser.parseFromString(htmlBlock, "text/html");
}

私は驚いて発見して、微信の小さいプログラムの中でducument、windowの概念がありませんが、しかしDOMParserの対象を通じて1つのdocumentの対象を得ることができます......私にどのように発見したことを聞かないでください、この中の苦労は外人道的ではありません.
そして私たちはこの返されたオブジェクトを通じて一連の解析操作を楽しく行うことができます~~~
8,<form/>では<picker/>の値を取得できませんか?
微信小プログラムの公式文書には、<form/>ラベルに<picker/>のデータを提出できることが明記されていますが、もしあなたが本当に<form/>ラベルに<picker/>を入れたら、童話には嘘がついていることに気づきます.何だよ!約束したデータは!!!死んでもデータが得られず、プログラム全体が崩壊することもあります.さらに、小プログラム公式サイト上のDEMOには、<form/>ラベルの使用例があり、例には<form/>ラベルからデータが抽出されるすべてのコントロールがほとんど含まれています.<picker/>はありません.
どうする?これはもちろん私を倒すことはできません.最終的に私はこの問題を解決するためにこのような方法を採用しました.

<picker bindchange="onPickerChanged" value="{{index}}" range="{{array}}"> <input class="picker" disabled="disabled" name="type" value="{{array[index]}}"/> </picker>

これは1つの<form/>ラベルの中の<picker/>ラベルで、私は1つの<input/>ラベルで<picker/>の値を取得して、それから<form/>に<input/>の値を取得させて、それによって<picker/>の中の値を<form/>に伝達する目的を達成します.
9、多層リストを実装しますか?
Wechat-weapp-gankの毎日の乾物展示のページを作るとき、このようなページが実現する必要があります.
これははっきり言って2階建てのリストで、Androidを作っていたときはこれが簡単で、直接ネストされていましたが、今では小さなプログラムを作るこの効果に問題がありました.この最大の問題は、ネスト中にデータをバインドするときにどのように書くべきか、2番目のリストはどのようにデータを転送すべきかということです.2番目のリストのリスト項目はどのようにデータを取得しますか?最後に私が模索した結果はこうでした.

<view class="frame" wx:for="{{data}}"> <view class="tag">{{item.tag}}</view> <view wx:for="{{item.singleItems}}"> <view class="singleItem" href="{{item.src}}">{{index}}，{{item.title}}</view> </view> </view>

このうちdataは配列であり、その中には1つ1つのjsonデータが入っており、各jsonデータにはtag、singleItemsなどのデータが入っており、そのうちsingleItemsは配列であり、その中には1つのjsonデータが入っており、各jsonデータには各2級リストのitemに必要なデータが入っている.
具体的には私のプロジェクトコードに行ってみてください.具体的なコードパスはここです.post.wxmlとpost.js.
10、Javaの中の静的変数のような効果をどのように簡単に実現しますか?
この点は純粋に私の執念でしょう.私はAndroid開発に従事しています.開発中の癖もあります.いくつかの文字列をグローバルに静的に専門的な場所に置くのが好きです.Javaであれば、私はこのようにするのが好きです.
呼び出し時に次のことができます.

String appId = Constants.AppSign.V_APP_ID;

このようにするのは気持ちがよくて、筋道がはっきりしています.しかし、微信ウィジェットでこのような体験を得るのは難しい--しかし、私に方法を見つけさせた--ウィジェットでは、module.exportsで1つのjsファイルをモジュール化し、他のjsファイルをrequire( URL )で参照させることができ、私たちはこの特性を通じて文字列のグローバル化を実現することができます.
これにより、必要なときにこのようにすることができます.
これは実際に踏んだ穴ではありませんが、Androidプログラマーの小さな執念にすぎません.無視してもいいです.の
締めくくり
最近、先端のものを補完しているので、私はもうすぐ先端開発エンジニアになるような気がします.の
PS:书き始めたのは10月10日ですが、途中で时间を止めて、书き终わったのはもう违います.(脱出PS:文の中のすべてのコードなどは私のオープンソースプロジェクトwechat-weapp-gankの中で见つけることができます.starやティissueへようこそ.PS:国庆节について、私は1枚の図を置きたいです.
国慶節おめでとうございます.