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

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

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

正文

6，后臺接收 post 請求要表單？

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

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

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

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

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

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

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

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

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

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

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

ok，然后就可以用這個方法轉(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

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

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

7，解析 HTML 代碼塊？

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

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

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

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

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

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

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 對象來獲得一個 document 對象 ……不要問我怎么發(fā)現(xiàn)的，這里面的艱辛不足為外人道也。

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

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

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

那怎么辦？這當(dāng)然是難不倒我的。最終我采取了這樣的方式來解決這個問題：

<picker bindchange="onPickerChanged" value="{{index}}" range="{{array}}">

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

</picker>

這是一個 <form/> 標(biāo)簽里面的 <picker/> 標(biāo)簽，我采取的方式是用一個 <input/> 標(biāo)簽來獲取 <picker/> 的值，然后讓 <form/> 獲取 <input/> 的值，從而達(dá)到將 <picker/> 里面的值傳遞給 <form/> 的目的。

9，要實現(xiàn)多層列表？

在做 wechat-weapp-gank 的每天干貨展示的頁面的時候，有一個這樣的頁面需要實現(xiàn)：

這個東西說白了就是個兩層的列表，在原先做 Android 的時候這個是很容易的，直接嵌套嘛，但是現(xiàn)在做小程序的這個效果還是遇到了一些問題。這其中最大的問題就是在嵌套的過程中究竟在綁定數(shù)據(jù)的時候應(yīng)該怎么寫——第二個列表應(yīng)該怎么傳數(shù)據(jù)進(jìn)去呢？第二個列表的列表項應(yīng)該怎么獲取數(shù)據(jù)呢？最后我摸索出來的結(jié)果是這樣的：

<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 是一個數(shù)組，它里面裝的是一個一個的的 json 數(shù)據(jù)，每個 json 數(shù)據(jù)里面又裝了 tag，singleItems 等數(shù)據(jù)，其中 singleItems 又是一個數(shù)組，它里面裝的也是一個一個的 json 數(shù)據(jù)，每個 json 數(shù)據(jù)里裝了每個二級列表的 item 所需的數(shù)據(jù)。

具體的可以去我的項目代碼里去看，具體的代碼路徑在這里：post.wxml 和 post.js。

10，如何方便愉快的實現(xiàn)類似 Java 里面的靜態(tài)變量的效果？

這點的話純粹是我的一點執(zhí)念吧，我是從事 Android 開發(fā)的，也有點開發(fā)中的小癖好，喜歡把一些字符串弄成全局靜態(tài)的放到一個專門的地方去。如果是在 Java 里面的話，我喜歡這樣做：

然后在調(diào)用的時候就可以這樣做：

String appId = Constants.AppSign.V_APP_ID;

這樣做我覺得很舒服，條理很清晰。但是在微信小程序中想要得到這樣的體驗就很困難——不過還是讓我找到了方法——在小程序里面，是可以通過module.exports 將一個 js 文件模塊化，然后讓別的 js 文件通過 require( URL ) 引用的，我們可以通過這個特性來實現(xiàn)字符串的全局化，像這樣：

這樣的話，我們就可以在需要使用的時候這樣：

這個其實不算踩過的坑哈，只是一個 Android 程序員的小執(zhí)念而已，大家可以無視。。。

結(jié)語

最近在惡補一些前端的東西，感覺我已經(jīng)快成為一個前端開發(fā)工程師了。。。