ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 编程语言> 文章详细

小程序的list表单急速处理方式裂数据

2020-12-29 20:04:25  阅读：207  来源： 互联网

标签：www http cn tianya list 表单 急速 user const


这篇文章会很长，非常长，特别长，无敌长。

真的是挤牙膏般的项目进度，差不多是8月底有开始这个项目的想法，时至今日都1个多月了，抛去频繁的加班时间，王者时间，羽毛球时间...见缝插针的写这个项目，我竟然写完了，我竟然没有半途放弃，可真把我自己感动坏了。

好吧，主要是这个小程序很简单，本文会讲解一下这个小程序的代码，所有代码几乎是我一个个敲出来的，所有逻辑也是自己构思梳理的，因此很多实现方式并不是很好，冗余代码很多，代码质量堪忧，但我也在学习中，随着技术提升，会不断来重构代码，如果大家有任何建议欢迎私信我哦，特别感谢。

​

该小程序采用的云开发，没有自己搭建后端，我心目中，只要没有后端的内容我就觉得很简单。但其实我还是想有朝一日能自己独立完成前后端所有工作，写一个更棒的作品。

之前有写过几篇文章，可以回顾一下。你可能需要的文章：

天啦噜，看了半天代码发现还挺多，一时间不晓得该从哪里开始。那还是按照tab页使用逻辑顺序来吧。

启动页

之前文章也有过如何写一个启动页面。至于为什么需要个启动页呢？

我觉得主要也就两点，一个是好看，还有个就是添加获取用户信息类型按钮，间接引导用户授权获取用户信息。

至于为啥要获取用户信息？

曾真有段时间，我纠结了好久，因为我自己这个程序中，除了展示，好像也没啥需要用到这个数据的地方。

但我还是写了。

当前登陆用户的用户名和头像图片，通过 open-data 标签可以无需授权直接获取，只要指定相应类型userNickName和userAvatarUrl即可，样式只需要用view容器包裹起来进行设置。button按钮指定open-type为getUserInfo，在点击事件中就可以拿到授权之后的用户公开信息数据。

拿到用户信息需要保存到数据库中，也只需要首次登录的用户在授权之后才需要入库，所以加个判断当前登陆用户是否是首次登录，判断条件是每个用户的唯一值openId。

通过这个逻辑，那需要处理的可以分为如下几个：

1、获取当前登录用户的openId。

复制代码 
getOpenID() {
    let that = this;
    wx.cloud.callFunction({
        name: 'login',
        complete: res => {
            const openId = res.result.event.userInfo.openId;
            that.setData({
                openId
            })
        }
    })
},
复制代码

这个login云函数是项目构建时自动生成的，云函数写法：

复制代码 
const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
    env: wxContext.ENV,
  }
}
复制代码

 2、获取数据库中所有用户数据。

复制代码 
getUsersList() {
    const that = this;
    db.collection('users').get({
        success: res => {
            that.setData({
                usersList: res.data,
            })
        },
        fail: console.error
    })
},
复制代码

3、在页面刚加载的时候调用上面两个方法，拿到openId和userList。在点击按钮时，检查当前登录用户是否已经存在数据库。

复制代码 
goToIndex(e) {
    const that = this;
    const auth = e.detail.errMsg;
    wx.switchTab({
        url: '/pages/index/index',
    });
    if(auth === "getUserInfo:ok") {
        const avatarUrl = e.detail.userInfo.avatarUrl;
        const nickName = e.detail.userInfo.nickName;
        that.checkUser(nickName, avatarUrl);
    }
},
复制代码

这里获取到用户信息数据是这个样子滴：

​

4、检查当前登录用户是否已经存在数据库。

复制代码 
checkUser(name, url) {
    const that = this;
    const list = this.data.usersList;
    const openId = this.data.openId
    const ids = [];
    list.forEach((item) => {
        ids.push(item._openid);
    })
    if(ids.indexOf(openId) === -1) {
        that.setUserInfo(name, url)
    } else {
        return;
    }
},
复制代码

5、如果不存在的话，将该用户信息存入数据库users中。管它有用没用，先存着呗。

复制代码 
setUserInfo(name, url) {
    db.collection('users').add({
        data: {
            nickName: name,
            avatarUrl: url,
        }
    })
},
复制代码

数据库中会自动给这个字段生成一个id和openId。

​

首页

首页从上到下分为几块，轮播图，轮播告示，icon列表，推荐商品展示。

轮播图。

直接用自带的组件，swiper和swiper-item配合使用。

<swiper class="swiper-top" indicator-dots="true" indicator-active-color="#fff" autoplay circular>
  <swiper-item wx:for="{{bannersList}}" wx:key="item">
    <image mode="aspectFill" data-url="{{item}}" src="{{item}}" />
  </swiper-item>
</swiper>

图片数据来自数据中定义好的。

复制代码 
getBannerList() {
  db.collection('banners').get({
    success: res=> {
      this.setData({
        bannersList: res.data[0].imgs,
      })
    },
    fail: console.error
  })
}
复制代码

因为之前有小伙伴咨询过，如何云开发中数据库新建集合，这里用gif简单说明一下。

​

​

为啥要两个gif呢，因为超过300帧的它不给上传~

轮播告示。

和轮播图一样的，只是轮播方向不同，swiper中添加个参数 vertical。点击显示弹窗，引用的是WeUI库，咋用参考以往文章。

icon列表。

到这里就要用到本程序中最最最复杂的一个数据库集合了，几乎所有的商品数据都是存放在这个集合中的。

​

那icon列表就是获取goods集合中每个对象icon字段值，推荐商品列表就是每个对象中list数组中所有isHot为true的数据。

复制代码 
getIconList() {
  const that = this;
  const arr = [];
  db.collection('goods').get({
    success: res=> {
      const list = res.data;
      list.forEach((item) => {
        item.list.forEach((d) => {
          if(d.isHot) {
            const param = {
              ...d,
              categoryId: item._id
            };
            arr.push(param);
          }
        })
      })
      that.setData({
        categories: list,
        goodsRecommend: arr
      })
    },
    fail: console.error
  })
},
复制代码

给每个icon图片上加一个跳转到分类页的点击事件，一般的跳转可以使用wx.navigateTo，而tab页的跳转只允许使用wx.switchTab，官方文档中指明这个方法是不可以后缀参数的。

而我这里肯定是需要点击不同的icon跳转到不同的分类栏目中的，那就需要在跳转时候携带该分类id，还是当前这个数组的下标。

通过定义全局参数，可以解决wx.switchTab无法携带参数的问题。

app.js中，在onLaunch里定义个全局对象。

this.globalData = {
  categoryParamId: 0,
  categoryParamIndex: 0,
}

商品分类页

在menu.js中，在最开始需要引入全局变量。

const app = getApp()

那上面定义的globalData可以直接通过app拿到。

分类页这儿主要的处理逻辑有三块内容。

1、区分管理员权限和普通用户权限。

管理员权限可以有新增商品和删除的功能，普通用户只可以查看。

权限这块的处理应该会有更好的方案。

我比较挫，想到的最简单的方法就是利用openId来做过滤。在页面初次加载的时候获取当前用户的openId，和启动页一样的方法，只是回调函数中不一样。在数据库中定义个管理员集合，你需要给那些用户设置成管理员，将他们的openId放在这个集合中。

我是在app.js中获取这个管理员集合的，可能是刚刚尝过全局变量的甜头吧。

wx.cloud.database().collection('adminList').get({
    success: res => {
      this.adminList = res.data[0].admin_openId;
    },
})

那在menu.js中可以直接拿到这个adminList中数据，判断一下当前登录用户的openId在不在adminList中。

复制代码 
getOpenID() {
  let that = this;
  wx.cloud.callFunction({
    name: 'login',
    complete: res => {
      const openId = res.result.event.userInfo.openId;
      if(app.adminList.indexOf(openId) === -1) {
        that.setData({
          isAdmin: false
        })
      } else {
        that.setData({
          isAdmin: true
        })
      }
    }
  })
},
复制代码

2、将设置成喜欢状态的商品数据存入本地缓存。

当时对于这个逻辑处理的考虑也是想了蛮久，这个小程序的制作出发点只是作为一个助手作用，方便用户查看店铺所有商品，是做一个商品分类展示的功能，不支付线上下单，主要也是因为显示下单这个功能太复杂，个人小程序没权限做。

那我就想着仅仅分类展示并不满足使用，加入个喜欢列表实用性更大。

商品的固定数据是可以存入云开发的数据库中，但是针对于每个用户不同的喜欢数据，最好的方案就是使用缓存。

localStorange的数据形式是key / value，一开始计划的是固定一个key，value中是个数组对象。    

这一定是可行的，但我不会做......麻烦能实现的朋友私信我。

好的方案来不了可以来挫的嘛。我用商品的分类Id和当前商品Id拼接起来作为key，这就保证了key唯一性，那存入本地的数据是需要在喜欢列表展示的，我需要展示的数据有分类Id，id，商品名，是不是喜欢，封面缩略图，价格。明白了这几点要求，实现就很简单了。

在每个商品的爱心图标上加一个点击事件。

复制代码 
joinFavorites(e) {
  const that = this;
  const id = e.currentTarget.dataset.id;
  const index = e.currentTarget.dataset.index;
  const list = this.data.goodsList[this.data.curIndex].list;
  const loveList = [];
  list.forEach((item) => {
    if (item.id === id) {
      item.isLove = !item.isLove;
    }
    const param = {
      categoryId: this.data.curNav,
      id: item.id,
      name: item.goodsName,
      isLove: item.isLove,
      thumbnail: item.imgs[0],
      price: item.newPrice
    };
    loveList.push(param);
  })
  that.setData({
    goodsList: this.data.goodsList,
  })

  // 缓存的key以分类id和服装id用-连接
  const key = loveList[index].categoryId + "-" + loveList[index].id;
  this.saveLocally(key, loveList[index]);
},
// 存入本地缓存
saveLocally(key, data) {
  wx.setStorage({
    key,
    data,
  })
},
复制代码

现在看这个代码，我觉得还是可以再重构优化的更好的。

3、从本地缓存中获取喜欢列表详情

有些商品是已经加入喜欢列表的，商品上的喜欢图标已经是高亮状态，等到下次进入该分类页，就应该将之前设置喜欢状态的商品显示出来，不然每次进来都是初始的模样就毫无意义了。

首先是需要获取商品列表数据，再根据本地缓存数据，将喜欢的商品数据修改一下状态。

这样就是分三步走。

获取商品列表数据。

复制代码 
getGoodsList() {
  const that = this;
  db.collection('goods').get({
    success: res => {
      const list = res.data;
      that.getDetails(that.data.storageData, list);

      that.setData({
        goodsList: list,
      })
    }
  })
},
复制代码

读取缓存数据。

复制代码 
getLocally() {
  const that = this;
  wx.getStorageInfo({
    success(res) {
      if (res.currentSize > res.limitSize) {
        that.setData({
          isDialog: true
        })
      } else {
        that.setData({
          storageData: res.keys
        })
      }

    },
  })
},
复制代码

从本地缓存中获取喜欢列表详情。

复制代码 
getDetails(localArr, goodsList) {
  const that = this;
  localArr.forEach((localItem) => {
    const itemPId = localItem.split("-")[0].toString();
    const itemId = localItem.split("-")[1].toString();
    goodsList.forEach((goodItem) => {
      if (itemPId === goodItem._id) {
        goodItem.list.forEach((item) => {
          if (itemId === item.id.toString()) {
            wx.getStorage({
              key: localItem,
              success(res) {
                item.isLove = res.data.isLove
                that.setData({
                  goodsList,
                })
              }
            })
          }
        })
      }
    })
  })
},
复制代码

主要的处理逻辑就是以上这三块。还有些其他的交互方法，商品分类的切换，详情页跳转，商品删除......这些就不写了，可以去看代码，都很容易理解的。

http://wenda.tianya.cn/user/143539169/elite

http://wenda.tianya.cn/user/143539169/voted

http://wenda.tianya.cn/user/143539169/followed

http://www.tianya.cn/143539169

http://www.tianya.cn/143539169/info

http://www.tianya.cn/143539169/album/page/1

http://wenda.tianya.cn/user/143539195/elite

http://wenda.tianya.cn/user/143539195/voted

http://wenda.tianya.cn/user/143539195/followed

http://www.tianya.cn/143539195

http://www.tianya.cn/143539195/info

http://www.tianya.cn/143539195/album/page/1

http://wenda.tianya.cn/user/143539220/elite

http://wenda.tianya.cn/user/143539220/voted

http://wenda.tianya.cn/user/143539220/followed

http://www.tianya.cn/143539220

http://www.tianya.cn/143539220/info

http://www.tianya.cn/143539220/album/page/1

http://wenda.tianya.cn/user/143539251/elite

http://wenda.tianya.cn/user/143539251/voted

http://wenda.tianya.cn/user/143539251/followed

http://www.tianya.cn/143539251

http://www.tianya.cn/143539251/info

http://www.tianya.cn/143539251/album/page/1

http://wenda.tianya.cn/user/143539107/elite

http://wenda.tianya.cn/user/143539107/voted

http://wenda.tianya.cn/user/143539107/followed

http://www.tianya.cn/143539107

http://www.tianya.cn/143539107/info

http://www.tianya.cn/143539107/album/page/1

http://wenda.tianya.cn/user/143539168/elite

http://wenda.tianya.cn/user/143539168/voted

http://wenda.tianya.cn/user/143539168/followed

http://www.tianya.cn/143539168

http://www.tianya.cn/143539168/info

http://www.tianya.cn/143539168/album/page/1

http://wenda.tianya.cn/user/143539186/elite

http://wenda.tianya.cn/user/143539186/voted

http://wenda.tianya.cn/user/143539186/followed

http://www.tianya.cn/143539186

http://www.tianya.cn/143539186/info

http://www.tianya.cn/143539186/album/page/1

http://wenda.tianya.cn/user/143539203/elite

http://wenda.tianya.cn/user/143539203/voted

http://wenda.tianya.cn/user/143539203/followed

http://www.tianya.cn/143539203

http://www.tianya.cn/143539203/info

http://www.tianya.cn/143539203/album/page/1

标签：www,http,cn,tianya,list,表单,急速,user,const
来源： https://www.cnblogs.com/568788jdfjj/p/14208407.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有