【Chapter1】微信自带弹出框

文章目录

一、简介
二、弹出框
- 1、提示框
- - 1.1 显示提示框
  - 1.2 加载提示框
- 2、是否选择框
- 3、多项选择框
三、嵌套
四、遇到的问题

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

一、简介

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

二、弹出框

1、提示框

1.1 显示提示框

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

展示效果

js文件

第一种：显示成功

wx.showToast({title: '已举报',icon: 'success',duration: 1500, //显示的持续时间，单位为msmask: 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) {//打印出点击的选项框的indexconsole.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 + 1wx.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。