首页 > 编程语言 >微信小程序常用功能:分享、转发、更新

微信小程序常用功能:分享、转发、更新

时间:2023-03-25 10:33:20浏览次数:36  
标签:title 微信 页面 刷新 path 分享 转发 wx

目标:分享微信小程序常用的功能,便于快速上手。

一、分享小程序某个页面到微信好友或群聊

onShareAppMessage(Object object)

监听用户点击页面内转发按钮(button 组件 open-type="share")或右上角菜单“转发”按钮的行为,并自定义转发内容。

注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮。

参数

说明

from

转发事件来源。 button:页面内转发按钮; menu:右上角转发菜单

target

如果 from 值是 button,则 target 是触发这次转发事件的 button,否则为 undefined

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.jsonwindow选项中或页面配置中开启enablePullDownRefresh
  • 可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
  • 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onReachBottom()

监听用户上拉触底事件。

  • 可以在app.jsonwindow选项中或页面配置中设置触发距离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)
    },

四、感谢关注小程序

微信小程序常用功能:分享、转发、更新_自定义_02

微信小程序常用功能:分享、转发、更新_自定义_03

标签:title,微信,页面,刷新,path,分享,转发,wx
From: https://blog.51cto.com/kinloly/6148920

相关文章