小程序展示弹窗和页面分享

1、小程序展示弹窗

使用小程序的过程中经常会弹出一个弹窗,给用户传递提示信息。小程序中展示弹窗有四种方式:showToast () 、showModal () 、showLoading () 、showActionSheet () ,这些方法都是系统的 API,在用到时只需要调用对应的方法即可。

1.1 wx.showToast(Object object)

wx.showToast () 方法在调用时会在小程序上层弹出一个 消息提示框,具体的使用方式和参数可以查看 官方文档

<!--home.wxml、Toast-->
<button size='mini' bind:tap="handleShowToast">showToast</button>

<!--home.js-->
Page({
    handleShowToast(){
        wx.showToast({
            title:'标题',    <!--弹窗上显示的提示内容-->
            duration:'1500', <!--弹窗显示的时间,默认1500ms-->
            icon:'success',  <!--弹窗图标:success、loading、none,也可自定义图标,需要用到image属性--->
            image:"/assets/icon/picture.png",  <!--自定义图标的本地路径,image 的优先级高于 icon-->
            mask:true,       <!--在显示弹窗时,是否显示透明蒙层,防止触摸穿透-->
            success:function(){console.log('展示弹窗成功')},
            fail:function(){console.log('展示弹窗失败')},
            complete(){console.log('完成函数的调用')}    <!--是点击的一瞬间即时触发的-->
        })
    }
})

1.2 wx.showModal(Object object)

wx.showModal () 方法在调用时会在小程序上层弹出一个 模态对话框(含有确认、取消按钮),具体使用参考 官方文档

<!--home.wxml、Modal-->
<button size='mini' bind:tap="handleShowModal">showModal</button>

<!--home.js-->
Page({
    handleShowModal(){
        wx.showModal({
            title: '提示',                <!--提示的标题-->
            content: '这是一个模态弹窗',   <!--提示的内容-->
            showCancel:true,              <!--是否展示取消按钮,默认为true,如果设置为false,则模态框只显示确定按钮-->
            success:function(res) {
                if (res.confirm) {console.log('用户点击了确定')} 
                else if (res.cancel) {console.log('用户点击了取消')}
            }
        })
    }
})

1.3 wx.showLoading(Object object)

wx.showLoading() 方法在调用时会在小程序上层显示 loading 提示框需主动调用 wx.hideLoading() 才能关闭提示框,具体使用参考 官方文档该方法配合 wx.hideLoading() 一般用于发送网络请求。

<!--home.wxml、Loading-->
<button size='mini' bind:tap="handleShowLoading">showLoading</button>

<!--home.js-->
Page({
    handleShowLoading(){
        wx.showLoading({
            title: '正在加载',    <!--和 showToast() icon:loading 的显示效果一样-->
        }),                      <!--但是需主动调用 wx.hideLoading 才能关闭提示框-->
        setTimeout(() => {       <!--一般搞一个定时器,延时调用hideLoading()来关闭提示框-->
            wx.hideLoading()
        },1000)
    }
})

1.4 wx.showActionSheet (Object object)

wx.showActionSheet () 方法在调用时会在小程序底部上层显示 操作菜单。具体使用参考 官方文档

<!--home.wxml、ActionSheet-->
<button size='mini' bind:tap="handleShowActionSheet">showActionSheet</button>

<!--home.js-->
Page({
    handleShowActionSheet(){
        wx.showActionSheet({
            itemList:['相册','拍照'],    <!--按钮的文字数组,数组长度最大为 6-->
            success:function(res) {
                console.log(res),
                switch(res.tapIndex)    <!--tapIndex:用户点击的按钮序号,从上到下的顺序,从0开始-->
            }
        })
    }
})

2、小程序页面分享

分享是小程序扩散的一种重要方式,小程序中有两种分享方式:(1)点击右上角的菜单按钮,之后点击转发、(2)点击某一个按钮,直接转发。当我们转发给好友一个小程序时,通常小程序中会显示一些信息:这些信息通过 onShareAppMessage () 进行展示。

<!--home.js、方式一-->
Page({
    onShareAppMessage:function(options){    <!--该方法实现分享小程序-->
        return{
            title:'快来点击'              <!--转发的标题-->
            path:'/pages/about/about',    <!--转发路径,当别人点击你的分享时,跳转到指定路径-->
            imageUrl:'图片的地址'          <!--可以是本地或网络,如果不指定,则使用小程序当前页面-->
        }
    }
})

<!--home.wxml、方式二-->
<button size='mini' open-type='share'>分享</button>    <!--点击该按钮可直接选择好友-->
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值