uniapp 实现微信小程序全局分享的示例代码

目录
  • 创建全局分享内容文件
  • 引入并全局注册该文件
  • 自定义页面分享内容 

uniapp 实现微信小程序的全局转发给好友/分享到朋友圈的功能。主要使用 Vue.js 的 全局混入 概念。

下面直接上 实现步骤和代码：

创建全局分享内容文件

1.创建一个全局分享的 js 文件。示例文件路径为：@/common/share.js ，在该文件中定义全局分享的内容：

export default {
	data() {
		return {
			// 默认的全局分享内容
			share: {
				title: '全局分享的标题',
				path: '/pages/home/home',    // 全局分享的路径
				imageUrl: '../../static/imgs/fenxiang-img.png',    // 全局分享的图片(可本地可网络)
			}
		}
	},
	// 定义全局分享
	// 1.发送给朋友
    onShareAppMessage(res) {
        return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
		}
    },
	//2.分享到朋友圈
    onShareTimeline(res) {
        return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
		}
    },
}

引入并全局注册该文件

2.在项目的 main.js 文件中引入该 share.js 文件并使用 Vue.mixin() 方法将之全局混入：

// 导入并挂载全局的分享方法
import share from '@/common/share.js'
Vue.mixin(share)

下面来看一下全局的分享效果：

自定义页面分享内容 

3.如果在特定页面需要自定义分享内容，也仍旧可以使用页面的 onShareAppMessage() 和 onShareTimeline() 方法自定义分享的内容，全局的分享会被页面定义的分享内容覆盖。示例如下：

    onLoad() {},

    // 自定义此页面的转发给好友(已经有全局的分享方法，此处会覆盖全局)
	onShareAppMessage(res) {
	    return {
	      title: '页面分享的标题',
	      path: '/pages/my/my',
		  imageUrl: '../../static/imgs/mylogo.png'
	    }
	  },
	  // 自定义页面的分享到朋友圈
	onShareTimeline(res) {
		return {
			title: '页面分享的标题',
			path: '/pages/my/my',
			imageUrl: '../../static/imgs/mylogo.png'
		}
	},

 注：onShareAppMessage() 和 onShareTimeline() 方法是和 onLoad , methods 等方法同级的。

到此这篇关于uniapp 实现微信小程序全局分享的示例代码的文章就介绍到这了,更多相关uniapp  小程序全局分享内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序uniapp实现左滑删除效果(完整代码)

    微信小程序uniapp实现左滑删除效果(完整代码)

    微信小程序uniapp实现左滑删除效果 实现效果 1,列表中侧滑删除 2,删除不同时存在 3,上下滑动与侧滑删除不影响 在本页面引入组件并使用 (文件在文章的最下方附上) 在需要左滑删除的地方使用 <view v-for="(item, index) in csListArrl" :key="index" :data-index="index"> <delSlideLeft :item="item" :dat

  • 手把手教你uniapp和小程序分包(图文)

    手把手教你uniapp和小程序分包(图文)

    目录 一.小程序分包 二.uniapp分包小程序 分包步骤: 1.配置manifest.json 2.配置pages.json 3.分包预载配置(preloadRule) 一.小程序分包 每个使用分包小程序必定含有一个主包.所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本:而分包则是根据开发者的配置进行划分. 在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示 目前小程序分包

  • uniapp开发小程序的经验总结

    uniapp开发小程序的经验总结

    1. 新建UI项目 首先,我们的UI是基于ColorUI,当ColorUI没有的样式,就基于Uniapp自带的UI.所以项目的开始要引入这两个UI框架. 如下,新建一个uni-ui项目. 再建立一个ColorUI项目. 如果需要观看ColorUI的效果以便直到自己需要用哪些组件,可以将其运行起来,如下. uni-ui同理.这样只要我们需要的样式都可以在这两个UI取材了. 2. 搭建自己的项目 新建一个自己的uniapp项目,建立完成后.项目结构如下. 接着先引入ColorUI样式: 将Color

  • uniapp小程序实现瀑布流布局的思路与代码

    uniapp小程序实现瀑布流布局的思路与代码

    一.前言 现在写瀑布流算不算是炒冷饭啊? 我不管, 我就要写,谁也别想拦我. 瀑布流应该算是很常见的一种布局方法了,大致的思路也很好理解, 但是在小程序里面确有另外需要考虑的几个问题. 问题1:uniapp是基于Vue的,所以不好直接操作DOM. 问题2:uniapp基于Vue,但也做了一些修改,所以不好拿ref来操作 二.先说思路 为了保证文章的长度,以及有些小伙伴对瀑布流的基本思路不是很了解,所以先讲讲瀑布流的思路,先看下图. 可以看到,商品的图片高度是不一致的,再加上商品标题的行数不一致,

  • uniapp微信小程序:key失效的解决方法

    uniapp 代码 <template> <view> <image v-for="(item, i) in fileList" :key="item[urlKey]" :src="item[urlKey]"></image> </view> </template> <script> export default { props: { urlKey: {defau

  • uniapp电商小程序实现订单30分钟倒计时

    本文实例为大家分享了uniapp实现订单30分钟倒计时的具体代码,供大家参考,具体内容如下 倒计时函数如下: // cm 参数是截至时间-当前时间 // 截至时间是后台返回的数据,当前时间通过new Date() 的方式进行获取 runBack(cm) { if (cm > 0) { // 如果时间是超过1分钟,则需要展示的样式是: x分x秒,如果是小于1分钟,则是 00分x秒 cm > 60000 ? (this.rocallTime = (new Date(cm).getMinutes()

  • uniapp 实现微信小程序全局分享的示例代码

    uniapp 实现微信小程序全局分享的示例代码

    目录 创建全局分享内容文件 引入并全局注册该文件 自定义页面分享内容  uniapp 实现微信小程序的全局转发给好友/分享到朋友圈的功能.主要使用 Vue.js 的 全局混入 概念. 下面直接上 实现步骤和代码: 创建全局分享内容文件 1.创建一个全局分享的 js 文件.示例文件路径为:@/common/share.js ,在该文件中定义全局分享的内容: export default { data() { return { // 默认的全局分享内容 share: { title: '全局分享的标

  • 微信小程序聊天功能的示例代码

    微信小程序聊天功能的示例代码

    效果 初始化滚动条高度 var keyHeight = 0; 数据格式 const CHAT_DATA=[ { type:0,//0客服1用户 content:'欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎', headImg:'../../assets/common/images/headHortrait.jpeg',//头像 creatTime:'2019-01-01',//创建时间 contentType:'text' }

  • 如何基于uni-app实现微信小程序一键登录与退出登录功能

    目录 起因 总体思路 详细流程 总结 起因 目前正在使用uni-app开发一个微信小程序,开发到登录模块时通过查阅uni-app官方教程.微信小程序官方文档.网上的教程终于是实现了微信小程序的登录模块,现总结分享给大家,共同学习. 总体思路 创建Vuex进行状态管理(可根据实际需求自行选择是否使用) 创建一个登录按钮并添加触发事件 调用官方uni.getUserProfile() 接口获取用户信息 调用官方uni.login() 接口获取临时登录凭证code 调用后端的登录接口将code 传过去

  • 微信小程序全局文件的使用详解

    微信小程序全局文件的使用详解

    目录 全局文件 总结 我们前边两篇介绍了账号的申请.注册,工具的安装,云服务的开通.本篇我们介绍一下基础语法.介绍的方法呢我们会结合上微搭低代码的工具一起做个对比.因为低代码工具也产生了非常多的技术概念,但最终在发布成小程序的时候也是按照微信的规范去生成的,把微信开发者工具学会了也可以更深入的了解低代码的相关概念. 全局文件 小程序中是分为全局和页面级两部分.全局是在小程序的所有页面都有效,页面级是只在当前页面中生效.小程序根目录有三个文件app.js.app.json.app.wxss这三个就

  • uniapp开发微信小程序自定义顶部导航栏功能实例

    uniapp开发微信小程序自定义顶部导航栏功能实例

    目录 自定义导航栏渐变色,先上效果 重点来了,导航栏设置渐变色 补充:更换图标 总结 自定义导航栏渐变色,先上效果 使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色 全局定义导航栏 "window": { "navigationBarBackgroundColor": "#32A2FD", // 顶部背景颜色 "navigationBarTitleText

  • uni-app实现微信小程序长按拍视频功能

    本文实例为大家分享了uni-app实现微信小程序长按拍视频功能的具体代码,供大家参考,具体内容如下 html <!-- 上传视频 -->      <view class="Voice_input">                 <text class="Voice_title">上传视频:</text>                 <view class="" >       

  • 微信小程序封装分享与分销功能过程解析

    微信小程序封装分享与分销功能过程解析

    前言 在微信小程序中,可以很简单的分享一个页面,比微信H5简单多了,然而,分享出去的页面(也叫卡片),打开后只是一个单独的页面,没有底部导航栏,点击返回按钮的时候就直接退出小程序了.如果需要去到首页,还必须点击顶部胶囊的"回到首页",可是该功能很少人知道. 为了解决这个问题,有两种解决方案. 第一种:在分享的页面在添加显眼的"首页"悬浮按钮,点击按钮跳转到首页.这种方法,好容易理解,可是万一页面多,需要开发不少这样的悬浮按钮,而且点击返回依旧是退出小程序. 第二种:

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

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

  • 微信小程序canvas分享海报功能

    微信小程序canvas分享海报功能

    微信小程序canvas分享海报,包含拒绝授权后重新打开授权设置. 这篇文章完善了第一次拒绝授权后再次点击可以打开授权设置,希望可以帮助到爱学习的道友 这里是效果图,图片可以百度上找. 话不多说,直接上代码 最重要的一点,千万不要忘记在json文件里面注册组件和wxml里面引用组件 wxml <button class='btn' catchtap='createPoster' >生成海报</button> <my-poster id="getPoster"

  • 微信小程序全局状态的深入讲解

    微信小程序全局状态的深入讲解

    前言 在微信小程序中,可以利用 App.js 的 globalData 作为中间桥梁,在 Page, Component 之间,包括页面与页面,页面与组件,组件与组件之间传递需要传递的信息.但是,我们不能及时的知道 globalData 下的变化,在新建小程序的官方的默认事例中,获取 UserInfo 这一网络操作有延迟的,为此写了很多不必要的代码.就连官方案例都存在这一情况,相信在开发中你也会遇到类似的情况.在本文中将介绍如何解决这一类问题. 需求分析 相信以下情况是我们在没有全局状态管理下常

随机推荐