lypeer：一名Android開發(fā)者的微信小程序填坑之路《下》

時(shí)間：2016-10-17 11:12:00

上一篇是九月二十七日寫的，而這一篇我動(dòng)筆的時(shí)間是十月十日（特殊的日子），中間相隔十三天——當(dāng)然是因?yàn)閲鴳c節(jié)。說老實(shí)話，這十三天里面我都沒有碰和小程序有關(guān)的東西——畢竟學(xué)習(xí)小程序的開發(fā)也只是起于興趣，而平時(shí)的工作并不會(huì)涉及與其相關(guān)的東西——但是在這十三天里，我能明顯的感受到小程序熱正在逐漸的消退，或者說大家正在逐漸以一種較為平和的姿態(tài)接受它的存在，其實(shí)這是一件好事。期待公測的到來。

接下來我就直接進(jìn)入正題了，另外，文末我想和大家分享一下我的國慶節(jié)。

PS：這篇文章是接著上一篇文章 一名Android開發(fā)者的微信小程序填坑之路《上》 寫的，建議沒看過上一篇文章的同學(xué)先看一下上一篇哈~

正文

6，后臺(tái)接收 post 請(qǐng)求要表單？

首先問題是：我要向后臺(tái) post 一些數(shù)據(jù)，但是后臺(tái)需要接收一個(gè)表單，我應(yīng)該怎樣獲得一個(gè)表單或者將本地的數(shù)據(jù)轉(zhuǎn)換成一個(gè)表單呢？

在寫 wechat-weapp-gank 的提交干貨模塊的時(shí)候，我就遇到了這個(gè)問題。一開始我挺納悶的，明明是把后臺(tái)需要的數(shù)據(jù)都給傳過去了，結(jié)果后臺(tái)老是跟我說我的數(shù)據(jù)不對(duì)，后來我才發(fā)現(xiàn)是因?yàn)楹笈_(tái)那邊要求接收一個(gè)表單，而我傳過去的是一個(gè) json 數(shù)據(jù)。于是我就開始了漫長的探索之旅。（就為了這一個(gè)問題，從晚上十一點(diǎn)多一直搞到第二天凌晨四點(diǎn)多。。。如果不是有一個(gè)群里有個(gè)老司機(jī)幫忙說不定就死在這個(gè)問題上了）

首先我想的是能不能把現(xiàn)成的 json 數(shù)據(jù)直接轉(zhuǎn)化為 form 表單？因?yàn)槲乙呀?jīng)完成了獲取要輸?shù)男畔⑷缓蟀阉兂闪?json 數(shù)據(jù)的工作，如果能直接把 json 對(duì)象轉(zhuǎn)化為 form 對(duì)象的話我需要對(duì)程序做的改動(dòng)肯定是最小的。然而遺憾的是，似乎并沒有可行的方案。（也有可能是因?yàn)槲?js 功底太差吧，我確實(shí)是沒有找到相應(yīng)的方法，要生成一個(gè) form 似乎是需要 document 的，而小程序中我們并不能夠得到它）

此路不通，另覓他途。在查閱資料的過程中，我發(fā)現(xiàn)在 HTML 中似乎是有這個(gè)標(biāo)簽的，然后我就興沖沖的又去翻閱了一下小程序的官方文檔，果不其然，小程序還是很良心的，有這方面的描述：

form

然后我就興沖沖的去按照官方的介紹用標(biāo)簽來提交數(shù)據(jù)，js 里的代碼是這樣的：

formSubmit: function (event) {
        wx.request({
            url: Constant.BASE_URL + "/add2gank",
            method: "POST",
            //按照官方文檔，event.detail.value應(yīng)該就是

我滿心歡喜的以為可以了，結(jié)果并不可以。。。后臺(tái)還是跟我說獲得的數(shù)據(jù)有問題，結(jié)果我 console.log() 了看給我返回的數(shù)據(jù)，它竟然還是個(gè) json。。。說好的 form 呢！感覺受到了欺騙。

瀕臨崩潰。幸好這時(shí)候一個(gè)老司機(jī)點(diǎn)醒了我：為啥那么糾結(jié)在本地?cái)?shù)據(jù)是什么樣子的？歸根結(jié)底我們是要把數(shù)據(jù)傳到后臺(tái)去，那么只需要讓數(shù)據(jù)在請(qǐng)求里面是 form 的格式不就 OK 了？所以 form 表單在請(qǐng)求里面是長什么樣子的呢？

json數(shù)據(jù)：
{name: "lypeer",  gender: "男"}
form數(shù)據(jù)：
"name=lypeer & gender=男"1
2
3

所以只要直接對(duì)數(shù)據(jù)進(jìn)行操作，不用去管什么鬼 json 對(duì)象 form 對(duì)象什么的，那位老司機(jī)寫了個(gè)方法，我無恥的直接拿來用了：

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

ok，然后就可以用這個(gè)方法轉(zhuǎn)換數(shù)據(jù)后來 post 一發(fā)：

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) {
                //省略
            }
        });
}2
3
4
5
6
7
8
9
10
11
12
13
14
15

這里有一點(diǎn)需要注意，必需修改 content-Type 為 application/x-www-form-urlencoded ，不然還是會(huì)出問題。

通過上面的方式就可以愉快的給后臺(tái)傳表單啦~~~另外關(guān)于這個(gè)標(biāo)簽，雖然說他不會(huì)直接給我們返回 form 表單，但是我感覺它還是很好用的，可以直接獲得里面的很多信息，不用很麻煩的一個(gè)一個(gè)去獲取數(shù)據(jù)了。不過這個(gè)標(biāo)簽也是有一些坑的，下面會(huì)講到它。

7，解析 HTML 代碼塊？

有時(shí)候我們會(huì)有解析 HTML 代碼塊的需求（爬了一個(gè)網(wǎng)頁需要解析，或者后臺(tái)出于某種原因返回給你了一個(gè) HTML 代碼塊），但是我們能獲得的通常是一個(gè) String 值（ json 里返回的），在這種情況下通常我們會(huì)想到兩種解析方式：直接使用正則匹配字符串或者將其裝化成一個(gè) DOM（Document Object Model，文檔對(duì)象模型，沒怎么接觸過 JS 的同學(xué)可能對(duì)這個(gè)不太清楚）然后解析。

直接使用正則的方式這里我就不具體說了，這玩意兒在有些時(shí)候還是很好用的，但是在有些時(shí)候不那么方便，畢竟它不是為了解析 HTML 而生的。而一提到轉(zhuǎn)化為 DOM ，大家的腦海里就會(huì)浮現(xiàn)出這行代碼來：

var el = document.createElement( 'html' );el.innerHTML = htmlString;//htmlString是一串 HTML 代碼的 String 值1
2
1
2

再然后就可以對(duì) el 執(zhí)行一系列的解析操作了：

el.getElementById( idName );el.getElementsByTagName( tagName );......1
2
3
1
2
3

毫無疑問，這種方式在大多數(shù)情況下是比正則來的簡單方便的，畢竟你不需要絞盡腦汁去寫合適的正則表達(dá)式了。那么問題來了，在小程序里面我們無法直接獲得 window 和 document 對(duì)象，那么如何把一段 HTML 代碼的 String 值轉(zhuǎn)化為 DOM 呢？不知道那些前端老司機(jī)是怎么做的，反正我是這么做的：

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

我驚訝的發(fā)現(xiàn)，雖然微信小程序里面沒有 ducument ， window 的概念，但是可以通過 DOMParser 對(duì)象來獲得一個(gè) document 對(duì)象 ……不要問我怎么發(fā)現(xiàn)的，這里面的艱辛不足為外人道也。

然后我們就可以愉快的通過這個(gè)返回的對(duì)象來進(jìn)行一系列解析操作啦~~~

8，`<form/>` 里面無法獲取 `<picker/>` 的取值？

在微信小程序的官方文檔里，是指明了 `<form/>` 標(biāo)簽里可以提交 `<picker/>` 的數(shù)據(jù)的，但是如果你真的在 `<form/>` 標(biāo)簽里放了一個(gè) `<picker/>` 的話，你會(huì)發(fā)現(xiàn)，童話里都是騙人的。什么鬼！說好的數(shù)據(jù)呢?。?！死活都獲取不了數(shù)據(jù)，甚至還會(huì)讓整個(gè)程序崩掉。并且坑爹的是，在小程序官網(wǎng)上面的那個(gè) DEMO 里面，關(guān)于 `<form/>` 標(biāo)簽的使用有一個(gè)例子，例子里面幾乎包含了 `<form/>` 標(biāo)簽中會(huì)提取數(shù)據(jù)的所有控件，就是沒有 `<picker/>` 。
那怎么辦？這當(dāng)然是難不倒我的。最終我采取了這樣的方式來解決這個(gè)問題：

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