微信小程序通过uni-app进行全局分享

 更新时间:2021年11月22日 17:26:26   作者:虚乄  
这篇文章主要介绍了微信小程序通过uni-app进行全局分享,小编觉得挺不错的,现在分享给大家,需要的朋友可以收藏下

实际使用中,经常需要小程序分享到好友或者朋友圈,一般而言是一个个页面去设置。

官网分享介绍:https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage

单页面每一个需要分享的页面多需要单独写上

copyexport default {
//发送给朋友
  onShareAppMessage(res) {
    if (res.from === 'button') {// 来自页面内分享按钮
      console.log(res.target)
    }
    return {
      title: '自定义分享标题',
      path: '/pages/test/test?id=123'
    }
  },
  //分享到朋友圈
  onShareTimeline(res) {
     return {
      title: '自定义分享标题',
      path: '/pages/test/test?id=123'
    }
  }
}

重复代码不说,还特别容易搞混,一不小心就漏掉参数忘记修改。

分享参数配置介绍:

全局分享

减少每个页面重复代码,全局设置分享代码。

先在更目录下创建utils文件夹下,创建wxShare.js

创建成功后在mian.js中导入该wxShare.js

//分享设置
import share from './utils/wxShare.js'
Vue.mixin(share)

wxShare.js简介

创建一个页面基础js,包含data,onShareAppMessage,onShareTimeline三个即可

data:分享参数设置:可以参考最开始的配置图

onShareAppMessage:分享到微信好友配置

onShareTimeline:分享到朋友圈配置

copyexport default {
    data() {
        return {
            share: {
                // 转发的标题 (默认标题)
                title: '默认标题--分享标题',
                // 默认是当前页面,必须是以‘/'开头的完整路径
                path: '',
                //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,
                //支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
                imageUrl: ''
            }
        }
    },
    // 发送给朋友
    onShareAppMessage(res) {
         return {
          title: '发送给朋友',
          path: '/pages/test/test'
        }
    },
    //分享到朋友圈
    onShareTimeline(res) {
         return {
          title: '分享到朋友圈',
          path: '/pages/test/test'
        }
    }
}

到次一个最基本的全局分享已经完成,细心的朋友可能会发现data里面的参数没有使用上,而且每一个分享出去的参数全部是固定的,不能动态的去配置,和理想中的全局分享差别是很大的

getCurrentPages()函数

getCurrentPages()函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

注意: getCurrentPages()仅用于展示页面栈的情况,请勿修改页面栈,以免造成页面状态错误。

官网介绍:https://uniapp.dcloud.io/collocation/frame/window?id=getcurrentpages

优化onShareAppMessage分享给朋友

copy// 发送给朋友
onShareAppMessage(res) {
    // 获取加载的页面
    let pages = getCurrentPages(),
        // 获取当前页面的对象
        view = pages[pages.length - 1];
    //分享的页面路径
    this.share.path = `/${view.route}`;
    //转发参数
    return this.share;
},

动态获取页面路径,在分享出去。

当下有一个比较明显的问题,小程序的标题目前没有方式直接获取。

设置页面分享标题

找到一个曲线救国的方法,在每一个页面需要分享的页面动态设置标题

copyexport default {
    onLoad() {
        /*
            在要分享的页面 生命周期中  设计当前页面分享标题
             this.share 为获取 wxShare.js中的定义的share数据
        */
       this.share.title = "当前页面分享标题"
    },
}

效果展示

button分享到好友

  页面中放置的分享按钮(<button open-type="share">

  代码与上面并无区别,只是有一个单独的区域给配置参数。

copy// 发送给朋友
onShareAppMessage(res) {
    // 来自页面内的按钮的转发
    if (res.from == 'button') {
        console.log("按钮转发--配置");
    } 
    // 获取加载的页面
    let pages = getCurrentPages(),
        // 获取当前页面的对象
        view = pages[pages.length - 1];
    //分享的页面路径
    this.share.path = `/${view.route}`;
    //转发参数
    return this.share;
}

优化onShareTimeline分享到朋友圈

在配置上基本上与分享到好友一模一样

copy//分享到朋友圈
onShareTimeline(res) {
    // 获取加载的页面
    let pages = getCurrentPages(),
        // 获取当前页面的对象
        view = pages[pages.length - 1];
    // console.log("获取加载的页面", pages);
    //console.log("当前页面的对象", view);
    this.share.path = `/${view.route}`;
    //转发参数
    return this.share;
}

全局分享基本上配置就如上介绍。

分享动态修改页面路径是没问题了,目前还有个问题动态分享路径加参数的配置这一块还是个问题。

wxShare.js代码

copyexport default {
    data() {
        return {
            share: {
                // 转发的标题 (默认标题)
                title: '默认标题--分享标题',
                // 默认是当前页面,必须是以‘/'开头的完整路径
                path: '',
                //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,
                //支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
                imageUrl: ''
            }
        }
    },
    /*
     在要分享的页面 生命周期中  设计当前页面分享标题
     onLoad() {
         this.share.title = "当前页面分享标题"
     },
     */
    // 发送给朋友
    onShareAppMessage(res) {
        // 来自页面内的按钮的转发
        if (res.from == 'button') {
            console.log("按钮转发--配置");
        }
        // 获取加载的页面
        let pages = getCurrentPages(),
            // 获取当前页面的对象
            view = pages[pages.length - 1];
        this.share.path = `/${view.route}`;
        
        //转发参数
        return this.share;
    },
    //分享到朋友圈
    onShareTimeline(res) {
        // 获取加载的页面
        let pages = getCurrentPages(),
            // 获取当前页面的对象
            view = pages[pages.length - 1];
        // console.log("获取加载的页面", pages);
        console.log("当前页面的对象", view);
        this.share.path = `/${view.route}`;
        //转发参数
        return this.share;
    }
}
wxShare.js

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JS实现的简单鼠标跟随DiV层效果完整实例

    JS实现的简单鼠标跟随DiV层效果完整实例

    这篇文章主要介绍了JS实现的简单鼠标跟随DiV层效果,涉及JavaScript基于时间函数动态操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • ES7中利用Await减少回调嵌套的方法详解

    ES7中利用Await减少回调嵌套的方法详解

    大家都知道在ES7中有了标准的回调函数嵌套的解决方案,新增了 async/await两个关键词,所以这篇文章主要给大家介绍了关于Javascript中如何利用Await减少回调嵌套的相关资料,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-11-11
  • JavaScript树结构深度优先算法

    JavaScript树结构深度优先算法

    这篇文章主要介绍了JavaScript树结构深度优先算法,树结构可以说是前端中最常见的数据结构之一,比如说DOM树、级联选择、树形组件,更多相关内容需要的小伙伴可以参考一下
    2022-07-07
  • 基于JS递归函数细化认识及实用实例(推荐)

    基于JS递归函数细化认识及实用实例(推荐)

    下面小编就为大家带来一篇基于JS递归函数细化认识及实用实例(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 获取当前按钮或者html的ID名称实例(推荐)

    获取当前按钮或者html的ID名称实例(推荐)

    下面小编就为大家带来一篇获取当前按钮或者html的ID名称实例(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 如何在javascript 中使用 xmlHttpRequest 发送 POST 请求

    如何在javascript 中使用 xmlHttpRequest 发送 POST

    本文将通过不同的示例解释如何使用JavaScript代码在AJAX编程中发送 XMLHttpRequest post 请求,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-07-07
  • JS实现用户注册时获取短信验证码和倒计时功能

    JS实现用户注册时获取短信验证码和倒计时功能

    在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时。该如何实现获取验证码倒计时功能呢?下面小编给大家分享JS实现用户注册时获取短信验证码和倒计时的代码,一起看看吧
    2016-10-10
  • 基于JS实现一个小型编译器

    基于JS实现一个小型编译器

    这篇文章主要为大家介绍了如何利用JS实现一个小型编译器,文中的示例代码讲解详细,对我们学习或工作有一定的参考价值,需要的可以参考一下
    2022-04-04
  • javascript 显示全局变量与隐式全局变量的区别

    javascript 显示全局变量与隐式全局变量的区别

    这篇文章主要介绍了javascript 显示全局变量与隐式全局变量的区别,需要的朋友可以参考下
    2017-02-02
  • 基于JavaScript制作一个骰子游戏

    基于JavaScript制作一个骰子游戏

    这节实验我们将使用 HTML、CSS 和 JavaScript 构建一个骰子游戏。设置两名玩家(一个人玩也行)然后掷骰子,获得更高点数的玩家将赢得游戏,感兴趣的可以了解一下
    2022-04-04

最新评论