pulledup
于 2020-10-24 15:21:18 發(fā)布
1936
收藏 14
分類專欄： delphi使用JavaScript 文章標(biāo)簽： 1024程序員節(jié) Delphi使用JS Delphi開發(fā)微信
版權(quán)
delphi使用JavaScript
專欄收錄該內(nèi)容
6 篇文章2 訂閱
訂閱專欄
目錄
Delphi調(diào)用微信原生Web開發(fā)接口JS-SDK開發(fā)小程序及微信支付等的Rest API
一、概述及API
1、JS-SDK是對之前的 WeixinJSBridge 的一個包裝
2、JS-SDK版本
3、JS-SDK之H5支付(可統(tǒng)一為JSAPI支付或App內(nèi)支付)
4、JS-SDK之JSAPI支付
5、 JS-SDK中，有統(tǒng)一的API列表
6、微信生態(tài)的術(shù)語
7、微信官方文檔-開放平臺
8、微信官方文檔-微信公眾號
9、微信官方文檔-小程序
10、微信官方文檔-微信支付
11、微信官方文檔-微信小商店
12、微信官方文檔-智能對話
13、微信官方文檔-企業(yè)微信API
14、調(diào)用上述API的JavaScript腳本實現(xiàn)示例
二、Delphi調(diào)用微信原生Web開發(fā)接口JS-SDK的方法
1、調(diào)用的技術(shù)方案
2、關(guān)鍵
3、其余的“API列表”中的功能項目調(diào)用
三、客戶端
3.1、以delphi的方式調(diào)用服務(wù)器的Rest API方法
3.2、以伴隨http下載或async src路由到本地的javaScript或jQuery的方式調(diào)用服務(wù)器的Rest API方法
附：本博客相關(guān)文章文章：
Delphi調(diào)用微信原生Web開發(fā)接口JS-SDK開發(fā)小程序及微信支付等的Rest API
一、概述及API
1、JS-SDK是對之前的 WeixinJSBridge 的一個包裝
2017年前，在移動端，受限于設(shè)備性能和網(wǎng)絡(luò)速度，白屏?xí)用黠@。我們團隊把很多技術(shù)精力放置在如何幫助平臺上的Web開發(fā)者解決這個問題。因此我們設(shè)計了一個 JS-SDK 的增強版本，其中有一個重要的功能，稱之為“微信 Web 資源離線存儲”。
微信 Web 資源離線存儲是面向 Web 開發(fā)者提供的基于微信內(nèi)的 Web 加速方案。
通過使用微信離線存儲，Web 開發(fā)者可借助微信提供的資源存儲能力，直接從微信本地加載 Web 資源而不需要再從服務(wù)端拉取，從而減少網(wǎng)頁加載時間，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁瀏覽體驗。每個公眾號下所有 Web App 累計最多可緩存 5M 的資源。
比如，使用 JS-SDK 調(diào)用圖片預(yù)覽組件：
wx.previewImage({
current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
urls: [ // 所有圖片的URL列表，數(shù)組格式
'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)
}
})
微信面臨的問題是如何設(shè)計一個比較好的系統(tǒng)，使得所有開發(fā)者在微信中都能獲得比較好的體驗。這個問題是之前的 JS-SDK 所處理不了的，需要一個全新的系統(tǒng)來完成，它需要使得所有的開發(fā)者都能做到：
- 快速的加載
- 更強大的能力
- 原生的體驗
- 易用且安全的微信數(shù)據(jù)開放
- 高效和簡單的開發(fā)
這就是小程序（小程序的主要開發(fā)語言是 JavaScript）的由來。事實上 JS-SDK，除了支持“小程序”外，所有Web App都支持。
小程序的運行環(huán)境
運行環(huán)境 邏輯層 渲染層
iOS JavaScriptCore WKWebView
安卓 V8 chromium定制內(nèi)核
小程序開發(fā)者工具 NWJS Chrome WebView
網(wǎng)頁開發(fā)者在開發(fā)網(wǎng)頁的時候，只需要使用到瀏覽器，并且搭配上一些輔助工具或者編輯器即可。小程序的開發(fā)則有所不同，需要經(jīng)過申請小程序賬號、安裝小程序開發(fā)者工具、配置項目等等過程方可完成。
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替換了老、舊、笨，特別是內(nèi)存占用量巨大的UIWebView，它使用與Safari中一樣的Nitro JavaScript引擎，大大提高了頁面js執(zhí)行速度。
3、JS-SDK之H5支付(可統(tǒng)一為JSAPI支付或App內(nèi)支付)
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中，有統(tǒng)一的API列表
6、微信生態(tài)的術(shù)語
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、微信官方文檔-企業(yè)微信API
https://work.weixin.qq.com/api/doc
14、調(diào)用上述API的JavaScript腳本實現(xiàn)示例
方法：上述API中有關(guān)于JS調(diào)用的詳細(xì)說明。
網(wǎng)上有網(wǎng)友對幾個常用的接口做了JS代碼示例，可參考他們的分享
14.1、《前端如何在H5頁面調(diào)起微信支付》
14.2、《調(diào)用微信接口方法說明--JS-SDK》
14.3、《微信JS支付代碼_前端調(diào)用微信支付接口》
二、Delphi調(diào)用微信原生Web開發(fā)接口JS-SDK的方法
1、調(diào)用的技術(shù)方案
建議采用NetHTTP的Rest技術(shù)體系，詳見：
《delphi Restful:客戶端實現(xiàn)的四種方式及其比較》 https://blog.csdn.net/pulledup/article/details/104132753
有購買高勇“三層Rest服務(wù)器”源碼的朋友，可直接使用其中的GY_ServerFunctions函數(shù)庫。
2、關(guān)鍵
服務(wù)器端，成功對接微信支付的統(tǒng)一簽名安全規(guī)范：
《微信返回的簽名值，詳見簽名算法》 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3
微信接口類別中，其它非微信支付的簽名，具有統(tǒng)一的安全規(guī)范，與上面類似。
Delphi簽名管理單元：System.Hash.pas; 其中類：
THashSHA1 = record
THashSHA2 = record
示例：阿里云通訊-短信驗證碼發(fā)送及其簽名函數(shù)：
其中簽名采用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
//:內(nèi)含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特殊的一種規(guī)則，
// 即在一般的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; // 這里一定要設(shè)置GMT時區(qū)
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
// 構(gòu)造待簽名的請求串這里有兩步動作第1步，把排序后的參數(shù)順序拼接成如下格式：
// specialUrlEncode(參數(shù)Key) + “=” + specialUrlEncode(參數(shù)值)
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的簽名規(guī)則拼接成最終的待簽名串，規(guī)則如下：
// 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列表”中的功能項目調(diào)用
在服務(wù)器端，統(tǒng)一采用NetHTTP的Rest技術(shù)體系調(diào)用即可，參見二、1、調(diào)用的技術(shù)方案
三、客戶端
按照上述方法，因為你在自己的服務(wù)器端提供了Restful的API的調(diào)用方法，因而在任何客戶端（手機App或WAP觸屏H5、手機微信（或QQ）、電腦端微信（或QQ）、電腦端瀏覽器、電腦端App等），均可以JS方式或Delphi FMX、Delphi VCL的THttpNetClient等的方式，對你自己的服務(wù)器上的微信服務(wù)單元進(jìn)行請求和響應(yīng)。
3.1、以delphi的方式調(diào)用服務(wù)器的Rest API方法
詳見本文：二、2.1。
3.2、以伴隨http下載或async src路由到本地的javaScript或jQuery的方式調(diào)用服務(wù)器的Rest API方法
請參考網(wǎng)友文章：
3.2.1、《JavaScript中發(fā)出HTTP請求最常用的方法》：https://www.jb51.net/article/143683.htm。
3.2.2、《js的http請求中請求頭和響應(yīng)頭包含哪些內(nèi)容》：https://blog.csdn.net/weixin_37861326/article/details/82216068。
3.2.3、《JavaScript高級程序設(shè)計--在HTML中使用JavaScript》：https://blog.csdn.net/weixin_37861326/article/details/80998668。
附：本博客相關(guān)文章文章：
1、《delphi XE關(guān)于微信公眾號支付及微信零錢支付的便捷解決方案》
https://blog.csdn.net/pulledup/article/details/107771266
2、《delphi XE開發(fā)微信支付時所需的Android獲取手機存儲權(quán)限、Android獲取短信權(quán)限》
https://blog.csdn.net/pulledup/article/details/107773589
3、《delphi Restful:客戶端實現(xiàn)的四種方式及其比較》
https://blog.csdn.net/pulledup/article/details/104132753
4、 《Delphi Restful之客戶端javascript與中間件服務(wù)器交互》
https://blog.csdn.net/pulledup/article/details/109236875
5、《Delphi調(diào)用微信原生Web開發(fā)接口JS-SDK開發(fā)小程序及微信支付等》 https://blog.csdn.net/pulledup/article/details/109257077
6、《騰訊云聚合支付平臺Restful API，支付開發(fā)的又一福音，同時支持微信支付和支付寶》 https://blog.csdn.net/pulledup/article/details/109520247
喜歡的話，就在下面點個贊、收藏就好了，方便看下次的分享：
————————————————
