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

官网分享介绍: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

uni-app 微信小程序全局分享的更多相关文章

  1. 微信小程序绘制分享图

    微信小程序绘制分享图例子: demo下载地址:https://gitee.com/v-Xie/wxCanvasShar 大致代码会再以下说明 实际开发项目: 基础知识点: 了解canvas基础知识 w ...

  2. mpvue开发微信小程序,分享按钮报错:`Cannot read property 'apply' of null`

    用mpvue开发微信小程序,分享按钮报错:Cannot read property 'apply' of null onShareAppMessage 是于微信小程序Pages的生命周期钩子,顾这个方 ...

  3. 微信小程序全局状态管理 wxscv

    微信小程序中,数据状态不同页面中不能跨页面同步更新,也就是缺失类似vuex,mobx,redux全局的数据状态管理功能. 有些人移植了这些库,但是毕竟不是微信小程序生态的东西. Tencent也发布了 ...

  4. 微信小程序全局设置分享内容

    微信小程序每个页面都可以在onShareAppMessage中设置分享内容,如果想要全局设置成一样的分享内容如何设置呢? 在app.js中新增以下方法: //重写分享方法 overShare: fun ...

  5. “微信小程序从分享卡片进入,第一次获取不到用户uid、第二次能获取到用户uid”解决方法

    用uniapp开发微信小程序时,有一个需求是分享罐表详情页面给其它用户,其它用户(在已经登录的状态下)点击分享卡片可以直接跳转到该罐表详情页,且能显示自己是否已经收藏该罐表(收藏状态由用户uid和罐表 ...

  6. 微信小程序-实现分享(带参数)

    微信小程序分享功能的实现方法有两种: 第一种 在page.js中实现onShareAppMessage,便可在小程序右上角选择分享该页面 onShareAppMessage: function () ...

  7. 微信小程序之分享功能

    说到分享 大家都会想到手机右上角点击不就分享了么?对的没错,那样是分享转发的是小程序  而不是指定的某个页面,所以自己动手丰衣足食,自己写一个转发功能被, 其实也没那么可怕,主要参考的是微信小程序AP ...

  8. uni app以及小程序 --环境搭建以及编辑器

    https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 根据以上网页下载自己电脑相应的版本的微信开发者工具(目录 ...

  9. 微信小程序全局属性

    通用全局属性:(前端也有) Infinity 代表正的无穷大的数值. NaN 指示某个值是不是数字值. undefined 指示未定义的值. 通用全局函数:(前端也有) decodeURI() 解码某 ...

随机推荐

  1. UDP接收端和发送端_Socket编程

    UDP接收端 接收端启动文件 1 import java.net.DatagramSocket; 2 import java.net.SocketException; 3 4 public class ...

  2. Vue3学习(六)之使用Vue3进行数据绑定及显示列表数据

    一.写在前面 说来还是比较惭愧的,从周二开始事就比较多,周三还电脑坏了,然后修电脑等等一些杂事,忙的团团转,因为周二.周三自己走的过多了,导致不敢直腰,周四卧床一天. 之前都听说<陈情令> ...

  3. JAVA复习总体大纲

    1 java基础. [1].变量--- 数据类型 变量名=值; 数据类型: 1.基本数据类型. byte[1字节] short[2字节] int[4字节] long[8字节] float[4字节] d ...

  4. 用例圖學習實例 / Learning Use Case Diagram by Examples

    什麼是用例圖? 用例描述了一個演員和感興趣的系統之間的一系列交互,以達到某種特定目標,並由某種觸發事件引發.用例滿足需求或為演員解決問題.用例圖包含一組用例,可以通過從每個角色的不同角度講述系統將如何 ...

  5. RBAC 权限管理模型

    一.RBAC模型--基于角色的访问控制 什么是RBAC RBAC(Role-Based Access Control)基于角色的访问控制.这是从传统的权限模型的基础之上,改进而来并且相当成熟的权限模型 ...

  6. [no code][scrum meeting] Alpha 5

    项目 内容 会议时间 2020-04-10 会议主题 后端技术讨论 会议时长 30min 参会人员 全体成员 $( "#cnblogs_post_body" ).catalog() ...

  7. Vue 报错Error in render: “TypeError: Cannot read properties of null (reading ‘xxx’)” found in

    前端vue报错 [Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'name' ...

  8. 关于评论区empty。。。

    空荡荡的毫无人烟,博主希望路过的小哥哥/小姐姐(几率较小)留下些什么--

  9. FreeRTOS学习笔记——FreeRTOS 任务基础知识

    RTOS 系统的核心就是任务管理,FreeRTOS 也不例外,而且大多数学习RTOS 系统的工程师或者学生主要就是为了使用RTOS 的多任务处理功能,初步上手RTOS 系统首先必须掌握的也是任务的创建 ...

  10. STL 去重 unique

    一.unique函数 类属性算法unique的作用是从输入序列中"删除"所有相邻的重复元素. 该算法删除相邻的重复元素,然后重新排列输入范围内的元素,并且返回一个迭代器(容器的长度 ...