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

qq_40196738

已于 2022-05-19 11:28:48 修改

阅读量1.8k

点赞数 1

分类专栏： Web前端文章标签：前端

于 2020-05-13 15:21:53 首次发布

本文链接：https://blog.csdn.net/qq_40196738/article/details/105188543

版权

Web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、开发相关

二、解除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.location
  const 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

  // 解析 redirect
  const keyList = href.split('?redirect=')

  console.log({ ...window.location })

  if (keyList.length > 1) {
    const redirectUrl = decodeURIComponent(keyList.pop())
    window.location.href = redirectUrl
  }
}()

5、重定向跳转完成！