作者
作者:1_bit(头条:李兰清的代码小屋)
剧情
小媛:bit 哥好久不见。
1_bit:好久不见,小媛小可爱。
小媛:告诉你一件大事情。
1_bit:什么事情还要专程过来跟我讲?
小媛:当然是一件大事,你肯定会吃惊的。
1_bit:什么大事?我竟然会吃惊?
小媛:我要结婚了!!!
1_bit:噗!?今天刚好4月1号,我不信。
小媛:请帖都给你带来了,你看。
1_bit:唔,做戏做全套呀。你这个包里面怎么一堆请帖?
小媛:当然是发给其他人呀。
1_bit:你真的要结婚了?
小媛:对呀,等下我还要去快递给其他朋友。
1_bit:牛啤,给你个666。
小媛:记得来吃喜酒,我先去寄快递了。
1_bit:去吧,恭喜恭喜早生贵子。
小媛:( _ )/~~拜拜。
1_bit:哎呀,不对。你怎么不做个电子请帖?
小媛:我都不会了,你百八十年前交给我的编程都忘记了。
1_bit:那你复习复习不就好了?
小媛:花时间,真懒,复习就是一个月。
1_bit:还记得我教给你的iVX吗?
小媛:记得呀,那个很好用的东西。不过忘了,现在都2100年了,80年前的东西咋记得。
1_bit:那我就十分钟教你做一个吧,超级简单,你等下就可以分享你的请帖链接出去了,岂不是很方便?
小媛:唔,这么牛皮?
1_bit:那现在就开始吧。
小媛:好勒。
制作
1_bit:首先我们先进入 iVX 的线上编辑器VxEditor ,然后选择H5应用及绝对定位。

小媛:然后呢?这种创建的步骤还是会的。
1_bit:点击创建后就有一个操作界面了,接下来我们就跟操作Photoshop一样操作,画出来你的邀请函。

小媛:这一步还记得,接下来怎么画我忘记了。
1_bit:简单。你现在先点击右侧对象树中的前台,在前台下添加一个页面。

小媛:怎么添加呢?
1_bit:在左侧点击页面就可以添加了。

小媛:点了,添加后的右侧对象树中多了一个页面。

1_bit:那接下来我们就给这个页面添加一个背景吧。点一点对象树中的这个页面将会在左侧出现一个属性面板。

小媛:然后在背景图那里点上传按钮上传图片?
1_bit:是的,背景图我给你了,你上传一下。
小媛:解决了,哈哈哈。

1_bit:那我们接下来就在上面添加一些元素吧。首先需要先添加一个横幅。
小媛:横幅啥意思?
1_bit:横幅可以帮助你添加的东西固定在屏幕中的一个位置。
小媛:这有什么用呢?
1_bit:有时候有些人的手机屏幕不一样,这样就会导致你添加的图片、文章在iPhone上在中部,而在小米上在下部,使用横幅就可以永远固定在中部了,不管那些手机屏幕多长多宽。
小媛:原来如此,教我吧。
1_bit:加下来你首先在对象树中选择页面,然后在左侧组件栏中选择一个横幅元素,就是这个。

小媛:添加了,在页面中对了一块,好难看。

1_bit:没事,这个时候我们可以先更改他的位置。在对象树中选中这个横幅,然后在属性面板中将整体布局改为中心。

小媛:这个时候这个横幅到中间了耶。

1_bit:那么接下来我们就把属性面板这个横幅的背景色透明度改为0就看不见了。

小媛:解决,啥都没有了。

1_bit:那么接下来我们在对象树中选中横幅,开始往里面添加东西,我们先添加一个名字的背景吧。
小媛:好的。
1_bit:选择横幅后点击图片,此时鼠标将会变成一个十字,可在页面中进行绘制大小,绘制完毕后将会弹出一个资源选择窗口,这个时候你把我给你的图片素材放上去就可以了。
小媛:好耶,解决了。

1_bit:那么接下来我们再选择横幅添加名字,然后点击左侧的中文文本组件进行绘制。

小媛:可以了,我还在属性中改了字体、大小、和文字,贼好看。

1_bit:我还可以给你的字体加特效呢。
小媛:哇,这么厉害?怎么做?
1_bit:你点你的这个中文文本,然后在左侧将会出现一个缪按板,点击这个动效按钮添加动效到你的文本之中。

小媛:添加了,下一步该怎么做?

1_bit:下一步点击动效,里面有很多效果,你还可以预览,你去看一下。
小媛:这样就可以了吧?我选择了动效类型为心跳,打开了循环播放。

1_bit:当然,你点预览按钮看一下效果。

小媛:完美呀!

1_bit:很赞吧?那接下来我们再添加一些图片,你这个应该会做了吧?
小媛:会了会了,真简单,哈哈哈。
1_bit:那你自己去试试吧,我就不教你了,你想做成啥样的就自己动手吧。
小媛:问题不大。
小媛:做好了,贼棒,哈哈哈,我回去再加工一下,谢谢bit哥。

1_bit:既然你想写我,那…份子钱就不给了吧,我就去白吃白喝就好了,实在不行你打包点饭菜给我也行。
小媛:这可不行,我还等着bit哥的大红包呢。不如我介绍个嫂子给你吧,她叫做钩子,是不是很有趣这个名字。
1_bit:嗯,份子钱我准备好了,我还有事,先走了。
小媛:拜拜,单身汪。