目标:分享微信小程序常用的功能,便于快速上手。
一、分享小程序某个页面到微信好友或群聊
onShareAppMessage(Object object)
监听用户点击页面内转发按钮(button 组件 open-type="share"
)或右上角菜单“转发”按钮的行为,并自定义转发内容。
注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮。
参数 | 说明 |
from | 转发事件来源。 |
target | 如果 |
webViewUrl | 页面中包含web-view组件时,返回当前web-view的url |
此事件处理函数需要 return 一个 Object,用于自定义转发内容,返回内容如下:
- title:为转发的文字宣传语,默认为小程序名称;
- path:resolve中的path路径为转发页面的路径;return中的path路径为微信好友点开分享的链接跳转到小程序页面的路径;resolve中的path路径后面可以追加传递的参数,可以在跳转页面中的onLoad生命周期函数中获取传递的参数;
- imageUrl:分享微信好友展示的图片,图片尺寸比例为5:4;
- promise:如果该参数存在,则以 resolve 结果为准,如果三秒内不 resolve,分享会使用上面传入的默认参数;
示例代码:
onShareAppMessage() {
let imagePath = "云图片路径";
const promise = new Promise(resolve => {
setTimeout(() => {
resolve({
title: '笑傲江湖工作室',
imageUrl: imagePath,
path: '/pages/home/home?userId=' + this.data.userId,
})
},2000)
})
return{
title:'幸运数字',
path:'/page/home/home?id=java',
promise
}
}
二、右上角菜单“分享到朋友圈”
注意:只有定义了此事件处理函数,右上角菜单才会显示“分享到朋友圈”按钮
自定义转发内容
事件处理函数返回一个 Object,用于自定义分享内容,不支持自定义页面路径,返回内容如下:
- title:朋友圈的显示文字标题,默认当前小程序名称;
- query:微信其他用户点击朋友圈链接进入小程序携带的参数,可不选,并在onLoad生命周期函数中获取传递过来的参数,自定义页面路径中携带的参数,如 path?a=1&b=2 的 “?” 后面部分;
- imageUrl:分享朋友圈展示图片,图片尺寸比例为1:1,可以是本地文件或者网络图片;
示例代码:
onShareTimeline(){
let fromUser = '笑傲江湖工作室'
return{
title: '双十一大促,入坑吗?',
query: 'fromUser=' + fromUser,
imageUrl: '图片路径'
}
}
三、下拉刷新、上拉加载
onPullDownRefresh()
监听用户下拉刷新事件。
- 需要在
app.json
的window
选项中或页面配置中开启enablePullDownRefresh
。 - 可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
- 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
onReachBottom()
监听用户上拉触底事件。
- 可以在
app.json
的window
选项中或页面配置中设置触发距离onReachBottomDistance
。 - 在触发距离内滑动期间,本事件只会被触发一次。
onPullDownRefresh() {
this.data.list = []
wx.showNavigationBarLoading() //在标题栏中显示加载圈圈
this.setData({
page: 0
}); //重置页码
api.infos().then(res => {
if (res.data.code == 200) {
setTimeout(function () {
wx.showToast({
title: '刷新成功',
icon: 'none',
duration: 1000
})
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
}, 1000)
} else if (res.data.code != 200) {
setTimeout(function () {
wx.showToast({
title: '刷新失败',
icon: 'none',
duration: 1000
})
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
}, 1000)
}
})
},
onReachBottom() {
let that = this; //防止this指向问题
if (!that.data.loading) {
that.setData({
loading: true, //加载中
loaded: false //是否加载完所有数据
});
}
//延时调用接口
setTimeout(function () {
that.infos();
}, 500)
},