Delphi调用微信原生Web开发接口JS-SDK开发小程序及微信支付等的Rest API

Delphi调用微信原生Web开发接口JS-SDK开发小程序及微信支付等一、概述及API1、JS-SDK是对之前的 WeixinJSBridge 的一个包装2017年前，在移动端，受限于设备性能和网络速度，白屏会更加明显。我们团队把很多技术精力放置在如何帮助平台上的Web开发者解决这个问题。因此我们设计了一个 JS-SDK 的增强版本，其中有一个重要的功能，称之为“微信 Web 资源离线存储”。微

pulledup

3298人浏览 · 2020-10-24 15:21:18

pulledup · 2020-10-24 15:21:18 发布

Delphi调用微信原生Web开发接口JS-SDK开发小程序及微信支付等的Rest API

一、概述及API

1、JS-SDK是对之前的 WeixinJSBridge 的一个包装

2、JS-SDK版本

3、JS-SDK之H5支付(可统一为JSAPI支付或App内支付)

14、调用上述API的JavaScript脚本实现示例

二、Delphi调用微信原生Web开发接口JS-SDK的方法

3.1、以delphi的方式调用服务器的Rest API方法

3.2、以伴随http下载或async src路由到本地的javaScript或jQuery的方式调用服务器的Rest API方法

附：本博客相关文章文章：

Delphi调用微信原生Web开发接口JS-SDK开发小程序及微信支付等的Rest API

一、概述及API

1、JS-SDK是对之前的 WeixinJSBridge 的一个包装

2017年前，在移动端，受限于设备性能和网络速度，白屏会更加明显。我们团队把很多技术精力放置在如何帮助平台上的Web开发者解决这个问题。因此我们设计了一个 JS-SDK 的增强版本，其中有一个重要的功能，称之为“微信 Web 资源离线存储”。

微信 Web 资源离线存储是面向 Web 开发者提供的基于微信内的 Web 加速方案。

通过使用微信离线存储，Web 开发者可借助微信提供的资源存储能力，直接从微信本地加载 Web 资源而不需要再从服务端拉取，从而减少网页加载时间，为微信用户提供更优质的网页浏览体验。每个公众号下所有 Web App 累计最多可缓存 5M 的资源。

比如，使用 JS-SDK 调用图片预览组件：

wx.previewImage({
  current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
  urls: [ // 所有图片的URL列表，数组格式
    'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
  ],
  success: function(res) {
    console.log(res)
  }
})

微信面临的问题是如何设计一个比较好的系统，使得所有开发者在微信中都能获得比较好的体验。这个问题是之前的 JS-SDK 所处理不了的，需要一个全新的系统来完成，它需要使得所有的开发者都能做到：

- 快速的加载

- 更强大的能力

- 原生的体验

- 易用且安全的微信数据开放

- 高效和简单的开发

这就是小程序（小程序的主要开发语言是 JavaScript）的由来。事实上 JS-SDK，除了支持“小程序”外，所有Web App都支持。

小程序的运行环境

运行环境	逻辑层	渲染层
iOS	JavaScriptCore	WKWebView
安卓	V8	chromium定制内核
小程序开发者工具	NWJS	Chrome WebView

网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程方可完成。

2、JS-SDK版本

目前JSSDk线上版本是 1.0.0 和 1.1.0，更新版本为1.2.0 ，https://res.wx.qq.com/open/js/jweixin-1.2.0.js

采用苹果WKWebView。

苹果用WKWebView替换了老、旧、笨，特别是内存占用量巨大的UIWebView，它使用与Safari中一样的Nitro JavaScript引擎，大大提高了页面js执行速度。

3、JS-SDK之H5支付(可统一为JSAPI支付或App内支付)

https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_1

4、JS-SDK之JSAPI支付

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_8&index=7

5、 JS-SDK中，有统一的API列表

14、调用上述API的JavaScript脚本实现示例

方法：上述API中有关于JS调用的详细说明。

网上有网友对几个常用的接口做了JS代码示例，可参考他们的分享

14.1、《前端如何在H5页面调起微信支付》

14.2、《调用微信接口方法说明--JS-SDK》

14.3、《微信JS支付代码_前端调用微信支付接口》

二、Delphi调用微信原生Web开发接口JS-SDK的方法

1、调用的技术方案

建议采用NetHTTP的Rest技术体系，详见：

《delphi Restful:客户端实现的四种方式及其比较》 https://blog.csdn.net/pulledup/article/details/104132753

有购买高勇“三层Rest服务器”源码的朋友，可直接使用其中的GY_ServerFunctions函数库。

2、关键

服务器端，成功对接微信支付的统一签名安全规范：

《微信返回的签名值，详见签名算法》 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3

微信接口类别中，其它非微信支付的签名，具有统一的安全规范，与上面类似。

Delphi签名管理单元：System.Hash.pas; 其中类：

THashSHA1 = record

THashSHA2 = record

示例：阿里云通讯-短信验证码发送及其签名函数：

其中签名采用HMAC-SHA1 + Base64，编码采用：UTF-8，HMAC-SHA256算法类似：

function SendVerificationCodeBySMSAliyun(const AccessKeyId, AccessKeySecret, PhoneNumbers, SignName, TemplateCode, TemplateParam: string; var ResultMsg: string): Boolean;
// 签名采用HmacSHA1算法 + Base64，编码采用：UTF-8
//:内含MD5签名方式(我加的):
  function Sign(const AData, key: string): string; // SendVerificationCodeBySMS专用
  var
    HashBytes: TBytes;
  begin
    HashBytes := THashSHA1.GetHMACAsBytes(AData, key);
    Result := TNetEncoding.Base64.EncodeBytesToString(HashBytes);
  end;

// https://help.aliyun.com/document_detail/56189.html?spm=5176.doc55451.6.567.e2j11z
// 特殊URL编码这个是POP特殊的一种规则，
// 即在一般的URLEncode后再增加三种字符替换：加号（+）替换成 %20、星号（*）替换成 %2A、%7E 替换回波浪号（~）
// 参考代码如下：
  function SpecialUrlEncode(const Value: string): string; // SendVerificationCodeBySMS专用
  begin
    Result := TNetEncoding.Url.Encode(Value).Replace('+', '%20').Replace('*', '%2A').Replace('%7E', '~');
  end;

  function GetTimestamp: string; // 这里一定要设置GMT时区
  begin
    Result := FormatDateTime('yyyy-mm-dd"T"hh:nn:ss"Z"', TTimeZone.local.ToUniversalTime(Now, false));
  end;

var
  Params: TDictionary<string, string>;
  SortedParams: TArray<string>;
  Url, key, Signature: string;
  Response, SortedQueryString: string;
  HTTP: TNetHTTPClient;
  StringBuilder: TStringBuilder;
  JsonObj: TJSONObject;
begin
  Result := false;

  HTTP := TNetHTTPClient.Create(nil);
  Params := TDictionary<string, string>.Create;
  try
    Params.Add('AccessKeyId', AccessKeyId);
    Params.Add('Timestamp', GetTimestamp);
    Params.Add('Format', 'JSON');
    Params.Add('SignatureMethod', 'HMAC-SHA1');
    Params.Add('SignatureNonce', THashMD5.GetHashString(TGUID.NewGuid.ToString));
    Params.Add('SignatureVersion', '1.0');
    Params.Add('Action', 'SendSms');
    Params.Add('Version', '2017-05-25');
    Params.Add('RegionId', 'cn-hangzhou');
    Params.Add('PhoneNumbers', PhoneNumbers);
    Params.Add('SignName', SignName);
    Params.Add('TemplateCode', TemplateCode);
    Params.Add('TemplateParam', TemplateParam);
    Params.Add('OutId', '');

    SortedParams := Params.keys.ToArray;
    TArray.Sort<string>(SortedParams);

    StringBuilder := TStringBuilder.Create;
    try
      // 构造待签名的请求串这里有两步动作第1步，把排序后的参数顺序拼接成如下格式：
      // specialUrlEncode(参数Key) + “=” + specialUrlEncode(参数值)
      for key in SortedParams do
      begin
        StringBuilder.Append('&');
        StringBuilder.Append(SpecialUrlEncode(key));
        StringBuilder.Append('=');
        StringBuilder.Append(SpecialUrlEncode(Params.Items[key]));
      end;
      // 去除第一个多余的&符号
      SortedQueryString := StringBuilder.ToString.Substring(1);

      // 按POP的签名规则拼接成最终的待签名串，规则如下：
      // HTTPMethod + “&” + specialUrlEncode(“/”) + ”&” + specialUrlEncode(sortedQueryString)
      StringBuilder.Clear;
      StringBuilder.Append('GET').Append('&');
      StringBuilder.Append(SpecialUrlEncode('/')).Append('&');
      StringBuilder.Append(SpecialUrlEncode(SortedQueryString));
      // 特别说明：POP要求需要后面多加一个“&”字符，即accessSecret + “&”
      Signature := SpecialUrlEncode(Sign(StringBuilder.ToString, AccessKeySecret + '&'));
    finally
      StringBuilder.DisposeOf;
    end;

    Url := 'https://dysmsapi.aliyuncs.com/?Signature=' + Signature + '&' + SortedQueryString;
    try
      HTTP.ContentType := 'application/x-www-form-urlencoded';
      Response := HTTP.Get(Url).ContentAsString(TEncoding.UTF8);
      // '{"Message":"OK","RequestId":"44B0443C-0157-45EF-A8C0-F9E3B0EA9E97","BizId":"149018402183518984^0","Code":"OK"}'
      JsonObj := TJSONObject.ParseJSONValue(Response) as TJSONObject;
      if JsonObj <> nil then
      begin
        ResultMsg := JsonObj.GetValue('Message').Value;
        Result := JsonObj.GetValue('Code').Value.ToUpper = 'OK';
        JsonObj.DisposeOf;
      end;
    except
      on e: Exception do
        ResultMsg := e.Message;
    end;
  finally
    HTTP.DisposeOf;
    Params.DisposeOf;
  end;

end;

3、其余的“API列表”中的功能项目调用

在服务器端，统一采用NetHTTP的Rest技术体系调用即可，参见二、1、调用的技术方案

三、客户端

按照上述方法，因为你在自己的服务器端提供了Restful的API的调用方法，因而在任何客户端（手机App或WAP触屏H5、手机微信（或QQ）、电脑端微信（或QQ）、电脑端浏览器、电脑端App等），均可以JS方式或Delphi FMX、Delphi VCL的THttpNetClient等的方式，对你自己的服务器上的微信服务单元进行请求和响应。