qbittorrent container 改共享文件_微信小程序开发入门之共享账本（七）

微信小程序开发入门之共享账本(七)

接着上一篇

第七篇讲组件，但是在此之前先说下上一篇的一个问题

第六篇讲到记录用户的信息，看起来没啥问题，但是如果在第一次授权成功并且添加信息也成功后，手动取消授权，然后再授权，就会在user里有同一个用户的两条记录

这是因为没有给user加索引

索引是数据库用来提高查询效率的一个或多个字段，如果指定索引是唯一的，那么就不允许集合中出现两条索引相同的数据

我们的openid是唯一的，所以可以用来做唯一索引

点击最上面的[索引管理]

点击[添加索引]

输入索引名称，勾选[唯一]，因为我们要设置一个唯一索引

然后填上用哪个字段做索引，这里是openid

然后不出意外右上角会弹出一个错误信息

这是因为数据库在更新索引的过程中发现集合里已经存在两条一样的openid了，只需要回到数据库界面把所有数据删掉就行，然后再回来添加索引，添加成功后可以看到在默认的唯一索引上新增了一个我们定义的

添加索引之后，我们的首次授权登录没问题，但是如果将授权信息清除再授权就会导致添加失败的情况

这正是因为索引的唯一性的限制

所以我们还要改一下登录的云函数login，代码修改如下

let user = event.user user.openId = event.userInfo.openId let r = await db.collection('user').where({ openId:user.openId }).get() if(r.data.length > 0){ return r.data[0] } else { return await db.collection('user').add({ data: user })}

获取用户信息和openId的部分没变，后面我们先用get方法去查询是否已经存在相同openId的记录，用where来指定查询条件，查询结果的结构目前如下

{ data: [ { _id: '57964ec45d***8020a74095f5b3a13', acctBooks: [], avatarUrl: '', joinTime: '2019-10-22T11:25:59.001Z', name: '***', openId: '************' } ], errMsg: 'collection.get:ok'}

然后对结果进行判断，如果data的长度大于0，也就是已经存在数据，就将查询的结果返回，否则新增一条记录并返回

这样就解决了重复授权的问题

---

现在讲组件

今天写新增记录组件的第一页

但是我们先不用组件，照常完成今天的代码

算了，还是直接上组件吧，不想用的可以回头自己试试

所谓组件，就是把独立可复用的功能拆分出来，或者用来把复杂庞大的页面拆分成几个小的部分，这些部分耦合性低并且更加容易维护

找到component文件夹，在images文件夹上面，右键新建目录newBillSteps，然后在newBillSteps上右键新建组件newBillSteps

完成结果如下

打开newBillSteps.wxml，删除原有内容，添加如下代码

支出类型 收入类型 {{item}} {{item}} 上一步 下一步 

看着挺多，来拆解一下

首先是最外层的container，container里面分两部分：step和control

先看比较简单的controls，这是两个固定在container最下面的控制按钮，控制新增记录步骤的上一步和下一步

type='default'的按钮是正常的灰白色，primary是绿色，只有样式的区别而已

然后再看step，step中也包含了两个部分：titleContainer和content，titleContainer包含了两个标题，用来切换记录类型是支出还是收入，以及后续步骤中的金额和详细信息

content也包含了两个部分：tagChosed和tagPool

是不是像极了俄罗斯套娃

tagChosed是展示已经被我们选取的记录类别

tagPool是所有备选的类别

tagChosed和tagPool都用到了前面提到过的wx:for用法，wx:key关键字是用来指定循环列表的每一项的唯一标识，针对需要变动的列表可以提高渲染效率，key不变的项目不用重新渲染，这里的例子其实并不需要，但是不加的话控制台总是会有个warning(没错，之前index.wxml里的for循环就会一直有)

data-tag是给每一项加附加信息，这里我们传入每一个类别的名称，方便后面使用

bind:tap为每个类别项增加一个点击事件，事件名为selectTag

再看newBillSteps.wxss，添加以下样式

.container { width: 100%; height: 100%;}.controls { margin-top: 4px; display: flex; justify-content: space-between; align-items: center;}.controls button { flex: 1; display: inline-block; margin: 0px 2px;}.step { width: 100%; height: 100%;}.titleContainer { display: flex; justify-content: center; align-items: flex-end; height: 12%;}.title { display: flex; justify-content: center; align-items: center; width: 200rpx; height: 100%; border: 1px solid black; border-radius: 0px; border-top-left-radius: 6px; border-top-right-radius: 6px; background-color: whitesmoke; padding: 0px; margin-bottom: 0px;}.content { position: absolute; left: 0px; width: 100%; height: 88%; border: 1px solid black; border-radius: 4px; margin-top: -1px; background-color: whitesmoke; display: flex; justify-content: center; align-items: center; flex-direction: column;}.tagChosed, .tagPool { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}.tagChosed { width: 80%; height: 25%; min-height: 48px; border-bottom: 1px solid rgba(0, 0, 0, 0.336); border-radius: 6px;}.tagPool { justify-content: space-around; width: 90%; height: 70%; overflow-y: scroll;}.tagPool::-webkit-scrollbar { display: none;}.tag {display: flex; justify-content: center; align-items: center; width: 25%; border: 1px solid black; border-radius: 6px; padding: 0px;}.tagChosed > .tag { height: 55%; margin: auto;}.tagPool > .tag { height: 24%; margin-left: 2%;}.tagChosed input { align-self: flex-end; margin-left: 12px;}

都是各种基础样式的组合，这里不过多讲了，有什么疑问发出来大家一起讨论下

最后看下newBillSteps.js文件

首先是data中增加了两个字段

data: { payTagPool: ['吃喝', '购物', '学习', '娱乐', '交通', '生活', '旅途', '未知', '其他'], payTagChosed: [],}

作用刚刚已经提到过了

还有一个就是methods中添加一个方法

selectTag(e) { let temp = [] temp.push(e.currentTarget.dataset.tag) this.setData({ payTagChosed: temp })}

功能是取点击的tag的附加信息(即data-*中传入的值)添加到payTagChosed数组里

保存并运行代码(这里把之前mockData生成的数据注释掉了，显得干净些)

今日份开发完成