[Tutorial] Proceso detallado de importación de fuentes externas al subprograma WeChat

Language 2023-10-01 04:32:30 views: null

Prefacio

En el subprograma WeChat, configuramos la fuente del texto a través de la propiedad CSS font-family en el archivo wxss, y el subprograma WeChat tiene fuentes integradas que admite. Puede verificar las fuentes admitidas por el subprograma WeChat a través de las indicaciones del código. :

Consulte los estilos específicos de estas fuentes:

Subprograma WeChat - visualización de fuentes_No mueva mi puntero blog-CSDN blog familia de fuentes uno: 'Courier New', Courier, monoespacio; familia de fuentes dos: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ; familia de fuentes: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', ... https://blog.csdn.net/include_IT_dog/article/details/98382276

En el desarrollo real, nuestros diseñadores de UI pueden usar una variedad de fuentes al dibujar prototipos. Estas fuentes no son fuentes integradas en los miniprogramas de WeChat. A continuación, explicaremos en detalle cómo usar estas fuentes en los miniprogramas de WeChat. ;

1. Proceso de importación de fuentes

El subprograma WeChat proporciona a los desarrolladores una API dedicada para importar fuentes externas:wx.loadFontFace

Su documentación oficial es la siguiente:

wx.loadFontFace(Objeto objeto) | Documento abierto de WeChat

Puede consultar los documentos anteriores para conocer las especificaciones de uso específicas. A continuación, nos centraremos en varios problemas que necesitan atención:

  1. Especifique el recurso del archivo de fuente a través del parámetro de fuente, que puede ser un recurso local o un recurso de red. En este ejemplo, se utilizan recursos de red; si es un recurso de red, el enlace de fuente debe ser https, no http; de lo contrario, la fuente el recurso no se puede importar normalmente ;
  2. El subprograma WeChat tiene restricciones en los formatos de fuente que admite, pero esto no se indica claramente en el documento. Según pruebas reales, los ttf|ttc|otfformatos de fuente comunes como
  3. El enlace de fuente debe ser del mismo origen, o se debe habilitar la compatibilidad con cors; el llamado cors se refiere al intercambio de recursos entre dominios, lo que significa que si el miniprograma y el servidor que almacena el enlace de fuente no son del mismo origen , el soporte de cors debe estar habilitado para que el mini programa pueda acceder al servidor normalmente y obtener los recursos de fuentes; en este ejemplo, los recursos de fuentes se implementan a través de nginx y simplemente agrega soporte de cors (se discutirá en detalle más adelante)

Después de aclarar las precauciones, echemos un vistazo al método de importación específico (debido a que hay muchos archivos de fuentes que deben importarse, la importación por lotes se realiza en app.js):

Tomemos como ejemplo app.jsla importación en un archivo :DIN_Alternate_Bold.ttf

App({
  data: {

  },
  getFonts(name) //导入外部字体
    {
      let url = "yourURL" //自己服务器的域名(或IP)
      let source = 'url(' + url + name + ')'
      console.log(source)
      wx.loadFontFace({
        family: name.substring(0, name.length - 4), //名称去掉后缀
        source: source,
        global: true,
        success(res) {
          console.log("load " + name.substring(0, name.length - 4) + " success")
          //   console.log(res)
        },
        fail(res) {
          console.log("load " + name.substring(0, name.length - 4) + " failed")
          console.log(res) //出错则打印信息
        }
      })
    },

  onLaunch() {
    console.log('app.js载入')
    this.getFonts('DIN_Alternate_Bold.ttf')
  },

  globalData: {
  }
})

Llamamos getFontsa la API oficial a través del método para importar el archivo de fuente externo y luego onLaunchllamamos al método para cargar el recurso de fuente externo cuando se carga app.js;

wx.loadFontFaceUna breve explicación de los parámetros en :

  1. family: Nombre de fuente personalizado (el nombre aquí está completamente personalizado, pero debe ser coherente con el nombre utilizado en wxss)
  2. source: La dirección del recurso de fuente; formato:url(https://yourURL/DIN_Alternate_Bold.ttf)
  3. global: Si la fuente tiene efecto global, debido a que la importamos en app.js, debemos configurarla para que tenga efecto global; de lo contrario, el estilo de fuente importado aquí no se puede usar en el archivo wxss de cada página.
  4. success/fail: Función de devolución de llamada para el éxito o el fracaso de la importación de recursos de fuentes, que puede imprimir información rápida

Una vez que el recurso de fuente se haya importado correctamente, podemos usarlo en el archivo wxss. El ejemplo es el siguiente:
En app.wxss:

.DIN_Alternate_Bold{
    font-family: 'DIN_Alternate_Bold';
}

Aquí DIN_Alternate_Boldestá el nombre de fuente personalizado en el código js anterior (configurando la familia)

En este caso, qué parte del texto necesita configurarse con DIN_Alternate_Boldel estilo de fuente, solo necesita class = "DIN_Alternate_Bold"hacerlo, lo cual es más conveniente.

2. Implementación de recursos de fuentes

Como se explica en las notas anteriores, necesitamos implementar los recursos de fuentes en el servidor nginx y habilitar el soporte cros, y deben ser accesibles a través de https. A continuación, resolveremos estos problemas gradualmente;

2.1 Preparación del servidor

En este ejemplo, se utiliza el servidor Huawei Cloud ECS (el sistema operativo es ubuntu), se configuran las reglas del grupo de seguridad y se abre el puerto 80 (el puerto predeterminado de nginx).

Cabe señalar que si el subprograma WeChat necesita estar en línea, el servidor utilizado debe tener una IP pública; si solo se usa para aprendizaje y pruebas locales, se puede usar una máquina virtual;

Instalación 2.2nginx

2.2.1 descargar nginx

Visite el sitio web oficial: nginx: descargar

Busque la versión que desea descargar:

Se recomienda que la versión no sea demasiado baja, en este ejemplo se utiliza 1.20.2.

Una vez completada la descarga, transfiérala al servidor y tar zxvf nginx-1.20.2.tar.gz -C /opt/descomprímala mediante el comando.

nginx-1.20.2.tar.gz es el nombre del paquete comprimido; /opt/ es la ruta de descompresión, que se puede personalizar

2.2.2 instalación de nginx

Primero ingrese al directorio de descompresión de nginx:

Luego configure ssl:

Instrucciones de ejecución:./configure --prefix=/usr/local/nginx --with-http_ssl_module

./configure es para configurar nginx; --prefix es la ruta de instalación de nginx; --with-http_ssl_module habilita la compatibilidad con SSL en la superficie;

Siguiente compilar e instalar:

Instrucciones de ejecución:make && make install

Luego espere a que se complete la compilación y la instalación;

Una vez completada la instalación, ingrese la ruta de instalación /usr/local/nginxy verifique la versión de nginx para instalar el módulo:sbin/nginx -V

2.2.3 inicio/apagado de nginx

Las instrucciones para iniciar y detener nginx están todas en la carpeta sbin:

  • nginx comienza:sbin/nginx

Una vez completado el inicio, ps -ef | grep nginxverifique si el inicio fue exitoso:

Como se muestra arriba, el inicio es exitoso;

También puedes netstat -anp | grep 80verlo a través de:

  • Apagado de nginx:sbin/nginx -s stop

Precauciones:

  1. Si nginx no se puede iniciar y detener normalmente, y si ocurre un error al iniciar, el puerto está ocupado, puede netstat -anp | grep 80verificar si el puerto 80 está ocupado, si es así, simplemente finalice el proceso ( kill -9 PID);
  2. Si el proceso ha finalizado después de finalizar nginx:master, pero aparece , y después de matar un proceso, se iniciará automáticamente un proceso de trabajo, y el rendimiento específico es que el número de proceso se extiende; esto indica que ha aparecido un proceso zombienginx:worker y el proceso no se puede terminar simplemente matándolo, necesitas usar , kill Mata todos los procesos relacionados con nginx;kill -9killall -9 nginx

2.2.4 uso de nginx

Una vez completada la instalación y la implementación, puede acceder a nginx escribiendo en el navegador http://你的服务器ip/:

Si no se puede acceder, primero considere si las reglas del grupo de seguridad están configuradas y el puerto 80 está abierto (servidor en la nube)

Luego considere la configuración del firewall. Si no puede acceder al navegador porque el firewall está activado, puede considerar desactivarlo primero:

  • Encienda el cortafuegos:systemctl start firewalld.service
  • Verifique el estado del firewall:systemctl status firewalld.service
  • Apague el firewall:systemctl stop firewalld.service

Si el problema no se puede resolver, puede considerar volver a implementar e instalar nginx, porque puede deberse a que nginx se pasó yumo aptse instaló en el servidor antes. Antes de volver a instalar e implementar, puede find / -name nginxencontrar todos los archivos relacionados con nginx en el servidor, luego elimínelos uno por uno y vuelva a implementarlos (tenga en cuenta que al eliminar, asegúrese de comprender la función de este archivo para evitar eliminarlo accidentalmente)

2.2.5 archivo de configuración nginx

Ruta:, /usr/local/nginx/conf/nginx.confla configuración predeterminada es el servidor http;

Configure la página predeterminada para abrir:

Configure la página que aparece cuando el código de estado es 500, 502, 503, 504

Otras configuraciones se presentarán en detalle a continuación;

2.3 Configurar el certificado ssl

Primero debemos solicitar un certificado SSL y vincularlo al nombre de dominio.

Para la solicitud de certificado, consulte: Proceso de solicitud de certificado SSL gratuito de Alibaba Cloud 2022 (imágenes y textos detallados) - Comunidad de desarrolladores de Alibaba Cloud

Simplemente busque en el documento la vinculación del nombre de dominio y configúrelo usted mismo;

Después de solicitar el certificado SSL, podemos descargar .keydos .pemarchivos para la configuración de nginx:

luego abre /usr/local/nginx/conf/nginx.confel archivo

Primero, sin modificar el archivo de configuración predeterminado, ubique el servidor http:

Agregue un servidor https fuera del servidor con el siguiente contenido:

server{
		listen       443 ssl;  #端口号
		server_name  yourURL;  #服务器 (域名或ip 示例:localhost)
		ssl_certificate   /opt/certs/gongzai.xyz.pem; # .pem文件
		ssl_certificate_key  /opt/certs/gongzai.xyz.key; # .key文件
		ssl_session_cache    shared:SSL:1m;
		ssl_session_timeout  5m;

		ssl_protocols TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;


	     location / {
            root   html;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        
        location = /50x.html {
            root   html;
        }

        # 配置字体资源的访问路径
        location ~ .*\.(ttf|otf|ttc|TTF)$ { 
            root /usr/local/nginx/html/ttfs;
            expires 10d;
        }

    }

En el contenido anterior, excepto las notas que deben ajustarse según la situación real, los parámetros restantes se pueden arreglar;

Explica el siguiente código.

# 配置字体资源的访问路径
location ~ .*\.(ttf|otf|ttc|TTF)$ { 
    root /usr/local/nginx/html/ttfs;
    expires 10d;
}

ttf|otf|ttc|TTFes el sufijo del recurso del archivo; /usr/local/nginx/html/ttfses la ruta de almacenamiento del recurso de fuente;

Esta configuración muestra que si desea acceder a los recursos de fuentes en el servidor nginx, vaya a la ruta correspondiente para encontrar los recursos correspondientes;

Después de configurar el servidor https, regrese al servidor http y elimine el contenido, dejando solo:

server {
        listen       80; # 默认端口号
        server_name  yourURL; #服务器 (域名或ip 示例:localhost)
        rewrite ^(.*)$ https://$host$1 permanent; #将http请求转发为https请求
}

Ahora que el certificado SSL está configurado, simplemente reinicie el servidor nginx;

Si desea acceder a los recursos de fuentes más adelante, puede descargarlos escribiendo en el navegador https://yourURL/字体资源名称. El método de acceso es el mismo en el subprograma WeChat.

2.4 Activar soporte cruzado

Abra el archivo de configuración de nginx nginx.conf:

Simplemente agréguelo en la ubicación add_header Access-Control-Allow-Origin *;, de la siguiente manera:

location ~ .*\.(ttf|otf|ttc|TTF)$ {
    add_header Access-Control-Allow-Origin *;
    root /usr/local/nginx/html/ttfs;
    expires 10d;
}

El significado de esta línea de código es agregar un campo de encabezado llamado " Access-Control-Allow-Origin " a la respuesta HTTP y establecer su valor en "*". El propósito de este campo de encabezado es especificar los permisos para acceder al recurso Origen, es decir, qué nombres de dominio pueden realizar solicitudes entre dominios con el servidor;

Cuando el navegador envía una solicitud entre dominios al servidor, el servidor devuelve el valor de este campo de encabezado como parte del encabezado de respuesta. Al establecer el valor de este campo en "*", significa que se permite responder a las solicitudes de cualquier nombre de dominio . En otras palabras, el servidor permite que las aplicaciones front-end de cualquier nombre de dominio obtengan recursos a través de métodos como AJAX, Fetch API, etc.

Por lo tanto, a través de dicha configuración, nuestro subprograma puede obtener recursos de fuentes normalmente (de lo contrario, la depuración de la máquina real no podrá cargar recursos de fuentes)

posdata

Si se informa un error en las herramientas de desarrollo de WeChat:

Puedes ignorarlo. La documentación oficial también establece que este error no afectará la importación normal de archivos de fuentes;

Además, si el archivo de fuente es relativamente grande (más de 10 M), o hay muchos recursos de fuentes que deben importarse, puede considerar configurar una interfaz de carga de recursos y esperar hasta que se carguen todos los recursos antes de ingresar al miniprograma para evitar problemas como el retraso;

El recurso de fuente de implementación nginx presentado en este artículo y solicitarlo a través de https es la forma más sencilla. La capacidad del autor es limitada. Si necesita optimización, busque la información usted mismo.

Si hay algún error en el artículo, ¡corríjame! Si tiene otras preguntas, no dude en discutirlas y comunicarse en el área de comentarios.

Supongo que te gusta

Origin blog.csdn.net/qq_51235856/article/details/132986355
Recomendado
Clasificación
Diario
Más
2024-06-16(0)
2024-06-15(0)
2024-06-14(0)
2024-06-13(0)
2024-06-12(0)
2024-06-11(0)
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)

Code World

© 2018 codetd.com