微信小程序入门级教程-06

前言

  最近都全身心的放在了webpack的使用上，小程序这边就放在了一边，最近空余时间又开始回归小程序的教学了，记得上节课我们说的是缓存，上上节课讲了如何收藏文章，分享的功能没有讲，咱们这里接着这里继续，做分享的功能。

回顾上上节课

目录

https://www.jianshu.com/p/9c9b555b52e8

交互反馈的应用

  关于收藏，做的时候没有使用交互反馈，想的就是这个操作没什么成本，也不需要提示什么，自己就能看出来，所以在这里，开始做分享了，我就把交互反馈都给大家介绍下。

第一步：

咱们先给分享这个图片按钮加一个点击事件，如下所示：

第二步：

使用 " 操作菜单 " ，咱们这节课的第一个交互反馈，代码如下：

share: function(){
      wx.showActionSheet({
        itemList: [
          "分享到QQ",
          "分享到微信好友",
          "分享到朋友圈",
          "分享到新浪微博"
        ],
        itemColor: "skyblue",
        success: function (res) {
          console.log(res.tapIndex);  
        }
      })
    }

在这里，wx.showActionSheet({})就是操作菜单的方法，itemList是菜单子项，而itemColor是菜单子项的文字颜色，而success不用说，大家也知道，就是点击的回调函数，该函数有一个参数，返回的是咱们点击菜单的具体参数；该参数主要有一个参数很重要，就是tapIndex，他是什么呢？他就是返回你点击的菜单子项的index，具体效果如下：

菜单点击效果

第三步：

在上面，我们可以实现弹出操作菜单了，那我们也可以获得点击的是哪一个子项，接下来，我们就开始使用第二种交互反馈，询问框，这样子，我们每分享一次，都让用户确认一次，无论实际上要不要这么做，咱们这里都介绍一下，如下所示：

success: function (res) {
// res.cancel 用户是否点击了取消按钮
// res.tapIndex 点击的操作菜单索引
  var toast = [
    "你确定要分享到QQ吗？",
    "你确定要分享给微信好友吗？",
    "你确定要分享到朋友圈吗？",
    "你确定要分享到新浪微博吗？"
  ]
  wx.showModal({
    title: toast[res.tapIndex],
    content: '咱们今天讲的是交互反馈，这个很常用！',
  })
}

效果如下：

询问框交互反馈

注意：

  1. 大家可能发现了，在小程序中，询问框等操作交互的确定都是在右边，而左边都是取消，其实这个是有依据的，而且是根据心理学设计的，所以大家不必纠结，在IOS中，都是这种做法，而在Android中，都是确定在左，取消在右，而WEB端中和Android是差不多的，所以大家不必深究。
  2. 关于上节课中，我们讲解了异步和同步缓存机制，在这里，我主要推荐大家用同步，能用同步就用同步吧，用异步的话容易造成代码不好解读，但是也不是一味的让大家只用同步，这个要根据自己的项目需求来，异步和同步的优缺点有什么呢？如下所示：

同步：

代码执行，立即返回结果，会造成代码不会往下继续执行，要等待同步方法执行完毕，才会继续往下，造成阻塞，好处就是代码解读容易，流程清晰，不易犯错。

异步：

执行异步操作，代码继续往下执行，等异步操作执行完毕便会通过回调函数继续操作，不会阻塞异步方法下的代码块，缺点就是代码思路容易混淆，尤其是异步操作不止一层，或许几个嵌套方法中都有同步和异步需求，如果自己对异步同步很了解，那就可以随心所欲的用，如果不是特别清楚，建议大家尽量使用同步操作。

后言

  这节课咱们就讲了交互反馈中的两种方式，还有一个常用的就是基本的弹框，之前也讲过，所以这篇文章中就不必再讲解了，还不会的同学可以看看wx.showToast({})用法即可，特别简单。下节课咱们就要讲解音乐播放器了！开心吗大家？哈哈哈哈，反正我是挺开心的，继续学习，继续继续！

项目源码：demigod-liu / douban-movies

说明

原创作品，禁止转载和伪原创，违者必究！