【Chapter1】微信自带弹出框

最近用了一周写了一个仿知乎的小程序，将会陆续整理，包括前端页面设计与后端逻辑、数据库和云函数操作等，以及自己遇到的坑。之前也没有学过javascript和数据库，css和html大概知道，用了一天看数据库、php、vue，后来为了设计美观，用一早上看css和html，就可以开始做了，所以算是零基础的新手训练哦。感兴趣就关注吧

一、简介

微信小程序自动几种弹出框，方便有用，以下做介绍

二、弹出框

1、提示框

1.1 显示提示框

常见的场景，在某项操作之后，提示一段文字，持续一小会后消失（注意：不得超过12个字节，6个汉字）

展示效果

js文件

第一种：显示成功

wx.showToast({
   title: '已举报',
   icon: 'success',
   duration: 1500, //显示的持续时间，单位为ms
   mask: true,
    })

第二种：显示失败

 wx.showToast({
    icon: 'none',
    title: '失败',
    duration: 1500,
    mask: true,
    })

其他：还有禁止 forbidden、取消 cancel，文字text，但是没有用到，有兴趣可以试试

1.2 加载提示框

//显示加载图标
wx.showLoading
wx.showLoading({
  title: '加载中',
})

//计时2秒之后隐藏该框
setTimeout(function () {
  wx.hideLoading()
}, 2000)

也可以在onLaund（）里写上加载，在onReady（）写上隐藏加载，但是慎用，之前用过，有时会出现一直加载的情况，因为被其他操作影响，这里就不细说了。

2、是否选择框

常见的场景，在某项操作之后，提示一段文字，需要选择“确定”或者“取消”

展现效果

js文件

wx.showModal({
   title: '举报',  //这里自由发挥
    content: '维护健康言论环境', //这里自由发挥
    success(res) {
      if (res.confirm) {
        console.log('用户点击确定')
        //做某事
        
       
      } else if (res.cancel) {
        console.log('用户点击取消')
         //做某事
         
      }
    }
  })

wxml
这里我绑定一个按钮点击事件，很简单自由发挥

3、多项选择框

常见的场景，在某项操作之后，在底部弹出多个选项

展现效果

js文件

setOrder: function (e) {
      var itemList = ['按时间顺序', '按评论数量', '按点赞数量', '按收藏数量'] //这里是选项框内容，最多六个
      wx.showActionSheet({
        itemList: itemList,
        success: function (res) {
        //如果不是选择点击取消
          if (!res.cancel) {
          	//打印出点击的选项框的index
            console.log(itemList[res.tapIndex])
            //如果选择第1个选项
            if (res.tapIndex == 0) {
            	//做某事
            	//比如跳转页面，修改数等等
            }
            //如果选择第2个选项
            else if (res.tapIndex == 1) {
              //做某事
              
            }
            //如果选择第3个选项
            else if (res.tapIndex == 2) {
              //做某事
              
            }
            //如果选择第4个选项
            else {
              //做某事
              
            }
          }
        }
      })
    }

wxml
我这里是在一个按钮里加 bindtap=“setOrder”，也就是点击事件绑定了setOrder这个函数。

三、嵌套

可以在多项选择框之后，选择完成，显示其他提示框，自由组合，尝试一下吧
比如这是我写的一个多项选择框，选中框之后又会出现是否选项框、提示框。这里只是举个例子，代码不必细读。

showFunc:function(e){
    var itemList = ['写回答','关注话题', '举报']
    wx.showActionSheet({
      itemList: itemList,
      success: function (res) {
        if (!res.cancel) {
          console.log(itemList[res.tapIndex])
          //写回答
          if (res.tapIndex == 0) {
            wx.navigateTo({
              url: '../writeComment/writeComment',
            })
            console.log('【跳转页面】添加评论')
          }
          //关注话题
          else if (res.tapIndex == 1) {
            app.globalData.watchNum = app.globalData.watchNum + 1
            wx.showToast({
              title: '已关注',
              icon: 'success',
              duration: 1500,
              mask: true,
            })
            wx.cloud.callFunction({
              name: 'runDB',
              data: {
                type: "update", //指定操作 
                db: "shanHuQuestion", //指定操作的数据表
                indexKey: app.globalData.id,
                data: { //指定insert的数据
                  watchNum: app.globalData.watchNum
                }
              },
              
              success: res => {
                console.log('[云函数] [updateDB] 已增加信息', res)
                console.error('【关注问题】 成功：')
                console.error('【数据库添加个人收藏】 成功：', res)
                const pages = getCurrentPages()
                const perpage = pages[pages.length - 1]
                perpage.onLoad()
                console.log('刷新页面')
                console.error('【关注问题】 成功：')
              },
              fail: err => {
                console.error('[云函数] [updateDB] 增加失败', err)
              }
            })

            const db = wx.cloud.database()
            db.collection('watch').add({
              data: {
                questionID: app.globalData.id,
                sendTimeTS: Date.now(),
              },
              success: res => {
              },
              fail: err => {
                wx.showToast({
                  icon: 'none',
                  title: '失败',
                  duration: 1500,
                  mask: true,
                })
                console.error('【关注问题】失败：', err)
              }
            })
           
          }
          else{
            const db = wx.cloud.database()
            db.collection('juBao').add({
              data: {
                jubaoID: app.globalData.id,
              },
              success: res => {
                wx.showModal({
                  title: '举报',
                  content: '维护健康言论环境',
                  success(res) {
                    
                    if (res.confirm) {
                      
                      console.log('用户点击确定')
                      wx.showToast({
                        title: '已举报',
                        icon: 'success',
                        duration: 15000,
                        mask: true,
                      })
                    } else if (res.cancel) {
                      console.log('用户点击取消')
                    }
                  }
                })
              },
              fail: err => {
                icon: 'none',
                console.error('【举报问题】失败：', err)
              }
            })
          }
        }
      }
    })
  },

四、遇到的问题

1、在电脑端测试的时候，提示框的持续时间duration无效，一闪而过，但是在真机测试时有效果的。

2、提示框之后加页面跳转，提示框无效，一闪而过。因此可以使用setTimeout

setTimeOut(function() {
    //比如delay多少时间之后跳转页面，
    //但是这里的跳转要使用reLaunch，而不能navigateTo
}, delay)

3、在提示框内或者选型框内无法进行this.setData()操作，任何赋值的操作都不行。比如用var tempt =0，tempt = tempt+1，跳出提示框console.log（tempt），tempt依旧为0。