（第三方平台）开发相关，解除80端口占用，微信公众号分享jssdk实现，微信开放平台登录接口接入，2022微信分享接入本地调试，微信分享定制

一、开发相关

1.平台地址

微信开放平台
QQ互联平台SDK

2.文章收集

来自CSDN兄台的QQ登录使用的教程
微信网站应用开发的详细流程和引导

VueJs单页应用实现微信网页授权及微信分享功能
【必看精贴】微信网页分享开发，配置本地调试

微信分享功能实现

3.本地测试

1.关于本地测试OAuth,PC和移动修改hosts
2.whistle修改80代理端口

二、解除80端口占用

控制面板->服务->将下图服务停止即可

上述whistle使用，不过情况不太好，成本太高。
故暂使用80端口配合nginx转发至本机服务器端口3000实现。

三、微信公众号分享jssdk实现

1.注册服务号，认证300元后，即可使用权限API。

2.jssdk下载，以及安全域名配置 + ip白名单设置。
此处先尝试在云服务器上传MP_verify。让申请先通过，

在测试的时候修改本机的HOSTS 让k12-code.com指向本地服务器80端口（没必要使用443配合证书），应该就可以调用接口了。

3、根据 JSSDK文档完成access_token的生成和ticket票据的获取，生成签名；

// 注：这个签名由客户端传入 当前页面的URL,不带哈希部分 给服务端，再由服务端进行签名生成返回给客户端，客户端最终完成 wx.config 的初始化，然后客户端在微信环境下就能调用微信分享功能了。

微信 JS 接口签名校验工具

4、在微信开发者工具，访问k12-code（映射本机127.0.0.1），进行wx.config的配置打开debug调用接口是否可使用。

可以看到，权限调用成功。（二级域名也可以访问）
为验证之前本机域名映射的正确性，我们换一个未绑定的域名（也通过改HOSTS 本机映射）。

失败，提示域名错误。

到这儿，其实微信接口的本地开发，或者第三方平台接口的本地开发的性质都一样，都可以通过修改HOSTS映射至本机IP。这里涉及DNS解析知识，以后补给。

接下来是开发测试分享接口

其中3.1，3.2无法本机模拟测试，但是3.3和3.4均测试成功。开发到这就告一段落了。

四、微信开放平台登录接口接入

1.企业号注册 (QQ邮箱)
2.网站应用创建 (审核)。
3.开发资质认证 (300元)。
4.开始接入，按照文档步骤

一样的本地开发，采用HOSTS修改映射。nginx转发请求

这里搭建测试环境的就不论了。直接到用户扫码后，重定向到网页（服务器），服务器接收到的code，如下：

可以拿code获取access_token // 这里我用node https模块发送请求

通过access_token调接口获取用户信息

之后就是涉及服务端数据入库的过程，注：如果希望同平台多应用用户数据共同，需要用到unionid，它代表当前开发平台账号的用户通用标识。

补充：基于cookie（即session标识前后联调），记得将所有请求域名都统一修改，不要使用localhost发请求，也不要请求的host是localhost，因为request cookie只会携带和目标host域名匹配的cookie数据。

来自2012年大佬的点拨：Cookie的Domain的作用域/有效范围

2022微信分享接入&本本地调试

1、微信分享接入

对于服务端：配置【IP白名单】，并获取 access_token 。
对于客户端：使用 jssdk 当前客户端的域名，必须是配置在公众号里的【JS接口安全域名】里。

2、关于本地调试：

1、hosts 代理 k12-code.com （js 接口安全域名）

2、nginx 变更

3、服务端 session 注入变更。

4、客户端 API 基址变更

5、微信开发者工具 - 公众号调试模式

微信分享定制

如果上述分享接入，和本地调试都没问题，其实微信分享定制，也就是利用规则的问题：
首先我们知道微信分享实体化需要调研JSSDK，且要传入4个参数:

title,
desc,
link,
imgUrl

既然参数都是动态化的，那么我们就可以抽象出来，首先建一个页面。

这里原本直接定制化即可，不过微信要求跳转的链接 link，也必须是 JS接口安全域名列表里的。
这里就需要转一下思路，我们可以跳转合法的JS域名，在页面内再做重定向。
link => 个人页面 -> （重定向）实际页面

这里唯一麻烦的就是 微信会对未转义的参数进行过滤，所以 link 参数，需要 encodeURIComponent 一下；

1、这里我直接贴二维码生成的代码：

// 生成二维码
async function genQRCode(data) {// 将标题 描述 封面 转成拼接参数let { href, origin } = window.location;// href = "https://admin.k12-code.com/setting/wx-share-custom"// origin = "https://admin.k12-code.com"// 这里我们通过 Link 定制化，全部访问 ?redirect=链接 内部逻辑进行跳转即可。const redirectLink = encodeURIComponent(`${origin}/?redirect=${link}`);const hash = `#link=${redirectLink}&title=${title}&desc=${desc}&imgUrl=${imgUrl}&mode=share`;const wholeUrl = href + hash;const qrcodeImage = await text2QRCode(wholeUrl);console.log(wholeUrl);createBasicModal({title: "微信扫描当前二维码",footer: null,children: (<div di-fl=""><img src={qrcodeImage} width="200" /><p co-da="" ml-10="">扫码后，通过右上角按钮进行转发 分享或转发即可。</p></div>),});
}

2、二维码链接地址如下：
https%3A%2F%2Fadmin.k12-code.com%2Fsetting%2Fwx-share-custom%23link%3Dhttps%3A%2F%2Fadmin.k12-code.com%3Fredirect%3Dhttp%3A%2F%2Fwww.baidu.com%26title%3D%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B%26desc%E6%97%A0%26imgUrl%3Dhttps%3A%2F%2Fimg.com%2F111.png%26mode%3Dshare

这里我们#后面的参数就是4个微信分享参数，然后我们再 useEffect 中进行解析，并更新微信jssdk实体
注： link 包括了跳转页以及页内重定向参数。

useEffect(() => {const hashParams = parseHash();let { imgUrl, title, link, desc, mode } = hashParams;imgUrl = decodeURIComponent(imgUrl);title = decodeURIComponent(title);link = decodeURIComponent(link);desc = decodeURIComponent(desc);// 如果是移动端 处于分享状态if (mode === "share") {setShareMode(true);setLink(link);setDesc(desc);setTitle(title);setImgUrl(imgUrl);// 更新微信分享实体updateWXShareEntity({title,desc,link,imgUrl,});}
}, []);

3、上述useEffect 实际是用户扫码后，在微信客户端触发的，然后维信解析出的链接就是 link 链接
https%3A%2F%2Fadmin.k12-code.com%3Fredirect%3Dhttp%3A%2F%2Fwww.baidu.com

注：我们需要在根文件进行 jssdk 初始化wx.config，不然 wx.ready 无法正常触发，也就没办法分享

然后点击右上角分享，就可以分享成功，生产微信卡片。

4、然后手机点击微信卡片后，就会跳转 link。

为了加快跳转，我们再 .html 内直接引入 script redirect.js 标签并解析；

/*** @description /redirect 检测并跳转（目前用于微信分享定制的网页转发）*//*** 解析 search 参数*/
function parseSearch() {// 需兼容 hash模式const { href } = window.locationconst searchIndex = href.indexOf('?')let search = href.slice(searchIndex)if (!search.includes("?")) {return {};}search = search.slice(1);const map = {};const searchArr = search.split("&");searchArr.forEach((i, index) => {const [k, v] = i.split("=");map[k] = v;});return map;
}// 自执行检测并跳转
!function () {const { href } = window.location// 解析 redirectconst keyList = href.split('?redirect=')console.log({ ...window.location })if (keyList.length > 1) {const redirectUrl = decodeURIComponent(keyList.pop())window.location.href = redirectUrl}
}()

5、重定向跳转完成！