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