前端实现微信自定义分享踩坑记录

本文讨论的是使用微信提供的JS-SDK来实现微信提供的自定义分享功能
当我们点击微信浏览器右上角的三个小点分享给朋友时，默认的效果是这样子的：

想要实现右侧小图标是自定义的图片，可以使用一个方法，就是在html中添加一张看不见的图片(可以div里放个img标签，然后div设置为display:none;)，注意，这张图片要放在html中能获取到的第一张图片，并且图片尺寸一定要大于等于300px * 300px，因为微信的机制是获取html中第一张大小大于等于300px * 300px的图片，拿这张图片来当右侧的小图标。

但是这种方式只能决定右侧小图标和标题而已，中间灰色部分内容无法自定义，并且只有在PC端的微信浏览器分享给朋友时才有用，如果是用手机端的微信浏览器分享给朋友时，小图标同样无法自定义，缺陷明显

我们想要实现灰色内容部分和右侧小图标自定义，就得使用微信提供的js-sdk来实现

首先要明确，这个js-sdk提供的自定义分享，仅局限于手机端微信的分享，PC端是不能使用的，用图说明：


微信目前提供的自定义分享，只能通过它自带的分享功能按钮来分享，如上面图片所示，不能通过你自己去写个按钮来点击实现

第一步，登录微信公众号绑定域名

登录微信公众平台，选择菜单“公众号设置”，再选择功能设置，填写JS接口安全域名

注意：
1.登录的微信公众号，是需要通过微信认证的，可在左侧菜单“设置-微信认证”中查看
2.填写的JS接口安全域名是需要经过ICP备案的，可通过百度ICP备案查询来查询域名是否有备案
3.需要到左侧菜单“设置-安全中心”去设置IP白名单，填写的是服务器对应的IP地址
4.左侧菜单选择“开发-接口权限”，查看是否有相应的权限，如果没有则需要去获取

第二步，引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载

或者npm install weixin-js-sdk，然后import wx from ‘weixin-js-sdk’

第三步，使用wx.config方法配置

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

其中，appId，timestamp，nonceStr，signature这四个参数由后端提供。
注意：前端需要传一个当前页面的路径给后端，比如，当前页面的路径为https://www.xxx.com/home，那就把这个路径传给后端，然后后端返回你需要的四个参数。
其中，需要使用的JS接口列表jsApiList，详细请见文档附录2-所有JS接口列表

第四步，调用你需要的API

比如，自定义分享给微信朋友或者分享给QQ好友，就调用updateAppMessageShareData

wx.ready(function () { // 需在用户可能点击分享按钮前就先调用
  wx.updateAppMessageShareData({ 
    title: '', // 分享标题
    desc: '', // 分享描述，即中间灰色部分的内容
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标，最好使用绝对地址，比如，放在服务器中的图片
    success: function () {
      // 设置成功的回调
    }
  })
});

关于wx.ready方法的说明：

wx.ready(function () {
	// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后
	// config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口
	// 则须把相关接口放在ready函数中调用来确保正确执行。
	// 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
})

第五步，常见错误及解决方法

常见错误及解决方法，微信文档罗列得挺详细了，具体的点此查看附录5-常见错误及解决方法
这边主要要介绍的，是一个微信文档的巨坑

巨坑部分

使用js-sdk，最经常遇见的错误应该就是 invalid signature 即签名错误，微信也罗列了针对该错误的检查以及处理方法，但是其中有一点，就是由前端传给后端的url，可能会有问题，关于这点，文档是这么说的

我用的是vue项目，路由是hash模式，一开始也总是用文档说的来处理我当前的页面路径，结果总是报错invalid signature。后来干脆不对页面路径做任何处理，直接拿着window.location.href传给后端，就没有问题了

所以对于这个url的处理，有时候还是要看情况而定，我把项目改成历史模式，得到的页面路径不但没有#号，还是纯英文，没有任何中文或特殊字符，使用encodeURIComponent方法处理，也是不行的，依然会报invalid signature

这也算是微信文档的一个巨坑了吧