小程序与h5分享 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

小程序与h5分享

发表时间:2020-9-29

发布人:葵宇科技

浏览次数:38

小程序分享
可以参考小程序文档小程序文档链接
介绍:小程序中有直接在按钮上面加open-type就会触发分享了
如下:

	<button  open-type="share"></button>

在onShareAppMessage这个生命周期上面书写你要分享的内容就可以了,
如下:

onShareAppMessage(res) {
		return {
			title:'标题',
			path:"你需要客户点击你分享的进来你的程序的路径",
			 imageUrl:'图片',
			 desc: '描述',
			 content:'内容',
			success(res) {
				uni.showToast({
					title: '分享成功'
				})
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}

	},

h5分享

ps:根据这个文档书写的,你可以去参考下链接

第一步:绑定域名

  1. 先登录微信公众号平台进入[公众号设置的功能设置里面填写js接口安全域名]

如图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
需要填写一下域名,在把文件放到你的服务器下面,让他可以访问(保存按钮能保存就已经放置好了哦)

二、引入微信js-sdk
你可以直接去下载下来或者在你页面用script标签引入都可以

  1. 口令安装 npm i weixin-js-sdk --save
  2. 直接引入的方式:
  3. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>

ps:二者只能用其中一个(不能同时有,不然就分享不了哦)

三、通过config接口注入权限验证配置

wx.config({
							debug: false, "是否开启调试模式,就是报错了会直接弹出来,反之在控制台打印"
							appId:"公众号的appid",//必填 公众号标识
							timestamp: "" +timestamp ,//必填,生成签名的时间戳
							nonceStr:nonceStr,必填,生成签名的随机串
							signature: signature,必填,签名
							jsApiList: [
								'onMenuShareTimeline',
								'onMenuShareAppMessage'
							]必填,需要使用的js接口列表,所有js接口列表
						});

四、分享功能

             wx.ready(() => {
             //config信息验证后执行ready方法,所有接口调用必须在config接口获取结果之后,
            //config是客户端的异步操作,所有如果在需要在页面加载就调用相关接口,
            //则须把相关接口放在ready函数中调用来保证正确执行。对于用户触发时才调用的接口,
            //则可以直接调用,不需要放在ready函数中
							//分享给朋友接口  
							wx.onMenuShareAppMessage({
								title:title, // 分享标题
								desc: desc, // 分享描述
								link:link, // 分享链接
								imgUrl: 'imgUrl', // 分享图标
								type: 'link', // 分享类型,music、video或link,不填默认为link
								success: function() {
									// 用户确认分享后执行的回调函数
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}

							});
							//分享到朋友圈接口  
							wx.onMenuShareTimeline({
								title:title, // 分享标题
								desc: desc, // 分享描述
								link:link, // 分享链接
								imgUrl: 'imgUrl', // 分享图标
								type: 'link', // 分享类型,music、video或link,不填默认为link
								success: function() {
									// 用户确认分享后执行的回调函数
								},
								cancel: function() {
									// 用户取消分享后执行的回调函数
								}

							});
							
						});

最近分享运到的问题
ps:就是针对有的手机你分享出去的缩略图不显示的
解决方案:就是把你要放的缩略图上传到你的公众号的图文库里面就可以了,在把里面上传得到的链接方法你分享的里面就可以了,如图:

在这里插入图片描述

相关案例查看更多