小程序开发填坑之路（三）

填过的坑

1、每次请求session的问题

小程序开发过程中，后台数据操作需要介入session的使用，然而小程序端每次数据请求session都会发生变化，从而导致服务器端返回结果达不到预想效果，那么如何让小程序每次请求都与服务器端的session对应起来那？这里就需要后端的配合，一般地我们都要用到openid（一般都是user存到session，user里面有openid），当获取openid得到时候，后台就产生session，这里的sessionId就应该传到小程序端当做全局变量存起来，每当有请求（后台逻辑有用到session的时候），那么小程序段请求应该在header里存入"Cookie": "JSESSIONID=" + app.globalData.sessionId请求过去，这样就能与后台逻辑对应起来，文字不好理解的话请看下面的代码演示：

当获取openid的时候，sessionId随之传过来

​​​​​​
    wx.request({

          url: URL + 'front/user/getOpenid',

          data: {

            js_code: res.code,

            grant_type: 'authorization_code'

          },

          header: {//请求头

            "Content-Type": "application/x-www-form-urlencoded"

          },

          method: 'POST',

          success: res => {

            this.globalData.openId = res.data.root[0].openid;//获取到的openid

            this.globalData.sessionKey = res.data.root[0].session_key;//获取到session_key

            this.globalData.sessionId = res.data.tip;

          },

          fail: function () {

            wx.showToast({

              title: '获取‘OPEN-ID’失败！',

              icon: 'none'

            })

          }

       })

当发生事件请求的时候

    wx.request({

        url: utilData.urlHead + '/front/album/insert',

        method: 'POST',

        data: {

            imgPath: res.imageURL,

            openid: app.globalData.openId

        },

        header: {//请求头

            "Content-Type": "application/x-www-form-urlencoded",

            "Cookie": "JSESSIONID=" + app.globalData.sessionId

        },

        success: function (res) {

            console.log("上传")

            console.log(res)

        },

        fail: function () {

            wx.showToast({

                title: '发生异常错误！',

                icon: 'none'

             })

         }

    })

2、wsx的使用：熟悉vue的同学应该都知道vue的过滤器机制，小程序的wsx和vue的filters差不多，使用原理也差不多，这里就不多介绍直接看演示代码就能理解，值得注意的地方是wsx别当做js用，一些js函数wsx是不能用的。

自己的wxs（filter.wxs）：

var filters = {

  findId: function (id, list) {

    var isExist = false

    if (!id) {

      return false

    }

    for (var i = 0; i < list.length; i++) {

      if (list[i] == id) {

        isExist = true

        break

      }

    }

    return isExist;

  }

}



module.exports = {

  findIdForChecked: filters.findId

}

在wxml里边使用：

//顶端引入filters.wxs

<wxs module="filters" src="../../utils/filters.wxs"></wxs>

    .... ....

<view class='have_img_item' wx:for="{{myImgList}}" wx:key="{{item.id}}">

    <view class='have_img_item_inner'>

        <image src='{{item.imgPath}}' mode='aspectFill'  data-obj='{{index}}' bindtap="clickImg"></image>

        <checkbox class="choose" value="{{item.id}}" checked='{{filters.findIdForChecked(item.id,choosedList)}}'/>

    </view>

</view>

    .... ....

其中choosedList是这个wxml对应的js文件里面的数据。