H5之唤起微信功能

最近在做项目中总能遇到H5需要调起微信公众号、调起微信小程序、调起微信分享等等的有关微信的一些需求。今天，我们就着重来谈谈H5之调起微信分享功能的实现。
使用微信分享，可以获得更好的传播效果。

步骤一. 用户信息获取

1. 注册测试公众号

我们在 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 可以申请一个测试账号，在测试号管理的页面中能够看到我们appId等信息，这里有个接口配置信息修改的选项需要我们去填写

这里就要麻烦后端的同学为我们提供URL和Token（URL是开发者用来接收微信消息和事件的接口URL。Token可由开发者任意填写，用作生成签名） 该Token会和接口URL中包含的Token进行比对，从而验证安全性。

2. 微信网页授权

在项目中需要获取用户个人信息，比如手机号和微信头像等，这里我们需要微信网页授权才可以实现，首先在微信测试号管理中找到体验接口权限表

点击修改进入：

将你网页的域名添加进去，配置完成后我们对这个路径进行访问https://juejin.im/post/6844903825589927944即可拿到code值，从而拿到openid等个人信息。

3. 配置后路径的修改

• appid为我们测试号中的appid
• redirect_uri为我们页面路径，访问微信提供的路径会获取code值重定向到我们页面路径（这里的url需要进行urlEncode`处理）
• scope的值有两种：
• snsapi_base为静默授权，用户无感知，但是只能获取到openid，拿不到其他信息。
• snsapi_userinfo是弹框询问授权，确认授权后可以获取到openid进而拿到昵称、头像等信息

这个时候我们就可以授权得到用户信息。
这个过程中我们可能会遇到的问题：

• scope参数错误或没有scope权限，检查scope参数赋值snsapi_base或snsapi_userinfo
• redirect_uri参数错误，检查网页授权页面域名配置问题，复制的时候空格也要注意
• response_type参数错误，检查url路径是否进行了urlEncode处理

步骤二. 微信JS-SDK使用

微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包，通过JS-SDK可以使用微信分享、支付、扫一扫等功能，这里我们使用到了微信分享。

1. js安全域名配置

使用JS-SDK首先找到测试号的JS接口安全域名，配置上页面使用的域名

2. 引入JS-SDK

在项目中我们引入JS-SDk的资源，可通过https://juejin.im/post/684