记录一次开发微信网页分享的步骤

需求

最近在做一个项目需求，分享和接收好书，获取用户的个人信息和unionID，诱导用户和朋友或好友分享，达到裂变和创新的目的。在做的过程中，遇到了一些坑，就回来总结一下

技术解决方案

使用微信JS-SDK自定义分享给好友和分享给好友

实施步骤

1.要实现微信H5网页的自定义分享功能，首先要熟悉微信公众平台的开发文档。具体的文件非常详细。在这里，我们来谈谈需要注意的几点。不要忘记绑定开发人员权限和js安全域名，否则可能会报告redirect_uri参数错误。

2.首先，我们平时做微信H5网页活动，都需要获取用户的个人信息，这需要用户授权。授权方式一般有两种，一种是静默授权，一种是网页授权，微信开发文档中有详细描述。

对于关注过微信官方账号的用户，如果用户从微信官方账号中的会话或自定义菜单进入该微信官方账号的网页授权页面，即使范围是snsapi_userinfo，也是静默授权。没有用户意识的一般网页授权过程分为四个步骤：

(1)引导用户进入授权页面同意授权并获取代码

交换网页授权access_token的代码(不同于基础支持中的access_token)

如有必要，开发者可以刷新网页授权access_token，避免过期

获取用户基本信息(openid、UnionID、个人头像、性别、省市、微信昵称等)。)通过网页授权

3.下面是具体的实现代码，给出了大致思路。通过判断参数是否在微信浏览器中打开，用户是否被授权，重定向到微信界面，获取代码，然后通过界面发送到后端，返回用户的基本信息。

//用户授权如果(这。$route.query.from) {//跳转到微信页面let _ now URL=window . location . href . split(？))[0] `?pictureId=${this。$ route . query . PictureID } `；//参数拼接let _ share URL=` https://open . weixin . QQ.com/connect/oauth 2/authorize？Appid=微信微信官方账号appid redirect _ uri=$ { encodeuricomponent(_ now URL)} response _ type=codescope=snsapi _ user info state=state #微信_ redirectwindow . location . href=_ share URl；//重定向到此定义的URL} //获取用户信息(如果这。$ route . query . code){ let _ code=this。$ route . query . code；this . handlewechatmsg(_ code)；}4.下一步是如何定制并分享给朋友或好友，也是根据主叫微信开发文档进行配置和调用。调用共享接口成功后，开始调用共享api，调用成功后的回调函数执行页面跳转。在这里，微信做了限制。如果用户点击分享时取消，默认是转到成功回拨功能，但无法获得最终分享成功状态。下面是实现共享的具体代码

//与朋友或好友分享wxchatshare (param) {var那=thislet _ URL=encodeURIComponent(param . URL)；apiUrl .微信配置(_url)。然后(RES={ if(RES . data . code==200){ wx . config({ debug : false，appid : RES . data . content . appid，Timestamp :res。data.content.timestamp，//必选，生成签名noncestr3360res的时间戳。data . content . non estr，//必选。生成随机签名字符串signature:res。data.content.signature，//必选，并对jsapilist :[' on menushareptimeline '，' on menusharepmessage '//' updateappmessagesharedata '，/'updatetimelinesharedata']}进行签名；//wx.ready(function() {//分享到朋友圈wx . onmenusaretime({ title : param . title，//分享标题link3360param.link，//分享链接，链接域名或路径必须与当前页面对应的微信官方账号JS安全域名一致。imgurl 3360 param . imgurl 3360 function()。//用户点击了共享后执行的回调函数。$ message.message('共享成功！');that . ToRouter()；} });//与好友wx . onmenusharapmessage({ title :param . title，//share title desc3360param.desc，//share description link : param . link，//share link，该链接域名或路径必须与当前页面对应的微信官方账号JS安全域名一致，imgUrl: param.imgUrl，//共享图标类型3360 param。类型，//共享类型，音乐，视频或链接，以及默认的linkdataurl3360param。未填写dataurl。//如果类型是音乐或视频，需要提供数据链接，默认值为null success: function() {//用户点击共享后执行的回调函数。$ message.message('共享成功！');that . ToRouter()；} });//wx . updatetimelinesharedata({//title : param . title，//share title//link : param . link，//share link，链接域名或路径必须与当前页面对应的微信官方账号的JS安全域名一致。//imgUrl: param.imgUrl，//共享图标//success 3360 function(RES){/////设置成功//即。$Message.message('设置成功！');//that . ToRouter()；//} //});////与朋友分享//wx . updateappmessagesharedata({//title : param . title，//分享标题//desc3360param.desc，//分享描述//link3360param.link，//分享链接。链接域名或路径必须与当前页面对应的微信官方账号的JS安全域名一致。//imgUrl: param.imgUrl，//共享图标//success 3360 function(RES){/////设置成功//即。$Message.message('设置成功！');//that . ToRouter()；//} //});//});wx . error(function(RES){ console . log('验证失败返回的信息： '，RES)；});} else { console . log(RES . data . message)；} }) .catch(err={ this。$Message.message(错误)；});}，摘要

更何况调用共享事件时，不能同时写四个共享按钮事件。如果都写好了，会在点击安卓上的分享按钮之前，造成分享成功回调功能。这里，为什么要写四个分享按钮事件呢？因为发现如果不写下即将废止的两个onMenuShareTimeline和onMenuShareAppMessage，就会遇到不能在安卓上分享的问题，所以可以通过注释掉两个新的分享按钮事件updateAppMessageShareData和updateTimelineShareData来分享，iOS和安卓都可以。

我发现这样做的原因可能是新旧共享事件的执行顺序，即调用新的共享按钮时，必须在wx.ready执行，要放弃的接口是不必要的。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。