uni-app h5 分享好友与朋友圈等功能

1. 下载js:   https://unpkg.com/jweixin-module@1.4.1/out/index.js

2.  在根目录下创建文件夹jweixin,然后把下载的js放进去,命名index.js。

3. 新建一个js或者直接在main.js中写:(我这个是直接在mian.js中使用的)

var jweixin = require('./jweixin')

uni.request({
	url: '请求接口地址',
	method: 'GET',
	data: {
		url: location.href
	},
	success(res) {
		let s = res.data
		jweixin.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
			appId: s.appId, // 必填,公众号的唯一标识
			timestamp: s.timestamp, // 必填,生成签名的时间戳
			nonceStr: s.nonceStr, // 必填,生成签名的随机串
			signature: s.signature,// 必填,签名
			jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ"] // 必填,需要使用的JS接口列表
		});
		jweixin.ready(function () {
			//获取“分享给朋友”按钮点击状态及自定义分享内容接口(即将废弃)
			jweixin.onMenuShareAppMessage({
				title: getMessage(location.href).title, // 分享标题
				desc: getMessage(location.href).desc, // 分享描述
				link: location.href, // 分享链接
				imgUrl: getMessage(location.href).imgUrl, // 分享图标
				type: '', // 分享类型,music、video或link,不填默认为link
				dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
				success: function () {
				
                }
            })
//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口(即将废弃)
	        jweixin.onMenuShareTimeline({
			    title: getMessage(location.href).title, // 分享标题
				desc: getMessage(location.href).desc, // 分享描述
				link: location.href, // 分享链接
				imgUrl: getMessage(location.href).imgUrl, // 分享图标
				type: '', // 分享类型,music、video或link,不填默认为link
				dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
				success: function () {
				
                }
            })
        })
    }
})

function getMessage(url) {
	if(url == '') {
		return {
			title: '',
			desc: '。',
			imgUrl: ''
		}
	} else if(url == '') {
		return {
			title: '',
			desc: '',
			imgUrl: ''
		}
	} else {
		return {
			title: '',
			desc: '',
			imgUrl: ''
		}
	}
}

在跳转到需要分享的页面时需要使用window.location.href来跳转。否则iphone手机分享会有问题。

若有多个页面需要分享时,可以自己写一个方法去判断location.href。然后返回不同title,desc,imgUrl等数据。

uni-app 是一种基于 Vue.js 的跨平台应用框架,它能够帮助开发者通过编写一次代码即可发布到包括微信小程序、支付宝小程序、百度智能云等在内的多种移动平台上。uni-appH5播放器组件允许开发者轻松地在应用程序中嵌入音频或视频播放功能。 ### uni-app H5 播放器的基本组部分: 1. **音频组件**: 支持基本的音量调节、暂停、继续播放、上一首、下一首等功能,并提供API供自定义播放行为。 2. **视频组件**: 提供了播放、暂停、全屏显示、上下左右滑动控制进度等功能。支持多种视频格式,如 MP4 等,并且可以添加字幕文件。 3. **音频和视频控制界面**: 自带简洁美观的播放控件设计,也可以通过配置选项定制播放器外观。 4. **事件处理**: 提供了一系列事件回调机制,便于监听用户操作,如播放完、暂停、错误发生等。 ### 使用步骤: 1. **安装 uni-app**:首先需要下载并安装 uni-app 开发环境及配套工具。 2. **引入播放器组件**: 在项目中引入所需的音频或视频播放器组件。通常 uni-app 已内置这些组件,只需按需导入即可。 3. **创建播放器实例**: 初始化播放器,指定播放资源、是否自动播放、初始音量等参数。 4. **集到页面中**: 将播放器组件插入到需要展示音乐或视频的页面模板中。 5. **处理用户交互**: 配置事件监听函数,以便对用户的点击、拖拽、触控等操作做出响应。 6. **调试与优化**: 测试播放器的各项功能,检查性能和兼容性,针对不同设备进行适配调整。 ### 相关问题: 1. 如何在uni-app中自定义H5播放器的样式? 2. uni-app H5播放器如何处理流式音频/视频数据? 3. 当在不同环境下运行应用时,uni-app H5播放器会遇到哪些常见的兼容性问题?
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

俊刚、

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值