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

一、概述及API

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

2、JS-SDK版本

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

4、JS-SDK之JSAPI支付

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

6、微信生态的术语

7、微信官方文档-开放平台

8、微信官方文档-微信公众号

9、微信官方文档-小程序

10、微信官方文档-微信支付

11、微信官方文档-微信小商店

12、微信官方文档-智能对话

13、微信官方文档-企业微信API

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

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

1、调用的技术方案

2、关键

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

三、客户端

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列表

6、微信生态的术语

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=2_2

7、微信官方文档-开放平台

https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Resource_Center_Homepage.html

8、微信官方文档-微信公众号

https://developers.weixin.qq.com/doc/offiaccount/Message_Management/One-time_subscription_info.html

9、微信官方文档-小程序

https://developers.weixin.qq.com/doc/offiaccount/Message_Management/One-time_subscription_info.html

10、微信官方文档-微信支付

https://pay.weixin.qq.com/wiki/doc/api/index.html

11、微信官方文档-微信小商店

https://developers.weixin.qq.com/doc/ministore/minishopquickstart/introduction.html

12、微信官方文档-智能对话

https://openai.weixin.qq.com/@Pulledup_Robot/platform/robotAccount/skillIndex

13、微信官方文档-企业微信API

https://work.weixin.qq.com/api/doc

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专用varHashBytes: TBytes;beginHashBytes := 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专用beginResult := TNetEncoding.Url.Encode(Value).Replace('+', '%20').Replace('*', '%2A').Replace('%7E', '~');end;function GetTimestamp: string; // 这里一定要设置GMT时区beginResult := FormatDateTime('yyyy-mm-dd"T"hh:nn:ss"Z"', TTimeZone.local.ToUniversalTime(Now, false));end;varParams: TDictionary<string, string>;SortedParams: TArray<string>;Url, key, Signature: string;Response, SortedQueryString: string;HTTP: TNetHTTPClient;StringBuilder: TStringBuilder;JsonObj: TJSONObject;
beginResult := false;HTTP := TNetHTTPClient.Create(nil);Params := TDictionary<string, string>.Create;tryParams.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 dobeginStringBuilder.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 + '&'));finallyStringBuilder.DisposeOf;end;Url := 'https://dysmsapi.aliyuncs.com/?Signature=' + Signature + '&' + SortedQueryString;tryHTTP.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 thenbeginResultMsg := JsonObj.GetValue('Message').Value;Result := JsonObj.GetValue('Code').Value.ToUpper = 'OK';JsonObj.DisposeOf;end;excepton e: Exception doResultMsg := e.Message;end;finallyHTTP.DisposeOf;Params.DisposeOf;end;end;

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

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

三、客户端

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

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

详见本文：二、2.1。

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

请参考网友文章：

3.2.1、《JavaScript中发出HTTP请求最常用的方法》：https://www.jb51.net/article/143683.htm。

3.2.2、《js的http请求中请求头和响应头包含哪些内容》：https://blog.csdn.net/weixin_37861326/article/details/82216068。

3.2.3、《JavaScript高级程序设计--在HTML中使用JavaScript》：https://blog.csdn.net/weixin_37861326/article/details/80998668。

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

1、《delphi XE关于微信公众号支付及微信零钱支付的便捷解决方案》

https://blog.csdn.net/pulledup/article/details/107771266

2、《delphi XE开发微信支付时所需的Android获取手机存储权限、Android获取短信权限》

https://blog.csdn.net/pulledup/article/details/107773589

3、《delphi Restful:客户端实现的四种方式及其比较》

https://blog.csdn.net/pulledup/article/details/104132753

4、《Delphi Restful之客户端javascript与中间件服务器交互》

https://blog.csdn.net/pulledup/article/details/109236875

5、《Delphi调用微信原生Web开发接口JS-SDK开发小程序及微信支付等》 https://blog.csdn.net/pulledup/article/details/109257077

6、《腾讯云聚合支付平台Restful API，支付开发的又一福音，同时支持微信支付和支付宝》 https://blog.csdn.net/pulledup/article/details/109520247

喜欢的话，就在下面点个赞、收藏就好了，方便看下次的分享：