|
上一篇是九月二十七日寫的，而這一篇我動(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 請求要表單？
首先問題是：我要向后臺(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ù)不對，后來我才發(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 對象轉(zhuǎn)化為 form 對象的話我需要對程序做的改動(dòng)肯定是最小的。然而遺憾的是，似乎并沒有可行的方案。（也有可能是因?yàn)槲?js 功底太差吧，我確實(shí)是沒有找到相應(yīng)的方法，要生成一個(gè) form 似乎是需要 document 的，而小程序中我們并不能夠得到它）
此路不通，另覓他途。在查閱資料的過程中，我發(fā)現(xiàn)在 HTML 中似乎是有 這個(gè)標(biāo)簽的，然后我就興沖沖的又去翻閱了一下小程序的官方文檔，果不其然，小程序還是很良心的，有這方面的描述：
然后我就興沖沖的去按照官方的介紹用 標(biāo)簽來提交數(shù)據(jù)，js 里的代碼是這樣的：
formSubmit: function (event) {
wx.request({
url: Constant.BASE_URL + "/add2gank",
method: "POST",
我滿心歡喜的以為可以了，結(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ù)在請求里面是 form 的格式不就 OK 了？所以 form 表單在請求里面是長什么樣子的呢？
json數(shù)據(jù)：
{name: "lypeer", gender: "男"}
form數(shù)據(jù)：
"name=lypeer & gender=男"
所以只要直接對數(shù)據(jù)進(jìn)行操作，不用去管什么鬼 json 對象 form 對象什么的，那位老司機(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，文檔對象模型，沒怎么接觸過 JS 的同學(xué)可能對這個(gè)不太清楚） 然后解析。
直接使用正則的方式這里我就不具體說了，這玩意兒在有些時(shí)候還是很好用的，但是在有些時(shí)候不那么方便，畢竟它不是為了解析 HTML 而生的。而一提到轉(zhuǎn)化為 DOM ， 大家的腦海里就會(huì)浮現(xiàn)出這行代碼來：
var el = document.createElement( 'html' );el.innerHTML = htmlString;
再然后就可以對 el 執(zhí)行一系列的解析操作了：
el.getElementById( idName )el.getElementsByTagName( tagName )......
毫無疑問，這種方式在大多數(shù)情況下是比正則來的簡單方便的，畢竟你不需要絞盡腦汁去寫合適的正則表達(dá)式了。那么問題來了，在小程序里面我們無法直接獲得 window 和 document 對象，那么如何把一段 HTML 代碼的 String 值轉(zhuǎn)化為 DOM 呢？不知道那些前端老司機(jī)是怎么做的，反正我是這么做的：
function parseHtml(htmlBlock) { var parser = new DOMParser(); return parser.parseFromString(htmlBlock, "text/html");}
我驚訝的發(fā)現(xiàn)，雖然微信小程序里面沒有 ducument ， window 的概念，但是可以通過 DOMParser 對象來獲得一個(gè) document 對象 ……不要問我怎么發(fā)現(xiàn)的，這里面的艱辛不足為外人道也。
然后我們就可以愉快的通過這個(gè)返回的對象來進(jìn)行一系列解析操作啦~~~
在微信小程序的官方文檔里，是指明了 <form/> 標(biāo)簽里可以提交 <picker/> 的數(shù)據(jù)的，但是如果你真的在 <form/> 標(biāo)簽里放了一個(gè) <picker/> 的話，你會(huì)發(fā)現(xiàn)，童話里都是騙人的。什么鬼！說好的數(shù)據(jù)呢?。。?strong style="word-wrap: break-word; margin: 0px; padding: 0px; box-sizing: border-box;">死活都獲取不了數(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>
這是一個(gè) <form/> 標(biāo)簽里面的 <picker/> 標(biāo)簽，我采取的方式是用一個(gè) <input/> 標(biāo)簽來獲取 <picker/> 的值，然后讓 <form/> 獲取 <input/> 的值，從而達(dá)到將 <picker/> 里面的值傳遞給 <form/> 的目的。
9，要實(shí)現(xiàn)多層列表？
在做 wechat-weapp-gank 的每天干貨展示的頁面的時(shí)候，有一個(gè)這樣的頁面需要實(shí)現(xiàn)：
這個(gè)東西說白了就是個(gè)兩層的列表，在原先做 Android 的時(shí)候這個(gè)是很容易的，直接嵌套嘛，但是現(xiàn)在做小程序的這個(gè)效果還是遇到了一些問題。這其中最大的問題就是在嵌套的過程中究竟在綁定數(shù)據(jù)的時(shí)候應(yīng)該怎么寫——第二個(gè)列表應(yīng)該怎么傳數(shù)據(jù)進(jìn)去呢？第二個(gè)列表的列表項(xiàng)應(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 是一個(gè)數(shù)組，它里面裝的是一個(gè)一個(gè)的的 json 數(shù)據(jù)，每個(gè) json 數(shù)據(jù)里面又裝了 tag，singleItems 等數(shù)據(jù)，其中 singleItems 又是一個(gè)數(shù)組，它里面裝的也是一個(gè)一個(gè)的 json 數(shù)據(jù)，每個(gè) json 數(shù)據(jù)里裝了每個(gè)二級列表的 item 所需的數(shù)據(jù)。
具體的可以去我的項(xiàng)目代碼里去看，具體的代碼路徑在這里：post.wxml 和 post.js。
10，如何方便愉快的實(shí)現(xiàn)類似 Java 里面的靜態(tài)變量的效果？
這點(diǎn)的話純粹是我的一點(diǎn)執(zhí)念吧，我是從事 Android 開發(fā)的，也有點(diǎn)開發(fā)中的小癖好，喜歡把一些字符串弄成全局靜態(tài)的放到一個(gè)專門的地方去。如果是在 Java 里面的話，我喜歡這樣做：
然后在調(diào)用的時(shí)候就可以這樣做：
String appId = Constants.AppSign.V_APP_ID;
這樣做我覺得很舒服，條理很清晰。但是在微信小程序中想要得到這樣的體驗(yàn)就很困難——不過還是讓我找到了方法——在小程序里面，是可以通過module.exports 將一個(gè) js 文件模塊化，然后讓別的 js 文件通過 require( URL ) 引用的，我們可以通過這個(gè)特性來實(shí)現(xiàn)字符串的全局化，像這樣：
這樣的話，我們就可以在需要使用的時(shí)候這樣：
這個(gè)其實(shí)不算踩過的坑哈，只是一個(gè) Android 程序員的小執(zhí)念而已，大家可以無視。。。
結(jié)語
最近在惡補(bǔ)一些前端的東西，感覺我已經(jīng)快成為一個(gè)前端開發(fā)工程師了。。。
|
