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

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

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

export 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：**分享到朋友圈配置

export 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分享给朋友

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

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

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

设置页面分享标题

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

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

效果展示

button分享到好友

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

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

//发送给朋友
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分享到朋友圈

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

//分享到朋友圈
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代码

export 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

本文来自博客园，作者：虚乄，转载请注明原文链接：https://www.cnblogs.com/lovejielive/p/15581174.html

uni-app 微信小程序全局分享