关于微信小程序开发遇到的坑。。。
最近因为朋友的要求,需要一个客户端来实现网上订餐跑腿的功能,想着写个app有点麻烦,要准备一份苹果和一份安卓,所以就想到了微信小程序,下面我就讲一讲我开发过程中遇到的坑吧。
开发思路准备
首先,我事先完全没有开发过微信小程序,但有一些前端基础,上手并不难(所以我并不是什么高手),在开发之前,我所设想的就是简单的flask后台加微信小程序前端,一种类似网站的架构 。至于数据库方面,由于之前都在用mongo,自己图方便写了一些操作数据库的函数,所以那就用mongo吧。
坑一、we.request的post请求数据异常(解决方案和原因)
关于这个异常,我上网百度了一哈,发现大家都说是请求头的原因修改请求头就好,但没人说为什么,作为一个学数学出身的人,不求甚解是罪恶的!于是我探索了起来。
在多方尝试以后,我大概知道了原因:
如果你的请求头和官方例子上的一样,
// An highlighted block
method: "POST",
header: {
'content-type': 'application/json',
},
那么小程序会以字节流的形式发送一个json数据流,后台就不可以通过表单获取的方式去拿这个数据,例如我用的flask框架,就应该是
data = json.loads(request.get_data().decode(‘utf-8’))
request.get_data()就是获取这个路由上接收到的所有数据,然后把这个字节流以json格式解码,就能得到正常的数据。
如果你把微信请求头改成:
// An highlighted block
method: 'POST',
header:{
'content-type':'application/x-www-form-urlencoded'
},
那么微信小程序会模仿浏览器向后台发送一个表单数据,这时候后台就可以照搬照套教程案例,以获取表单数据的方法获得小程序传送回来的数据。
如flask里就是
data = request.from[‘字段名’]
坑二、tabBar界面的切换,以及左上角返回键
这回是小程序的界面切换,小程序里自带有一个基本样式的底部导航栏,只要在app.json里添加
// An highlighted block
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "菜单"
},
{
"pagePath": "pages/wode/wode",
"text": "个人中心"
},
{
"pagePath": "pages/order/order",
"text": "购物车"
}
]
}
这个字段就有了一个极简风格的底部导航栏样式
但是,一个小程序的界面不仅这三个导航界面,而且在显示非导航栏界面的时候底部并没有导航栏,所以当你从非导航栏里的界面切换回去的时候要用wx.switchTo函数,关闭当前所有界面,返回导航栏界面。这时小程序左上角是没有返回键的。
坑三、微信小程序webSocket,巨坑
写完用户订餐程序,就该有配送端接收订单的程序。于是开启了webSocket之路。
根据flask-socketio的编写规则,大致就是配送员上线,连接socket,连接以后添加进以他用户名命名的room里,并且维持socket。一旦有订单,并且room里不空,便以socket.emit()的方法向指定配送员的room里发送这个订单,然后存储订单状态。大致上就是这个结构。
微信自带了一套所谓的好用的websocket接口,以下为官方的接口文档。
// An highlighted block
const socketOpen = false
const socketMsgQueue = []
wx.connectSocket({
url: 'test.php'
})
wx.onSocketOpen(function (res) {
socketOpen = true
for (let i = 0; i < socketMsgQueue.length; i++) {
sendSocketMessage(socketMsgQueue[i])
}
socketMsgQueue = []
})
function sendSocketMessage(msg) {
if (socketOpen) {
wx.sendSocketMessage({
data: msg
})
} else {
socketMsgQueue.push(msg)
}
}
乍一看,诶,还不错哦,于是我用了起来。我的后台是flask-socketio写的,并且用浏览器测试过,并没有啥子问题。。。然而,把我气的够呛,一开始这个api里没有涉及到事件名这个参数的时候我就很纳闷,(对于socketIom每一次消息都要指定事件,当有消息交互的时候,只有监听在这个事件上的socket才能收到消息)但是基于对微信api的信任,我还是这么写了,然而,服务器没反应,小程序也没反应,因此,告辞。
想到微信小程序编程是基于js的,那么我决定使用socket.io.js这个前端库去写小程序。彻底抛弃这个垃圾api。
const io = require("…/…/utils/weapp.socket.io.js")首先来这一句,注意这个socket.io.js文件就放在那个utils文件夹下,然后在你需要使用socketio的界面里声明这一句,这样,就可以像写网页前端一样写微信小程序的socket程序。
看着这个socket.on()函数内心就异常的舒畅!