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

时间：2022-06-16 01:03:05

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

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

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.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)
    },

四、感谢关注小程序

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

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

标签：

相关文章