目录
Delphi调用微信原生Web开发接口JS-SDK开发小程序及微信支付等的Rest API
1、JS-SDK是对之前的 WeixinJSBridge 的一个包装
3、JS-SDK之H5支付(可统一为JSAPI支付或App内支付)
二、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列表
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专用
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等的方式,对你自己的服务器上的微信服务单元进行请求和响应。
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
喜欢的话,就在下面点个赞、收藏就好了,方便看下次的分享: