19. 尚硅谷_微信小程序_收藏功能显示完成.avi原创

好来，我们还是把这些都给它关了，那这节课我们要整的是什么呢？是详情页里面这个东西，这有个点击收藏的功能，当然我先给大家演示一下这个。来，我们让他去跳转一下，大家看上来，这个我没有点击过，它应该是灰色的，而我一点击这个，注意看这有个提示。收藏成功对吧，一旦收藏成功了，这是不是高亮显示啊，然后我再点击呢，取消收藏，我再点一次收藏成功，哎，收藏成功以后你看着啊，我退出去。假如我浏览了某一天，我又进来了，他的状态还应该是收藏才对。能懂吗？OK，那接下来我们就来做这个功能。来到我们当前的项目，那这个呢，找到我们地图的结构收藏的按钮，我直接告诉大家是不是在这儿。

那这个时候你说我这写是哪张图片的写子吗？咱们默认什么就有灰色的啊，想要不是灰色的是不是应该把这个后缀去掉它我可以给大家演，哎，或者说我们在这演示一下，看一下这个我们找到图片下边。找到这个，这不是这个高亮的吗？就是说我收藏未收藏图片是不一样的，那这个时候你应该动态的去写它，所以呢，我来到GS里边，我先去定一个标识is，你们来个collect或者collected是否收藏过，它对应的值初始化应该是Bo。因为上来肯定是没有收藏的，那这个时候我把这个变量拿过来拿过来来到这边大家看着啊，那这就不能写死了吧。

懂我的意思吗？这不能写死，拿走它。嗯，拿倒它，哎，或者说再给大家说一种方式，在这我如果是拿走的话，我是不是可以用三元表达式，OK，那这是一种啊，我们再来看一个，大家看啊，我们数据绑定是不是讲了列表渲染模板事件引用是不是都有了，其实还有一个是不是叫条件渲染，其实这些我觉得大家自己应该是也能看懂，特别简单，微信if，那后边是不是跟的肯定是个布尔值。注意看。在框架中使用这个微信if，这个是个布尔值来判断是否需要确认该蛋白块，那如果说是if后面对应的值是处，它肯定是不渲染，如果是false呢？就不去啊。不是。嗯，OK，那这个时候其实我们可以用它来写一下，哎，这个特别像view里面，你比说比杠一啊，Else啊，或者是受之间，那这个时候看在这我还应该是需要一个image测对。

是不是俩，那这个时候这是两张图对吧，我先CTRLS一下。我们来看一下这两张图，现在应该是都有，但是呢，一次是不是只能显示一张，而他们谁显示谁不显示，应该是去判断一下才对，OK，那这个里边放的其实就是我们刚刚写那个is collected，注意我默认是false，这应该是干嘛取法才对。或者说我先写完来把这个判断呢给他也加上，那这样的话大家可以看一下。哦，这两个条件是不是都一样啊，我是不是应该有一个取法才对，你说给谁取反。

给谁取反就上来，你想看到谁？上面这个下面这个是不是上面这个黑色的一取反，它是不是为处啊，哎，CRLS我们来保存一下。来，走你。没问题吧，那其实大家可以在调试器这在这也能看，这不有AB data吗？这不是个变量吗？哎，在这的调试功能要比C那下面调试要好的多，你看这自动给了我一个，哎，这个单选按钮，我在这可以动态去修改这个值，现在这个放啊我一点是不是处，注意看界面的图片是不是已经变了，哎，触false，你在这可以去切换它，当然了，我们在这点肯定是不行的，你现在是不是应该是给在他身上点，我在他身上点是不是来切换这个图片的显示啊，OK，那我们要做的事情什么，给这两个图片绑定一个世界就完了。

来，我们来一个catch take，那这个呢，我们是处理这个handler collection，处理收藏，同样的这个世界是不是应该也给到这张。他俩都应该有这个事件才对，OK，那现在这个事件呢，我们来到GS这一块去定义一下啊，生命周期这些呢，哎，大家看下面这些，其实我们现在用不上，其实也好理解，接听用户下拉的动作，包括页面上拉触底。一个往下一个往上嘛，还有一个右上角分享是这个。这不有他吗？那这些现在我们用不上，其实我可以干嘛呢。这些就不要了，因为留着它呢，你每次写完后边这个函数后边还要加个逗号啊，现在我们不需要，那我把这个方法拿到这。

OK，那这个你说我上来我应该干什么事情啊。你是不是要动态去修改那个a collected的值啊，其实只是一步，就是取法，每次取反，然后给他修改那个值，所以呢，我可以这样写，Let is，哎，Collected。等于什么？This。直接是他们，嗯，不是啊，其实这个我上来给大家演示过吧，我说这个我们可以再看一下吧。有同学可能想的这个歌不用那个什么一模一样来打开。这不这个吗。

这个data塔里面肯定有吧，this.data塔下面是不是有这个，但是你看看这对象本身上有吗？没有一干二净啊，有同学想到那个是咱们在五里面他做了一个操作叫数据代理对吧，或者叫数据减持，是把唯有实力data中的数据是不代理到他实力本身上面，而在我们小程序里边没有这个，所以呢，我们在这要拿的话应该是this.data塔点is collected懂吗？那现在其实我可以直接做这样一个操作，我是不是上来就给他取反就完了，哎，把这conslo干掉，那取反了以后，接下来我们只需要做一件事情，就是去更新状态，我直接教他点set。哎，贝塔，OK，那在这儿，其实我直接就可以写它就完事了。

大家能理解吗？哎，这就是为什么我上来在这取反的原因，OK，那这个时候我们来看一下。点击跳转走走来是不是好了啊啊，接下来再做一个呃功能，这应该有个提示啊，这个想要提示的话，这个我们得去用它里边的一个API。怎么找呀，提示。这是不是有个界面来，第一个叫交互反馈，第一个叫收post显示消息提示框，注意里边是不是传一配置对象。又叫说明对象，OK，大家看一下，其实我们上来先用这两个应该就够了，开是提示的内容。有没有发现我刚呃，我们再来看一下吧，我这一点，这不有个取消收藏，有个收藏成功这个文本吗？哎，这个是得你自己去设置，而设置的选项就是title。

那么第二个IO指的是图标的意思吧，哎，那这是干嘛呢，看着。有效值有这三个，其实你们经常见的应该是这个啊，这个也见loading是什么意思啊，就是有个圆圈在转的那个，而这个success是不是成功的意思啊，就是我们刚刚看到的这个对勾。哎，所以呢，我们直接把这个拿过来吧。来来到我们当前的项目，那除了更新状态，我这应该是干嘛来提示用户，是这个方法里边传这个对象，我们自己写一下，它需要一个开Le，还有一个ile ile我们在这已经能确定了。是不是success啊，重点是这个title你能写什么，它是把根据是否收藏的状态来决定我的文本内容是什么啊，那这个时候我可以这样去写，Let，一个title等于什么？

这是么，就是最终收藏的状态啊，如果说他没错。怎么写，那不就是收藏，哎，这应该是成功，如果他没放呢，对，取消收藏，OK，那我这就不用动了。啊，不用动了，大家习惯了ES6的写法的话，有时候还是挺快的，那CTRLS我们保存一下。点击。走走对的吧，OK，没有问题，来，我再点击一次收藏。看上去好像做完了，那接下来大家看着我后退。

我再进来。它是不是又成了未收藏的状态啊？首先能不能明白为什么会这样？我们这收藏未收藏是根据我data塔中的这个变量来决定的吧？那你后退再进来，我当前的页面是不是要重新渲染它，是不是又读了一遍初始化的值？所以你这个值收藏还是未收藏，你应该去保存起来。下次再进来的时候，你是不是读一下你保存的值就行了。来啊，那这就是咱们接下来要讲的一个本地存储，OK，来，我先把这个停一下。