【uniapp学习之分享小程序页面】

这篇具有很好参考价值的文章主要介绍了【uniapp学习之分享小程序页面】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、设置分享功能之前的样子

【uniapp学习之分享小程序页面】

二、在代码中开启分享转发按钮

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
		},
		onLoad() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: '我是【发送给朋友】的标题',
				imageUrl: 'https://img2.baidu.com/it/u=803085012,1104738458&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
			}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: '我是【分享到朋友圈】的标题',
				imageUrl: 'https://img2.baidu.com/it/u=803085012,1104738458&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
			}
		},
	}
</script>

三、效果

【uniapp学习之分享小程序页面】
【uniapp学习之分享小程序页面】
【uniapp学习之分享小程序页面】文章来源地址https://www.toymoban.com/news/detail-505695.html

到了这里,关于【uniapp学习之分享小程序页面】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp微信小程序全局分享和自定义页面分享

    uniapp 实现微信小程序的全局 转发给好友/分享到朋友圈 的功能。主要使用 Vue.js 的 全局混入 概念。 1.在项目根目录创建mixins文件夹,然后创建全局分享的 js 文件。mixins/share.js  2.在项目的 main.js 文件中引入该 share.js 文件并使用 Vue.mixin() 方法将之全局混入: 3.自定义页

    2024年02月13日
    浏览(62)
  • uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)

    大家好!匆匆忙忙又到了周三,今天是 2023年9月13日|农历七月二十九 ,今天这篇文章主要是微信小程序实现分享当前页面到朋友圈或微信好友,下面来看下具体实现方式吧! 带参数和无参数是根据自己的业务需求,如果需要再onLoad函数里面赋值一些属性值的时候可以在 pat

    2024年02月09日
    浏览(51)
  • uniapp实现小程序页面转发和分享到朋友圈

    1、借助uniapp中页面生命周期钩子onShareAppMessage(OBJECT)用户点击右上角分享 在 js 中定义 onShareAppMessage 处理函数(和 onLoad 等生命周期函数同级),设置该页面的分享信息。 2、借助uniapp中页面生命周期钩子onShareTimeline监听用户点击右上角转发到朋友圈 在 js 中定义 onShareTimeline

    2024年02月15日
    浏览(37)
  • uniapp实现小程序分享功能

    一般情况下是这样来写的,不过感觉太麻烦,每个页面都要写一次 所以这里我进行了封装  封装share.js代码 挂载到main.js 这样就实现了效果图如下!!!

    2024年02月11日
    浏览(36)
  • uniapp小程序设置页面横屏

    1.设置单个页面横屏 1.在pages.json中对应的页面配置添加: 2.设置整个小程序页面横屏 在 globalStyle 中添加 3.横屏后字体样式都会变大 解决:使用px 代替 rpx ;  注意 1px = 2rpx 效果图  

    2024年02月16日
    浏览(41)
  • uniapp 微信小程序分享、分享朋友圈功能

    页内自定义分享按钮 当页面js上没有添加事件“onShareAppMessage”,右上角‘…’不会出现“转发”事件。 如果有事件,但是没有定义事件内容的话,转发的卡片则是当前页面的截屏信息。 官方文档:https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage 方式1:小程序右上角原生菜

    2024年02月16日
    浏览(64)
  • uniapp 分享功能(app , 小程序)

    一、APP分享         1、APP分享内容到微信聊天页面         2、APP分享内容到微信朋友圈 二、小程序分享          1、小程序分享内容到微信聊天页面         微信小程序分享代码与onLoad(){}同级         2、小程序分享内容到微信朋友圈

    2024年02月11日
    浏览(40)
  • uniapp 给小程序添加分享功能

    在 Uni-app 中,要为小程序添加分享功能,你可以通过使用小程序的自定义分享组件或通过配置页面的分享信息来实现。下面我将分别介绍这两种方法。 在 Uni-app 中,你可以通过配置页面的 onShareAppMessage 钩子来设置页面的分享信息。这个方法适用于小程序的页面级别分享。 在

    2024年02月05日
    浏览(38)
  • UNIAPP 微信小程序实现分享功能

    默认情况下点击微信小程序调试器无法实现分享功能,如下图  此时需要设置如下操作,个人默认习惯是在 utils文件下 创建 share.js 文件 并写入代码 内容如下 然后打开main.js 修改如下 设置完成后再点击右上角的分享就打开了 回到组件内 如果需要通过按钮实现分享功能  参考

    2024年02月04日
    浏览(73)
  • uniapp微信小程序使用分享功能

    实现效果为如下所示的小程序分享功能: 本项目是一个使用uniapp搭建的微信小程序,上线后点击右上角的…,发现其中的发送给朋友和分享到朋友圈是如下图所示的灰色不能点击: 那么,如何设置微信小程序的分享功能呢? 第一步:在onLoad方法中写wx.showShareMenu方法,设置

    2024年02月11日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包