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

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

最近因为朋友的要求，需要一个客户端来实现网上订餐跑腿的功能，想着写个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()函数内心就异常的舒畅！

好了，这是我再csdn写的第一篇博客，我打算再写一下前段时间搞的神经网络。纪念一下。