lypeer：一名Android开发者的微信小程序填坑之路《下》

上一篇就是九月二十七日写下的，而这一篇我动笔的时间就是十月十日（特定的日子），中间相距十三天——当然是因为国庆节。说老实话，这十三天里面我都没碰到和小程序有关的东西——毕竟自学小程序的研发也只是始于兴趣，而平时的工作并不能牵涉与其有关的东西——但是在这十三天里，我能够显著的感受到小程序热正在逐渐的消散，或者说大家正在逐渐以一种较为豁达的姿态拒绝接受它的存有，其实这就是一件好事。期盼内测的到来。

接下来我就轻易步入正题了，另外，文末我想要和大家互动一下我的国庆节。

PS：这篇文章就是接着上一篇文章 一名Android开发者的微信小程序填坑之路《上》 写下的，建议没有看完上一篇文章的同学先看看一下上一篇哈~

正文

6，后台发送 post 命令必须表单？

首先问题就是：我必须向后台 post 一些数据，但是后台须要发送一个表单，我必须怎样赢得一个表单或者将本地的数据转换成一个表单呢？

在写下 wechat-weapp-gank 的递交干货模块的时候，我就碰到了这个问题。一已经开始我挺诧异的，明明就是把后台须要的数据都给通心面了，结果后台旧就是跟我说道我的数据不对，后来我才辨认出是因为后台那边建议发送一个表单，而我通心面的就是一个 json 数据。于是我就已经开始了漫长的探索之旅。（就为了这一个问题，从晚上十一点多一直搞出至第二天凌晨四点多。。。如果不是存有一个群里有个老司机帮说不定就死去在这个问题上了）

首先我想要的就是能够无法把非常简单的 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必须就是

我满心欢喜的以为可以了，结果并不可以。。。后台还是跟我说道赢得的数据存有问题，结果我 console.log() 一会 给我回到的数据，它竟然还是个 json。。。流泪的 form 呢！感觉受了蒙骗。

频临崩盘。幸亏这时候一个旧司机说起了我：为啥那么苦恼在本地数据就是什么样子的？归根结底我们就是必须把数据传至后台回去，那么只须要使数据在命令里面就是 form 的格式不就 OK 了？所以 form 表单在命令里面就是短什么样子的呢？

json数据：

{name: "lypeer", gender: "男"}

form数据：

"name=lypeer & gender=男"

1

2

3

所以只要轻易对数据展开操作方式，不必回去管及什么鬼 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) {

//省略

}

});

}

2

3

4

5

6

7

8

9

10

11

12

13

14

15

这里有一点须要特别注意，所需修正 content-Type 为 application/x-www-form-urlencoded ，不然还是可以出来问题。

通过上面的方式就可以开心的给后台传表单啦~~~另外关于 这个标签，虽然说道他不能轻易给我们回到 form 表单，但是我感觉它还是较好用的，可以轻易赢得里面的很多信息，不必很麻烦的一个一个回去获取数据了。不过这个标签也就是存有一些坑的，下面可以谈至它。

7，解析 HTML 代码块？

有时候我们可以存有解析 HTML 代码块的市场需求（爬到了一个网页须要解析，或者后台自身利益其他原因回到给你了一个 HTML 代码块），但是我们能够赢得的通常就是一个 String 值（ json 里回到的），在这种情况下通常我们可以想起两种解析方式：轻易采用正则相匹配字符串或者将其上装化为一个 DOM（Document Object Model，文档对象模型，没有怎么碰触过 JS 的同学可能将对这个不太确切） 然后解析。

轻易采用正则的方式这里我就不具体内容说道了，这玩意儿在有些时候还是较好用的，但是在有些时候不那么便利，毕竟它不是为了解析 HTML 而后生的。而一提及转变为 DOM ， 大家的脑海里就可以显露出来这行代码去：

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

1

2

1

2

再然后就可以对 el 继续执行一系列的解析操作方式了：

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

1

2

3

1

2

3

毫无疑问，这种方式在大多数情况下就是比正则去的直观便利的，毕竟你不须要绞尽脑汁回去写下最合适的正则表达式了。那么问题去了，在小程序里面我们无法轻易赢得 window 和 document 对象，那么如何把一段 HTML 代码的 String 值转变为 DOM 呢？不晓得那些前端旧司机就是怎么做的，反正我就是这么搞的：

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

1

2

3

4

1

2

3

4

我吃惊的辨认出，虽然微信小程序里面没 ducument ， window 的概念，但是可以通过 DOMParser 对象去赢得一个 document 对象 ……不要反问我怎么辨认出的，这里面的艰苦不足为外人道也。

然后我们就可以开心的通过这个回到的对象去展开一系列解析操作方式啦~~~

8，