Antes de 2017, en el lado móvil, limitado por el rendimiento del dispositivo y la velocidad de la red, la pantalla blanca será más obvia. Nuestro equipo pone mucha energía técnica en cómo ayudar a los desarrolladores web en la plataforma a resolver este problema. Por lo tanto, diseñamos una versión mejorada de JS-SDK, que tiene una función importante llamada " Almacenamiento sin conexión de recursos web de WeChat ".

El almacenamiento fuera de línea de los recursos web de WeChat es una solución de aceleración web basada en WeChat para desarrolladores web.

Al utilizar el almacenamiento fuera de línea de WeChat, los desarrolladores web pueden utilizar las capacidades de almacenamiento de recursos que proporciona WeChat para cargar directamente recursos web localmente desde WeChat sin extraerlos del servidor, lo que reduce el tiempo de carga de la página web y brinda a los usuarios de WeChat una mejor navegación web. Experiencia. Todas las aplicaciones web de cada cuenta oficial pueden almacenar en caché hasta 5 millones de recursos.

Por ejemplo, use JS-SDK para llamar al componente de vista previa de la imagen:

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)
  }
})

El problema al que se enfrenta WeChat es cómo diseñar un mejor sistema para que todos los desarrolladores puedan obtener una mejor experiencia en WeChat. Este problema no se puede resolver con el JS-SDK anterior. Se necesita un sistema nuevo para completarlo. Debe permitir que todos los desarrolladores:

-Carga rápida

-Capacidades más poderosas

-Experiencia nativa

-Apertura de datos WeChat seguros y fáciles de usar

-Desarrollo eficiente y sencillo

Este es el origen de los pequeños programas (el principal lenguaje de desarrollo de los pequeños programas es JavaScript) . De hecho, JS-SDK, además de admitir "pequeños programas", admite todas las aplicaciones web.

El entorno operativo del applet

Entorno operativo	Capa lógica	Capa de renderizado
iOS	JavaScriptCore	WKWebView
Androide	V8	núcleo personalizado de cromo
Mini herramientas de desarrollo de programas	NWJS	Chrome WebView

Cuando los desarrolladores web están desarrollando páginas web , solo necesitan usar un navegador y vincularlas con algunas herramientas auxiliares o editores. El desarrollo de los applets es diferente, necesita pasar por el proceso de solicitar cuentas de applet, instalar herramientas de desarrollo de applets, configurar proyectos, etc.

2. Versión JS-SDK

Actualmente, la versión en línea de JSSDk es 1.0.0 y 1.1.0, y la versión actualizada es 1.2.0, https://res.wx.qq.com/open/js/jweixin-1.2.0.js

Utilice Apple WKWebView.

Apple reemplazó lo viejo, viejo y tonto con WKWebView, especialmente UIWebView, que tiene una gran huella de memoria. Utiliza el mismo motor Nitro JavaScript que en Safari, lo que mejora enormemente la velocidad de ejecución de la página js.

3. Pago H5 de JS-SDK (se puede unificar como pago JSAPI o pago en la aplicación )

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

4. Pago JSAPI de JS-SDK

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

5. Hay una lista de API unificada en JS-SDK

14. Un ejemplo de implementación de secuencia de comandos de JavaScript que llama a la API anterior

Método: hay instrucciones detalladas sobre las llamadas JS en la API anterior.

Algunos internautas crearon ejemplos de código JS para varias interfaces de uso común en Internet; consulte su uso compartido

14.1, "la página principal cómo reproducir una melodía de micro-canales de pago H5"

14.2, "Se describe la invocación del método de interfaz de microcanal --JS-SDK"

14.3, "código de pago de micro-canales _ interfaz de pago frontal de micro-canales de llamada JS"

En segundo lugar, Delphi llama al método JS-SDK de la interfaz de desarrollo web nativa WeChat

1. La solución técnica denominada

Se recomienda utilizar el sistema de tecnología Rest de NetHTTP, consulte:

"Delphi Restful: cuatro formas de implementación del cliente y su comparación" https://blog.csdn.net/pulledup/article/details/104132753

Los amigos que hayan comprado el código fuente del "servidor de descanso de tres niveles" de Gao Yong pueden usar directamente la biblioteca GY_ServerFunctions.

2. La clave

En el lado del servidor, acoplado con éxito con la especificación de seguridad de firma unificada de WeChat Pay:

"El valor de firma devuelto por WeChat, consulte el algoritmo de firma" https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3

En la categoría de interfaz de WeChat, otras firmas de pago que no son de WeChat tienen especificaciones de seguridad uniformes, similares a las anteriores.

Unidad de gestión de firmas de Delphi: System.Hash.pas; donde la clase:

THashSHA1 = registro

THashSHA2 = registro

Ejemplo: envío de código de verificación de Alibaba Cloud Communication-SMS y su función de firma:

La firma usa HMAC-SHA1 + Base64, y la codificación usa: UTF-8. El algoritmo HMAC-SHA256 es similar:

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. Llamar a los elementos de la función en el resto de la "lista de API"

En el lado del servidor, es suficiente usar el sistema de tecnología Rest de NetHTTP para llamar, ver 2. 1. Llamar a soluciones técnicas

Tres, el cliente

De acuerdo con el método anterior, debido a que proporciona el método de llamada Restful API en su propio servidor, puede usarlo en cualquier cliente (aplicación móvil o pantalla táctil WAP H5, WeChat móvil (o QQ), computadora WeChat (o QQ), computadora Puede solicitar y responder a la unidad de servicio WeChat en su propio servidor en modo JS o Delphi FMX, THttpNetClient de Delphi VCL, etc.).

3.1, llame al método Rest API del servidor en modo delphi

Consulte este artículo para obtener más detalles: 2. 2.1.

3.2. Llame al método Rest API del servidor siguiendo la descarga http o el enrutamiento async src a javaScript o jQuery local

Consulte el artículo de internauta:

3.2.1, "El método más utilizado para realizar solicitudes HTTP en JavaScript" : https://www.jb51.net/article/143683.htm .

3.2.2 "¿Cuáles son los contenidos del encabezado de solicitud y el encabezado de respuesta en la solicitud http js" : https://blog.csdn.net/weixin_37861326/article/details/82216068 .

3.2.3, " Programación avanzada de JavaScript: uso de JavaScript en HTML " : https://blog.csdn.net/weixin_37861326/article/details/80998668 .

Adjunto: Artículos relacionados de este blog:

1. " La solución conveniente de Delphi XE para el pago de la cuenta oficial de WeChat y el pago por cambio de WeChat "

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

2. " Android para obtener permiso de almacenamiento móvil y Android para obtener permiso de SMS al desarrollar el pago WeChat en delphi XE "

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

3. " Delphi Restful: cuatro formas de implementación del cliente y su comparación "

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

4. "Interacción entre javascript cliente y servidor middleware de Delphi Restful"

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

5. " Delphi llama a la interfaz de desarrollo web nativa de WeChat JS-SDK para desarrollar pequeños programas y pagos de WeChat, etc. " https://blog.csdn.net/pulledup/article/details/109257077

6. " Tencent Cloud Payment Platform Restful API, otro evangelio para el desarrollo de pagos, que admite WeChat Pay y Alipay al mismo tiempo " https://blog.csdn.net/pulledup/article/details/109520247

Si le gusta, simplemente haga clic en Me gusta y en favorito a continuación, para que pueda ver el siguiente intercambio: