最近遇到需要微信内置H5页面去自定义分享的功能
描述：
首次开发卡片式分享链接，过程中遇到许多坑， 终于完成了这个功能，记录的开发过程不一定符合你的需求，但如果你也是用uniapp开发，希望本篇能够帮助到你。
效果图：
准备工作：
设置JS安全域名：设置>公众号设置>功能设置；把服务器域名填入JS接口安全域名。 (重要：会得到下载校验文件)
设置IP白名单：设置>安全中心>IP白名单；把服务器IP地址填入IP白名单。
注意：配置后需下载效验文件并上传你自己的服务器根目录。
引入js文件：
方案一
// cmd 安装
npm install jweixin-module --save
// 需要引入的位置引入
let jweixin = require('jweixin-module')
复制代码方案二
// 在html的 head头部
<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
// 使用dom方式 在onLoad() 中使用
var hm = document.createElement("script");
hm.src = "https://res2.wx.qq.com/open/js/jweixin-1.6.0.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
复制代码通过config接口注入权限验证配置
后端需要写一个签名认证的接口，去返回如下几个必要参数（这块和你们自己的后端协调，看他怎么给你处理，如何生成签名的算法在开发者文档里面都是有的）
所有js接口列表
地址： developers.weixin.qq.com/doc/offiacc…
全部代码
// 调用的页面
import weixinModule from "./weixinModule.js"
onLoad() {
weixinModule.WXConfig(this);
}
复制代码// weixinModule.js
var jweixin = require('jweixin-module')
function WXConfig(_this){
//这个URL 路径中不可以带有hash值 即不能又 #后面的的内容（包含#）
//这里使用到了encodeURIComponent() 下文中会说明原因为什么要使用它
let URL = window.encodeURIComponent(location.href.split('#')[0])
console.log(URL);
_this.api({
url: URL //我这里将当前页面的URL传给后端进行签名
}).then(response => {
console.log('response', response);
let res = response.data
if (res.codes === '200') {
jweixin.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.appId, // 和获取Ticke的必须一样------必填，公众号的唯一标识
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature, // 必填，签名，见附录1
//需要分享的列表项:发送给朋友，分享到朋友圈，分享到QQ，分享到QQ空间
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"]
});
jweixin.ready(function(){
// 分享给朋友
jweixin.updateAppMessageShareData({
title: '快看！这里有个帅哥', // 分享标题
desc: '你看我帅不帅', // 分享描述
// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
link: 'http://你的域名/index?inviteCode=2222',//这里可带参数，必须是同配置的JS安全域名一致
imgUrl:'http://你的域名/images/shuai.png',// 必须是同配置的JS安全域名一致
success: function () {}
})
})
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
console.log("出现错误了", res);
});
}
})
}
export default {
WXConfig
}
复制代码常见错误及原因
invalid signature签名错误。建议按如下顺序检查：
1.确认签名算法正确，可用官方工具进行校验。（mp.weixin.qq.com/debug/cgi-b…
2.确认
config中nonceStr（js中驼峰标准大写S）,timestamp与用以签名中的对应noncestr,timestamp一致。3.确认
url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及’？'后面的GET参数部分,但不包括'#'hash后面的部分。4.确认
config中的appid与用来获取jsapi_ticket的 appid一致。5.确保一定缓存
access_token和jsapi_ticket。(token已缓存再请求中，ticket我是请视情况而定)6.确保你获取用来签名的
url是动态获取的，如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。7.最重要: 准备工作做了吗
后端常见错误
1.url 问题
前端的url 使用
encodeURIComponent方法转换， 发送给后端， 后端在转回url的格式 www.baidu.com => 前端格式：https%3A%2F%2www.baidu.com%2F => 后端接收到的url ： https%3A%2F%2www.baidu.com%2F => 后端转格式： www.baidu.com 放到签名的URL
设置JS安全域名：设置>公众号设置>功能设置；把服务器域名填入JS接口安全域名。配置后需下载效验文件并上传你自己的服务器根目录。
jsapi_ticket 是否过期了
noncestr s是小写的，前端是大写的
timestamp 时间戳是都正确
微信 JS 接口签名校验工具
使用 签名校验工具 查看是否过期，时间戳问题，signature是否正确
