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

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>    <!--点击该按钮可直接选择好友-->

yingjieweb

发布了188 篇原创文章 · 获赞 13 · 访问量 7227

私信关注