高端响应式模板免费下载

响应式网页设计、开放源代码、永久使用、不限域名、不限使用次数

什么是响应式网页设计?

2024年微信小程序字体规范(推荐3篇)

微信小程序字体规范 第1篇

以上就是关于 2024 最新的微信小程序设计规范要求,除了基础微信小程序设计规范、微信小程序设计视觉规范、2024 最新设计规范这 3 点之外,设计师们在制作微信小程序时更应该注意自己的小程序与目标用户的需求是否匹配,例如面向老年人设计的小程序更应该注重字体大小与图片大小。只有将用户需求与小程序设计规范相结合,设计师们才能制作出市场接纳的优秀小程序。如果设计师们还在技术方面还是无从下手,那我建议大家可以去即时设计的资源广场进行搜索,海量小程序模板与插件资源都可以免费使用,快去体验吧~

微信小程序字体规范 第2篇

响应式布局

自适应屏幕:确保设计能适应不同屏幕尺寸,使用相对单位(如百分比)和弹性布局(如 Flexbox)来实现响应式设计。

栅格系统:使用 12 列或 24 列栅格系统,确保布局的一致性和灵活性。

导航

按钮和交互元素

微信小程序字体规范 第3篇

在上文的注意事项中已说明,我们需要将字体资源部署到nginx服务器上,并开启cros支持,而且必须能够通过https访问,接下来我们逐步解决这些问题;

本示例中使用的是华为云ECS服务器(操作系统是ubuntu),并配置好了安全组规则,开放了80端口(nginx的默认端口)

需要注意的是,如果微信小程序需要上线,则使用的服务器必须有公网ip;如果只是本地学习测试使用,则可以使用虚拟机;

找到想要下载的版本:

建议版本呢不要太低,本示例中使用的是

下载完成后传输到服务器上,通过tar zxvf -C /opt/指令解压即可

为压缩包的名称;/opt/为解压的路径,可以自定义

首先进入nginx的解压目录:

然后配置ssl:

执行指令:./configure --prefix=/usr/local/nginx --with-http_ssl_module

./configure是对nginx进行配置;--prefix是nginx的安装路径;--with-http_ssl_module表面开启ssl支持;

接下来编译安装:

执行指令:make && make install

然后等待编译安装完成即可;

安装完成后进入安装路径/usr/local/nginx,查看nginx的版本即安装模块:sbin/nginx -V

nginx启停的指令均在sbin文件夹内:

启动完成后通过ps -ef | grep nginx查看是否启动成功:

如上所示即说明启动成功;

也可以通过netstat -anp | grep 80来查看:

注意事项:

安装部署完成后,在浏览器中输入http://你的服务器ip/即可访问nginx:

如果无法访问,首先考虑是否配置了安全组规则,开放80端口(云服务器)

然后考虑防火墙设置,如果是因为防火墙开启导致无法在浏览器中访问,则可以考虑先关闭防火墙:

如果都解决不了问题,可以考虑重新部署安装nginx,因为可能是服务器上之前通过yumapt安装过nginx导致的,在重新安装部署之前,可以通过find / -name nginx查找服务器上所有与nginx相关的文件,然后逐一删除后再重新部署(注意,删除时一定要弄清这个文件的作用是什么,以免误删)

路径:/usr/local/nginx/conf/,默认配置的是http server;

设置默认打开的页面:

设置状态码为500,502,503,504时出现的页面

其他配置下文会详细介绍;

首先我们需要申请ssl证书,并和域名进行绑定

域名绑定自行查找文档进行设置即可;

申请了ssl证书之后我们可以下载.key.pem两个文件,用于nginx的配置:

然后打开/usr/local/nginx/conf/文件

首先先不修改默认配置文件,定位到http server:

在该server外部新增https server,内容如下:

以上内容,除了注释说明的地方需要根据实际情况调整之外,其余参数固定即可;

对于以下代码进行说明

ttf|otf|ttc|TTF为文件资源后缀; /usr/local/nginx/html/ttfs为字体资源的存储路径;

该配置表明,想要在访问nginx服务器上的字体资源,则到对应路径下去寻找相应的资源;

配置好https server之后,回到http server,删除其中内容,只保留:

至此ssl证书配置完毕,重启nginx服务器即可;

之后想要访问字体资源,则在浏览器中输入https://yourURL/字体资源名称即可下载,在微信小程序中访问方式相同

打开nginx的配置文件

在location中添加add_header Access-Control-Allow-Origin *;即可,如下:

该行代码的含义为在HTTP响应中添加一个名为_Access-Control-Allow-Origin_的头部字段,并将其值设置为_*_,这个头部字段的作用是指定允许访问资源的源(origin),即哪些域名可以与服务器进行跨域请求;

当浏览器向服务器发送跨域请求时,服务器会返回这个头部字段的值作为响应头的一部分。通过将该字段的值设置为_*_,表示允许来自任何域名的请求都能够得到响应。换句话说,服务器允许来自任何域名的前端应用程序通过AJAX、Fetch API等方法来获取资源

因此通过这样的设置,我们的小程序就可以正常获取字体资源了(否则真机调试会无法加载字体资源)

如果在微信开发者工具中报错:

可以不予理会,官方文档中也有说明,该报错不会对字体文件的正常导入造成影响;

此外,如果字体文件比较大(10M以上),或者需要导入的字体资源比较多,可以考虑设置一个资源加载界面,等到所有资源加载完毕后再进入小程序,以免造成卡顿等问题;

猜你喜欢