gframe骨架说明书（gframe比例是多少）

本文目录

• gframe比例是多少
• gframe完美独角兽出货日期
• 小程序如何构建骨架屏

gframe比例是多少

不同型号的高达，比例不一样。jumbo grade，实测高度50cm，换算成比例就是1/35。mega size，实测高度37.5cm，也就是刚好1/48。pg，实测高度30cm，也就是60。80年代的拼装老物，实测高度25cm，也就是72。MG，实测高度18cm，也就是100。成品GUNDAM UNIVERSE，实测高度15.5cm，比例166。rg，实测高度12.5cm，比例144。G-frame，高度11.5cm，比例156.5。MIA，高度11cm，比例163.6。万代发光扭蛋，高度10cm，比例180。hcm pro，高9cm，比例200。ASSAULT Kingdom，实测高度8.18cm，比例220。型号未知，高度7.7cm，比例233.7。万代HG扭蛋，高度7.15cm，比例251.7

gframe完美独角兽出货日期

由 BANDAI CANDY　发行的人气食玩商品『机动战士高达 G-FRAME FA』今（15）日发表了出自《机动战士高达UC》的最新商品「完全装备型独角兽高达」预计于 2022 年 03 月发布的消息。完全装备型独角兽高达的前身为大型机台高达卡牌游戏《GUNDAM TRYAGE》登场的「全武装型独角兽高达 Plan B」，当时被设定为全武装型独角兽高达另一个方案，Plan B 也意味着 BLUE，因此全机的光束、精神感应骨架都以蓝色设计，并追加了猫爪报丧、命运女神型报丧的武装战甲BS、VN、XC、DE型。后在《机动战士高达UC》Blu-ray BOX 推出时为衔接《机动战士高达NT》版3号机「凤凰」的新设定，更将背部武装战甲DE追加尾羽平衡翼造型，并重新定名为完全装备型独角兽高达，可说是独角兽系列集大成机体。

小程序如何构建骨架屏

在H5中，骨架屏其实已经不是什么新奇的概念了，网上也有各种方案生成对应的骨架屏，包括我们经常使用的知乎、饿了么、美团等APP都有应用骨架屏这个概念方案先从H5生成骨架屏方案开始说起，总的来说H5生成骨架屏的方案有2种1.完全靠手写HTML和CSS方式给每个页面定制一套骨架屏2.利用预渲染的方式生成静态骨架屏第一套方案，毫无疑问是最简单最直白的方式，缺点也很明显，假如页面布局有修改的话，那么除了修改业务代码之外还需要额外修改骨架屏，增加了维护的成本。第二套方案，一定程度上改善了第一套方案带来的维护成本增加的缺点，主要还是使用工具预渲染页面，获取到DOM节点和样式，保留页面结构，覆盖样式，生成灰色块盖在原有文本、图片或者是canvas等节点上面，最后将生成的HTML和CSS打包出来，就是一个带有骨架屏的页面。最后再利用webpack工具将生成的骨架屏插入到HTML里面，详细的话可以看看饿了么的分享，这里就不多描述了。调研了下H5生成骨架屏的方案，对于小程序生成骨架屏的方案也有了一个大致的想法，主要有2个难点需要实现1.预渲染2.获取节点预渲染再说回饿了么提供的骨架屏的方案，使用 puppeteer 渲染页面（或者使用服务端渲染，vue或者react都有提供相应的方案），拿到DOM节点和样式，这里有一点需要注意的是，页面的渲染是需要初始化的数据，数据的来源可以是初始化的data（vue）或者mock数据，当然小程序是无法直接使用 puppeteer 来做预渲染（有另外的方案可以实现），需要利用小程序初始化的 data + template 渲染之后得到一个初始化结构作为骨架屏的结构//index.jsPage({data: {motto: ’Hello World’,userInfo: {***隐藏网址***nickName: ’jay’},lists: ,showSkeleton: true},onLoad: function () {c***t that = this;setTimeout(() =》 {that.setData({showSkeleton: false})}, 3000)}})//index.wxml《view class="container"》《view class="userinfo"》《block》《image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}"mode="cover"》《/image》《text class="userinfo-nickname skeleton-rect"》{{userInfo.nickName}}《/text》《/block》《/view》《view style="margin: 20px 0"》《view wx:for="{{lists}}" class="lists"》《icon type="success" size="20" class="list skeleton-radius"/》《text class="skeleton-rect"》{{item}}《/text》《/view》《/view》《view class="usermotto"》《text class="user-motto skeleton-rect"》{{motto}}《/text》《/view》《view style="margin-top: 200px;"》aaaaaaaaaaa《/view》《/view》有了上面的 data + template 之后，就有了一个初始化的页面结构，接下来就需要拿到节点信息节点小程序基础库1.4.0之后小程序基础库提供了一组新的API，可用于获取节点信息，具体API戳这里。跟H5方式一样，根据class或者id获取节点信息，不同的是只能获取到当前的节点信息，无法获取到其父或者子节点信息，所以只能手动给需要渲染骨架屏的节点添加相应的class或者id《view class="container"》《view class="userinfo"》《block》《image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}"mode="cover"》《/image》《text class="userinfo-nickname skeleton-rect"》{{userInfo.nickName}}《/text》《/block》《/view》《view style="margin: 20px 0"》《view wx:for="{{lists}}" class="lists"》《icon type="success" size="20" class="list skeleton-radius"/》《text class="skeleton-rect"》{{item}}《/text》《/view》《/view》《view class="usermotto"》《text class="user-motto skeleton-rect"》{{motto}}《/text》《/view》《view style="margin-top: 200px;"》aaaaaaaaaaa《/view》《/view》约定2个特殊的class作为获取节点信息的标记skeleton-rect和skeleton-radius，在页面中获取相应的top、left、width、height进行骨架屏的绘制结果具体的调用方式和源码，请看 github ，最后求start总结上文有说到小程序也可以使用 page-skeleton-webpack-plugin 方式一样生成骨架屏，最重要的一点就是需要将小程序跑在chrome上面，后面的流程就一样了，至于怎么将小程序跑在chrome上面呢？可以利用 wept ，缺点就是目前作者已经停止维护这个工具了，不支持新版小程序的API。说回来我这个生成骨架屏的方案，其实跟 page-skeleton-webpack-plugin 有点相似，不同的是，page-skeleton-webpack-plugin 采用离线渲染的方式生成静态骨架屏插入路由中，而我采用运行时先渲染页面默认结构，然后根据默认结构再绘制骨架屏。从性能角度出发确实不如 page-skeleton-webpack-plugin，但是也差不了多少了，主要还是小程序并没有提供类似服务端渲染的方案。目前从使用上来讲，还是有点小麻烦，需要默认数据撑开页面结构，需要给相应的节点添加class，后面有时间再研究下有没有更好的方案吧~~~