应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

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

发布时间:2024-01-01 00:00 浏览次数:25

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


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


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,

里面无法以获取 的值域?


在微信小程序的官方文档里,就是阐明了 标签里可以递交 的数据的,但是如果你真的在 标签里摆了一个 的话,你可以辨认出,童话里都就是骗人的。什么鬼!流泪的数据呢!!!非要都以获取没法数据,甚至还可以使整个程序崩掉。并且坑爹的就是,在小程序官网上面的那个 DEMO 里面,关于 标签的采用存有一个例子,例子里面几乎涵盖了 标签中可以抽取数据的所有控件,就是没


那怎么办?这当然就是难不倒我的。最终我实行了这样的方式去化解这个问题:





这就是一个 标签里面的 标签,我实行的方式就是用一个 标签去以获取 的值,然后使 以获取 的值,从而达至将 里面的值传达给 的目的。


9,必须同时实现多层列表?


在搞 wechat-weapp-gank 的每天干货展现的页面的时候,存有一个这样的页面须要同时实现:


这个东西说白了就是个两层的列表,在原先搞 Android 的时候这个就是很难的,轻易嵌套嘛,但是现在搞小程序的这个效果还是碰到了一些问题。这其中最小的问题就是在嵌套的过程中究竟在存取数据的时候必须怎么写下——第二个列表必须怎么传数据进来呢?第二个列表的列表项必须怎么获取数据呢?最后我探索出的结果就是这样的:



{{item.tag}}



{{index}},{{item.title}}




其中 data 就是一个数组,它里面上装的就是一个一个的的 json 数据,每个 json 数据里面又上装了 tag,singleItems 等数据,其中 singleItems 又就是一个数组,它里面上装的也就是一个一个的 json 数据,每个 json 数据里上装了每个二级列表的 item 所需的数据。


具体内容的可以回去我的项目代码里回去看看,具体内容的代码路径在这里:post.wxml 和 post.js。


10,如何便利开心的同时实现相似 Java 里面的静态变量的效果?


这点的话单纯就是我的一点执念吧,我就是专门从事 Android 研发的,也有点研发中的小癖好,讨厌把一些字符串做成全局静态的放在一个专门的地方回去。如果就是在 Java 里面的话,我讨厌这样搞:


然后在调用的时候就可以这样搞:


String appId = Constants.AppSign.V_APP_ID;


这样搞我真的很难受,条理很准确。但是在微信小程序中想获得这样的体验就很困难——不过还是使我找出了方法——在小程序里面,就是可以通过module.exports 将一个 js 文件模块化,然后使别的 js 文件通过 require( URL ) 提及的,我们可以通过这个特性去同时实现字符串的全局化,像是这样:


这样的话,我们就可以在须要采用的时候这样:


这个其实算不上摔过的坑哈,只是一个 Android 程序员的小执念而已,大家可以漠视。。。


结语


最近在恶补一些前端的东西,感觉我已经慢沦为一个前端开发工程师了。。。

TAG标签:
阅读推荐