小程序开发总结

公司的一个小程序，也是个人开发的首款小程序。作个工作工作总结，聊聊踩过的坑。

小程序上手比较简单，API文档全面。但是由于经验不足还是有一些坑让我无法自拔TT。

小程序比较简单，主要功能有：列表、搜索、详情、个人中心、提现等功能。

问题一：setData()赋值；

如果是直接赋值给一个参数是比较简单的，但是如果涉及到赋值给某个数组或者是一个对象中的某个子集就不能直接赋值了；

总结两种异曲同工的办法：

//如要赋值给obj.name="name"或obj[i].name="name";
方法1.
let upData = this.data.obj;
upData.name = "newName" 或 upData[i].name="newName"(数组)
this.setData({
  obj:upData
})；
方法2.
let Obj = this.data.obj；
let upDataArr = `Obj[${i}].id`(更新数组)
this.setData({
    ['Obj.name']:"newName",
    [upDataArr]:"newName"
});

问题二：列表

列表渲染是比较简单的，主要问题是我登录和未登录的数据是不一样的（登录在另一页面），我刚开始的解决方案是首页在onShow(){}的時候重新加载列表，这样就可以拿到最新数据了；然后问题来了，如果从第二页的列表进入详情（详情有操作，操作完在列表会改变状态），则返回的时候又从第一页开始，且无法定位至刚刚的位置；

解决方案：在详情操作时通过 getCurrentPages() 获取页面桟，再便利出列表页进行列表便利，把对应id的列表手动改变状态，这样就可以在操作的同时改变列表的状态，同时设置了一个全局便利用于控制登录或登出的时候更新数据；

const wxCurrPage = getCurrentPages(); //获取当前页面的页面栈
for (let i in wxCurrPage) {
  if (wxCurrPage[i].route == "pages/index/index" || wxCurrPage[i].route == "pages/positionList/positionList") {
    let searchResult = wxCurrPage[i].data.searchResult;
    for (let j in searchResult) {
      if (searchResult[j].positionId == talentId && searchResult[j].isDelivery == 0) {
        let updata = `searchResult[${j}].isDelivery`
        wxCurrPage[i].setData({
          [updata]: 1
        });
      }
    }
  }
}

问题三：登录状态；

有些操作是需要登录之后才能继续（不是小程序的登录），我需要在点击的时候判断是否需要登录，如果需要则弹出登录框用微信登录（登录框做成了一个组件的形式引入）；

解决方案：用全局变量loginStatus来控制，需要登录的地方先做判断，如果没有登录则进行登录操作；

if(app.data.loginStatus){
  wx.navigateTo({
    url: '/pages/withdrawList/withdrawList'  //已登录
  })
}else {
  this.selectComponent("#login-dialog")._isLogin(); //未登录，进行登录
}

问题四：登录模态框被echart覆盖；

由于引入了百度的echarts控件，<canvas>的层级是最顶级的，所以会覆盖掉原来的模态框；

解决方案：每次弹框的时候隐藏控件，关闭弹框再显示出来；（T T好麻烦，暂时没有找到好的办法）；

猜你喜欢