|
pulledup 于 2020-10-24 15:21:18 发布 1936 收藏 14 分类专栏： delphi使用JavaScript 文章标签： 1024程序员节 Delphi使用JS Delphi开发微信 版权 delphi使用JavaScript 专栏收录该内容 6 篇文章2 订阅 订阅专栏 目录 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./10/1048/104857/10485726_980x1200_0.jpg', urls: [ // 所有图片的URL列表，数组格式 'https://img1./10/1048/104857/10485731_980x1200_0.jpg', 'https://img1./10/1048/104857/10485726_980x1200_0.jpg', 'https://img1./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./?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 喜欢的话，就在下面点个赞、收藏就好了，方便看下次的分享： ————————————————
|
|
|
