微信js-sdk接口调用

博主：江河C
发布时间：2022 年 09 月 25 日
664 次浏览
暂无评论
1765字数
分类：学习笔记建站教程

## 前言

博客的链接通过微信分享后，发现没有图标跟介绍，看着贼难受，才发现好像那些有图标的是调用了微信的js接口，于是就打算用自己的公众号搞一个微信js。

## 开发步骤

### 步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
![js域名绑定.png](https://t7777fimg.oss-cn-hangzhou.aliyuncs.com/usr/uploads/2022/09/3613789718.png)

> 填写之前是需要将[MP_verify_Dj41m8Ovv8TCu2rN.txt]文档下载上传到自己域名空间进行验证的。

备注：登录后可在“开发者中心”查看对应的接口权限。![配置域名](https://t7777fimg.oss-cn-hangzhou.aliyuncs.com/usr/uploads/2022/09/472981184.png)

### 步骤二：配置jssdk.php

新建jssdk.php文件

```
<?php
class JSSDK {
  private $appId;
  private $appSecret;

public function __construct($appId, $appSecret) {
    $this->appId = $appId;
    $this->appSecret = $appSecret;
  }

public function getSignPackage() {
    $jsapiTicket = $this->getJsApiTicket();

// 注意 URL 一定要动态获取，不能 hardcode.
    $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
    $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

$timestamp = time();
    $nonceStr = $this->createNonceStr();

// 这里参数的顺序要按照 key 值 ASCII 码升序排序
    $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";

$signature = sha1($string);

$signPackage = array(
      "appId"     => $this->appId,
      "nonceStr"  => $nonceStr,
      "timestamp" => $timestamp,
      "url"       => $url,
      "signature" => $signature,
      "rawString" => $string
    );
    return $signPackage; 
  }

private function createNonceStr($length = 16) {
    $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    $str = "";
    for ($i = 0; $i < $length; $i++) {
      $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
    }
    return $str;
  }

private function getJsApiTicket() {
    // jsapi_ticket 应该全局存储与更新，以下代码以写入到文件中做示例
    $data = json_decode($this->get_php_file("jsapi_ticket.php"));
    if ($data->expire_time < time()) {
      $accessToken = $this->getAccessToken();
      // 如果是企业号用以下 URL 获取 ticket
      // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
      $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
      $res = json_decode($this->httpGet($url));
      $ticket = $res->ticket;
      if ($ticket) {
        $data->expire_time = time() + 7000;
        $data->jsapi_ticket = $ticket;
        $this->set_php_file("jsapi_ticket.php", json_encode($data));
      }
    } else {
      $ticket = $data->jsapi_ticket;
    }

return $ticket;
  }

private function getAccessToken() {
    // access_token 应该全局存储与更新，以下代码以写入到文件中做示例
    $data = json_decode($this->get_php_file("access_token.php"));
    if ($data->expire_time < time()) {
      // 如果是企业号用以下URL获取access_token
      // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
      $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
      $res = json_decode($this->httpGet($url));
      $access_token = $res->access_token;
      if ($access_token) {
        $data->expire_time = time() + 7000;
        $data->access_token = $access_token;
        $this->set_php_file("access_token.php", json_encode($data));
      }
    } else {
      $access_token = $data->access_token;
    }
    return $access_token;
  }

private function httpGet($url) {
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_TIMEOUT, 500);
    // 为保证第三方服务器与微信服务器之间数据传输的安全性，所有微信接口采用https方式调用，必须使用下面2行代码打开ssl安全校验。
    // 如果在部署过程中代码在此处验证失败，请到 http://curl.haxx.se/ca/cacert.pem 下载新的证书判别文件。
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);
    curl_setopt($curl, CURLOPT_URL, $url);

$res = curl_exec($curl);
    curl_close($curl);

return $res;
  }

private function get_php_file($filename) {
    return trim(substr(file_get_contents($filename), 15));
  }
  private function set_php_file($filename, $content) {
    $fp = fopen($filename, "w");
    fwrite($fp, "<?php exit();?>" . $content);
    fclose($fp);
  }
}
```

### 步骤三：配置AppID、AppSecret

在需要分享的页面引入jssdk.php文件

```
<?php
require_once "jssdk.php";
$jssdk = new JSSDK("你自己的appid", "你自己的appsecret");
$signPackage = $jssdk->GetSignPackage();
?>
```

### 步骤四：引入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 标准模块加载方法加载

> 我自己是使用第二个链接，第一个好像不是很稳定，当然也可以将js文件下载到本地再调用```<script src="<?php echo STATIC_PATH; ?>js/wxshare/jweixin-1.0.0.js"></script>```

### 步骤五：通过 config 接口注入权限验证配置

所有需要使用 JS-SDK 的页面必须先注入配置信息，否则将无法调用（同一个 url 仅需调用一次，对于变化 url 的SPA的web app可在每次 url 变化时进行调用,目前 Android 微信客户端不支持 pushState 的H5新特性，所以使用 pushState 来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

```
wx.config({
        debug: true,
        appId: '<?php echo $signPackage["appId"];?>',
        timestamp: <?php echo $signPackage["timestamp"];?>,
        nonceStr: '<?php echo $signPackage["nonceStr"];?>',
        signature: '<?php echo $signPackage["signature"];?>',
        jsApiList: [
            'checkJsApi',
            'onMenuShareAppMessage',
            'updateTimelineShareData'
        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

});
```

config接口注入权限有几个需要注意的：1.需要用到的接口都必须添加到jsApiList列表中，不然会报错；2.‘updateAppMessageShareData’是目前分享给好友的最新接口，但是我用了好像无法自定义图片跟描述，按照官方的教程修改之后也没办法；所以我目前用的是旧的接口，也就是‘onMenuShareAppMessage’，但是这个接口可能是官方打算废弃，所以没怎么维护，在微信打开网站后必须点击刷新才可以让标题跟新，不然分享的标题存在延迟
</div>

### 步骤六：通过 ready 接口处理成功验证

```
wx.ready(function(){
	wx.onMenuShareAppMessage({
		title: '', // 分享标题
		desc: '', // 分享描述
		link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
		imgUrl: '', // 分享图标
		success: function () {
			// 设置成功
		}
	})
// config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
});
```

## 结尾

目前到这一步，就可以实现微信分享自定义了，当然也可自己在描述地方加上随机的语句，我是用的一言接口```<?php echo file_get_contents('https://v1.hitokoto.cn/?c=f&encode=text');?>```
;也可以自己添加随机照片。

最后修改：2024 年 04 月 15 日