当前位置:首页 > 每日看点

微信小程序开发应该用什么字体,前端应该建议UI用什么字体设计?

卡卷网2年前 (2024-11-30)每日看点301

应用场景

由于中文文体库文件较大,微信小程序在使用中文字体库时有以下限制
1、微信小程序包大小有严格的限制,不宜随包一起发布
2、通过网络加载时,有较长时间的延时
在大部分业务场景下,美字可完美地解决问题,令微信小程序美起来,可轻松使用各种中文字体。

插件使用

appid

wxff740dd084659765

添加插件

在使用插件前,首先要在小程序管理后台的“设置-第三方服务-插件管理”中添加插件。开发者可登录小程序管理后台,通过 wxff740dd084659765 查找插件并添加。

基础库

目前插件支持的基础库版本为 >=2.21.1, 使用前,请在公众平台小程序后台"设置-基本设置-基础库最低版本设置",将最低版本要求设置为2.21.1

引入插件

对于插件的使用者,使用插件前要在 app.json 中声明

{ "plugins": { "frmstock-plugin": { "version": "1.0.1", "provider": "wxff740dd084659765" } } }

调用插件

在 .json 文件中定义需要引入的自定义组件

{ "usingComponents": { "beautifont": "plugin://frmstock-plugin/beautifont" } }

在 .wxml 文件使用组件

<view class="weui-media-box__bd"> <beautifont wx:if="{{obj.bf_unid}}" bfuid="41f28881-e724-4521-8128-4ec81af8124b" unid="{{obj.bf_unid}}"/> <h4 wx:else class="weui-media-box__title" style="font-size:1.2rem;">{{obj.name}}</h4> </view>

bfuid 为beautifont插件的用户id,其获取方法参见 开通账号
unid 为文本唯一标识,文本制作方法参见 文本制作

开通账号

注册

打开网站 https://www.frmstock.org.cn ,注册后登录

开通

依次打开页面“首页 》 测试项目 》 美字插件服务”,点击按钮“开通账户”,获取 bfuid ,请妥善保存,不要泄漏。

微信小程序开发应该用什么字体,前端应该建议UI用什么字体设计?  第1张


文本制作

文本制作后,平台会返回文本的唯一标识 unid,此在页面调用插件时被使用。
此唯一标识应保存在本地数据库中,且在不使用时及时销毁。

后台接口

制作接口

URL: https://mp.frmstock.org.cn/index.php/services/beauti_font/make
功能说明:用于制作文本数据
参数说明:
1、bfuid:beautifont插件的用户id,网站上开通服务时返回
2、text:必填 文件内容
3、max_words:可选 行内最大字数,默认为12
4、max_lines:可选 最大行数,默认为2
5、font:可选 使用的字体,默认为"lishu"
返回数据:
1、status:0表示操作成功,非0表示操作失败
2、message:原因描述
3、unid:文本的唯一标识
常见失败原因:
1、无授权信息:比如 bfuid 错误
2、冷却时间未结束:冷却时长参见 费用》冷却时间
3、参数text为空

状态查询接口

URL: https://mp.frmstock.org.cn/index.php/services/beauti_font/monitor
功能说明:用于查询文本制作是否已完成,只有制作完成的文本才可正常使用
参数说明:
1、bfuid:必填 beautifont插件的用户id,网站上开通服务时返回
2、unid :文本的唯一标识,此值由制作接口返回
返回数据:
1、status:0表示制作成功,非0表示制作失败
2、message:

销毁接口

URL: https://mp.frmstock.org.cn/index.php/services/beauti_font/discard
功能说明:用于销毁文本数据,回收可用量
参数说明:
1、bfuid:beautifont插件的用户id,网站上开通服务时返回
2、unid :文本的唯一标识,此值由制作接口返回
返回数据:
1、status:0表示操作成功,非0表示操作失败
2、message:

参数说明

文件内容

必填 不能为空
有效范围:1-50
最大支持的中文字符数为50个

可用字体

默认值:lishu(隶书)
可用字体有三种:lishu(隶书)、xingkai(行楷)、zhengkai(正楷)
除此之外,可额外定制一种字体,参见定制化》定制字体

行内最大字数

默认值:12
有效范围:1-20

最大行数

默认值:2
有效范围:1-50

文本管理

文本使用量

页面中可看到“当前文本的使用量”及“剩余可用量”等数据。
使用历史记录如下图

微信小程序开发应该用什么字体,前端应该建议UI用什么字体设计?  第2张


使用demo

功能说明

数据库中有一表,人员信息表,小程序中有一人员列表页面,在未使用美字插件前,页面显示如图1.
使用美字插件后,页面显示如图2.

微信小程序开发应该用什么字体,前端应该建议UI用什么字体设计?  第3张


微信小程序开发应该用什么字体,前端应该建议UI用什么字体设计?  第4张


改造过程

1、数据库改造

人员信息表中,添加字段 bf_unid

ALTER TABLE person_info add `bf_unid` char(36) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '美字唯一标识';

2、后台改造

增加人员时

当增加人员信息时,调用制作接口,获取到文本唯一标识,并把该标识填写到该人员信息的 bf_unid 字段中

更新人员时

当更新人员信息时,先调用销毁接口,销毁旧的文本数据,再调用制作接口,制作新的文本数据

删除人员时

当删除人员信息时,调用销毁接口,销毁旧的文本数据

3、源码改造

app.json文件

引入插件,在文件中添加声明

{ "plugins": { "frmstock-plugin": { "version": "1.0.1", "provider": "wxff740dd084659765" } } }

person_list.json文件

在文件中定义组件

{ "usingComponents": { "beautifont": "plugin://frmstock-plugin/beautifont" } }

person_list.wxml文件

在文件中使用组件

<view class="weui-cell__bd"> <beautifont wx:if="{{persion.bf_unid}}" bfuid="ad601ab8-8d5a-11ef-9c13-00163e30f374" unid="{{persion.bf_unid}}"/> <text wx:else>{{persion.name}}</text> </view>

定制化

定制字体

除了平台内字体外,每个账号可额外定制一种字体。
联系管理员,上传中文字体文件后,即可使用。

扫描二维码推送至手机访问。

版权声明:本文由卡卷网发布,如需转载请注明出处。

本文链接:https://www.kajuan.net/ttnews/2024/11/2264.html

分享给朋友:

相关文章

微软浏览器Edge 现已提供新的快速启动功能

微软浏览器Edge 现已提供新的快速启动功能

微软 Edge 现已提供新的快速启动功能10月24日消息 微软现已为 Windows 平台 Edge 浏览器 Canary 版本提供了一项新功能,称之为 “启动加速”,正如字面意思,它提升了 Edge 启动时的速度,减少等待时间。目前大部分…

有没有推荐什么手游搬砖,或者是用手机就能做的工作能日入100左右就好了?

有没有推荐什么手游搬砖,或者是用手机就能做的工作能日入100左右就好了?

大家好,我是思聪。思聪游戏搬砖社每天分享真实靠谱的游戏赚钱的方法。 整个游戏的攻略用一句话概括就是:打元宝兑换平台物品,xx元宝兑换一个分红物品。你把你打游戏得来的元宝去兑换平台的分红物品,就能每天领取xx元的分红。(具体看是哪个分红物品,…

想要在双 11 换一台全面无短板的新手机,有没有「闭眼买」的机型推荐?

想要在双 11 换一台全面无短板的新手机,有没有「闭眼买」的机型推荐?

最近一个月各大手机厂商的旗舰机扎堆发布,不知道大家看爽了没? 这一代的性能续航大提升,最低 3599 元就能买到,同时老款也有不小的降幅,今年双 11 算是相当适合换手机的节点了! 这次,小黑就给大家推荐双 11 期间值得购买的手机...…

中国芯片产量达1399亿颗,这意味着什么?

美国并不是没有明白人,只是特朗普不懂芯片产业的情况,冒冒失失在ZZ正确下,开启了对中国芯片的掐脖子,结果没掐死,反而让人练出了铁肺。 芯片是所有科技产业的上游,美国原本在上游呆得很舒服,靠英伟达、AMD、德州仪器、高通等这些几十年霸主地位的…

为什么有人觉得华为mate60只值2000?

为什么有人觉得华为mate60只值2000?

你以为买Mate60的人真的傻?真的那么爱国? 国庆前,我家那傻子加价800多买了一台Mate60,当时还被我骂他是傻子。 可是他说一回到公司就被老板同事朋友看到,拿去反复查看,都在惊叹他这么快就买到新机。 跟亲戚朋友聚会,别人一看就知道他…

都是前端框架,为什么用 React 的人会有优越感?

都是前端框架,为什么用 React 的人会有优越感?

上家公司一直搞react,最近第一次写个vue3项目。 老板朋友来了看了下页面说:这用vue写的吧。 我:是... 老板朋友:一看就知道是vue做的。 这tm你看一眼页面就知道用的啥框架? 这感觉就是,我一直用苹果,偶尔用了下华为打电话,有…

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。