关于微信小程序开发遇到的坑...

最近应朋友的要求，需要一个客户端实现在线订餐和跑腿的功能。我觉得写一个APP有点麻烦，要准备苹果和安卓两个版本，于是就想到了微信小程序。下面就说说我在开发过程中遇到的坑。

开发思路准备

首先，我之前没有开发过微信小程序，但是有一些前端基础，入门不难（所以不算专家）。开发之前我设想的就是简单的后端加微信小程序前端，类似网站的架构。至于数据库，因为之前用过，为了方便，写了一些数据库操作函数，就直接用了。

陷阱一：we.的post请求数据异常（解决办法及原因）

我百度了一下这个异常，大家都说是请求头的问题，修改一下就可以了，就是没人说为什么。作为一个数学专业出身的人，不搞清楚这个真是罪过啊！于是我开始探索。

尝试了很多方法后，终于找到原因：

如果你的请求头跟官方示例一样，

// An highlighted block method: "POST", header: { 'content-type': 'application/json', },

然后小程序会以字节流的形式发送json数据流，后端无法通过表单获取的方式获取到这个数据，比如我用的框架应该是

数据 = json.(.().('utf-8'))

.()是获取此路由接收到的所有数据，然后解码出JSON格式的字节流，得到正常的数据。

如果将微信请求头改为：

// An highlighted block method: 'POST', header：{ 'content-type':'application/x-www-form-urlencoded' },

然后微信小程序就会模仿浏览器发送一个表单数据给后台，这时候后台就可以照搬教程的案例，通过获取表单数据的方法获取小程序发回来的数据了。

例如

data = .from['字段名称']

陷阱二：界面切换和左上角的返回按钮

这次是小程序的界面切换，小程序自带基础样式底部导航栏，在app.json中添加即可

// An highlighted block "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "菜单" }, { "pagePath": "pages/wode/wode", "text": "个人中心" }, { "pagePath": "pages/order/order", "text": "购物车" } ] }

此字段具有简约的底部导航栏样式

但是一个小程序界面不仅仅有这三个导航界面，在显示无导航栏界面的时候底部也是没有导航栏的，所以从无导航栏界面切换回来的时候需要使用wx.函数关闭当前所有界面，回到导航栏界面，此时小程序左上角是没有返回按钮的。

陷阱三：微信小程序，一个巨大的陷阱

写完用户订餐程序，还要有一个送货方接单的程序。于是路就开始了。

按照-的写法规则，外卖员上线、连接，连接后被添加到以其用户名命名的房间，并进行维护。一旦有订单，且房间不空，就使用.emit()方法将订单发送到指定外卖员的房间，并保存订单状态。大致就是这个结构。

微信自带了一套所谓好用的接口，下面是官方的接口文档。

// 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) } }

乍一看还不错，就上手用了。我的后端写好了——而且我用浏览器测试了一下，一点问题都没有。。。但是，我真的被气到了。刚开始看到这个API没有涉及到事件名参数（每条消息都要指定一个事件，有消息交互时，只有监听这个事件的才能收到消息）的时候，我很纳闷。但基于对微信API的信任，我还是这么写了。但是，服务器没反应，小程序也没反应，就此作罢。

考虑到微信小程序是基于js的，所以决定使用.io.js这个前端库来编写小程序，彻底抛弃这个垃圾api。

io = ("…/…//..io.js") 首先来这句。注意.io.js文件放在那个文件夹下，然后在需要使用的接口里声明这句。这样，你就可以像写web前端一样写微信小程序了。

看到这个.on()函数就让我感觉舒服极了！

好了，这是我在csdn上的第一篇博文，打算把前段时间做的神经网络写一下，以资纪念。