微信小程序通过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

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

时间: 2021-11-21

微信小程序前端自定义分享的实现方法

背景 目前手上有一个小程序的项目,希望转发时分享消息的界面能够自定义,然而微信小程序只提供设置图片的url和title. /** * 用户点击右上角分享 */ onShareAppMessage: function() { return { imageUrl:'', title:'' }; } 实现 我们要转发的显示内容多了一点东西:头像,用户名和点赞数.好在这个排版不是很复杂,所以我们思考了一下通过canvas去生成一张图片再return canvas所生成的图片url. 代码如下(其实还要作

微信小程序生成海报分享朋友圈的实现方法

项目需求写完有一段时间了,但是还是想回过来总结一下,一是对项目的回顾优化等,二是对坑的地方做个记录,避免以后遇到类似的问题. 需求 利用微信强大的社交能力通过小程序达到裂变的目的,拉取新用户. 生成的海报如下 需求分析 1.利用小程序官方提供的api可以直接分享转发到微信群打开小程序 2.利用小程序生成海报保存图片到相册分享到朋友圈,用户长按识别二维码关注公众号或者打开小程序来达到裂变的目的 实现方案 一.分析如何实现 相信大家应该都会有类似的迷惑,就是如何按照产品设计的那样绘制成海报,其实当时

微信小程序实现分享朋友圈的图片功能示例

本文实例讲述了微信小程序实现分享朋友圈的图片功能.分享给大家供大家参考,具体如下: 由于微信小程序只支持分享给朋友或者群,不支持分享到朋友圈,又有分享到朋友圈这个需求,那就要想办法实现这个需求.查阅各种资料,发现基本思路有两种,一种是后端实现,另一种是前端实现,后端实现的方式这里就不讨论了,因为我是不懂后端的,只会前端的东西,所以这里就记录一下前端的实现方法. 前端要实现分享到朋友群,都是通过canvas做一张图片,然后用户手动分享朋友圈.前端具体要做的就是把要分享的页面用canvas重做一遍,

微信小程序实现的自定义分享功能示例

本文实例讲述了微信小程序实现的自定义分享功能.分享给大家供大家参考,具体如下: 大家都知道,小程序有分享的功能,可以分享整个程序,也可以自定义分享的内容 onShareAppMessage 在 Page 中定义 onShareAppMessage 函数,设置该页面的分享信息. 只有定义了此事件处理函数,右上角菜单才会显示"分享"按钮 用户点击分享按钮的时候会调用 此事件需要 return 一个 Object,用于自定义分享内容 示例代码: Page({ onShareAppMessag

微信小程序开发之转发分享功能

官网文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html 第一种情况 点击小程序转发 不加入参数 //转发 onShareAppMessage: function() { let users = wx.getStorageSync('user'); if (res.from === 'button') {} return { title: '转发', path: '/pages/

微信小程序开发摇一摇功能

微信小程序摇一摇 方法定义: let shakeInfo = { openFlag: false,// 是否开启摇一摇,*****注意:如果是小程序全局监听摇一摇,这里默认为true shakeSpeed: 110,//设置阈值,越小越灵敏 shakeStep: 2000,//摇一摇成功后间隔 lastTime: 0,//此变量用来记录上次摇动的时间 x: 0, y: 0, z: 0, lastX: 0, lastY: 0, lastZ: 0, //此组变量分别记录对应 x.y.z 三轴的数值和

微信小程序 开发之快递查询功能的实现

微信小程序 快递查询功能: 产品需求, 准备api, 代码编写.  第一步:产品需求,我们需要实现如下图的一个功能,在文本框输入快递单号,点击查询,下面出来我们需要的快递信息 第二步:准备 我们先找一个快递的api接口,通过http://apistore.baidu.com/我们可以看到很多的api,我们找一个快递查询的 我们可以看到有接口地址,和一些参数.做好这个准备接下来就开始编码工作了---- 第三步:编码工作 我们新建一个Express的文件,然后默认文件准备齐全 我们现在app.js中

微信小程序实现判断是分享到群还是个人功能示例

本文实例讲述了微信小程序实现判断是分享到群还是个人功能.分享给大家供大家参考,具体如下: 话不多说 直接来讲述一下操作步骤: 首先  我们需要通过调用 wx.showShareMenu 并且设置 withShareTicket 为 true.这一项必须设置,这样当用户将小程序分享到任一群聊之后,才可以获取到此次分享的 shareTicket,千万不能忘了! onLoad: function (options) { wx.showShareMenu({ // shareTicket 是获取转发目标

微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

本文实例讲述了微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能.分享给大家供大家参考,具体如下: 微信小程序开发中选项卡.在android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml <!--index.wxml--> <view class="swiper-tab"> <view class="swiper-tab-list {{c

微信小程序开发实现的IP地址查询功能示例

本文实例讲述了微信小程序开发实现的IP地址查询功能.分享给大家供大家参考,具体如下: 微信小程序 开发 参考   https://mp.weixin.qq.com/debug/wxadoc/dev/component/ search.wxml <view class="container"> <view class="page-body"> <view class="weui-search-bar {{searchFocusC

基于vue开发微信小程序mpvue-docs跳转页面功能

打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart 跳转页面,废话不多说直接点... 打开pages.js 默认是有两个页面的, 现在新添加一个newpage的页面 这样加就行了! 然后是 用模版上的方法去跳转页面已测试OK, 虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用 总结 以上所述是小编给大家介绍的基于vue开发微信小程序mpvue-docs跳转页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留

微信小程序开发搜索功能实现(前端+后端+数据库)

2019年5月7日更新这是写的最新的一篇文章大家看这篇:https://www.jb51.net/article/157081.htm 界面比较丑,主要实现逻辑... 超级简单的界面,表单,提交按钮,搜索结果展示区域... 下面是index.wxml <!--index.wxml--> <form bindsubmit="formSubmit"> <!--提交按钮 --> <input type="text" name=&q

使用微信小程序开发前端【快速入门】

前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众号据说只有200个. 虽然内测名额十分稀少,但依赖中国广大开发者的破解和分享精神,在网络上很快出现了开发工具的破解版本和API文档.然而可能是微信的妥协或者早已预料,9月24日微信官方发布了不需要破解就可以使用的微信小程序开发者工具和文档,对于费劲心思破解完的开发者来说应该瞬间整个人都不好