记录一次开发微信网页分享的步骤-创新互联

需求

最近在做一个项目需求，分享领好书活动，获取用户的个人信息以及unionID，并诱导用户分享给好友或朋友圈，达到裂变拉新的目的。在做的过程中遇到了一些坑的地方，所以回过来总结一下

技术方案

使用微信JS-SDK自定义分享到好友和分享到朋友圈

实现步骤

1、要实现微信H5网页自定义分享功能，必须先熟悉下微信公众平台开发文档，具体文档里面说的很详细，这里说下需要注意的点，别忘了绑定开发者权限，还有绑定js安全域名，要不然有可能会报redirect_uri参数错误。

2、首先一般在做微信H5网页活动，都需要获取用户的个人信息，这就需要用户授权，一般授权有两种方式，一种是静默授权，一种是网页授权，这个在微信开发文档说的很详细。

对于已关注公众号的用户，如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页，即使是scope为snsapi_userinfo，也是静默授权，用户无感知
一般网页授权流程分为四步：

①引导用户进入授权页面同意授权，获取code

②通过code换取网页授权access_token（与基础支持中的access_token不同）

③如果需要，开发者可以刷新网页授权access_token，避免过期

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

3、下面是具体实现代码，说下大概思路，通过判断参数是否在微信浏览器中打开，是否让用户授权，并重定向到微信的接口拿到code后通过接口传给后端返回用户的基本信息。

// 用户授权
 if (this.$route.query.from) {
   // 跳转微信页面
    let _nowUrl = window.location.href.split("?")[0] +`?pictureId=${this.$route.query.pictureId}`; // 参数拼接
    let _shareUrl = `https://open.weixin.qq.com/connect/oauth3/authorize?appid=微信公众号APPID&redirect_uri=${encodeURIComponent(_nowUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
    window.location.href = _shareUrl; // 重定向到这个定义的URL
  }
  // 通过code获取用户信息
  if (this.$route.query.code) {
   let _code = this.$route.query.code;
   this.handleWechatMsg(_code);
  }

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。