开始制作
  • 做app就上应用公园
  • 首页> 行业资讯> 媒体报道> 资讯详情

    一键APP样式,开发APP需要什么环境

    2021-08-25 13:15:00 来自于应用公园

    一、准备

    1.uni-app开发官网下载HBuilder开发工具,直接下载解压即可使用

    s 3360//uniapp . dcloud . io/quick start

    2.HBuilder插件安装:工具——插件安装——APP实机运行/uni-app编译/stylelint/eslint-js/es6编译

    其次,创建一个uni-app项目

    1.创建一个新的uni-app项目并命名它将生成一系列文件。

    2.项目框架结构

    3、pages.json

    包括所有页面和全局样式。

    4、manifest.json

    视觉界面设置

    5.vue文件格式模板(仅包含一个视图)

    脚本

    风格

    三、实机调试

    1.样式库参考

    4.1介绍官方css样式库

    将Hellouni-app项目中的common/uni.css文件复制到自己的项目中(创建相同的文件路径),并在样式标签下添加相应的路径作为介绍官方css样式库。导入——参考演示介绍图片资源

    4.3 CSS动画库介绍

    在Animatorcss中下载相应效果的css文件,复制到公共目录。就像引入样式库一样,通过调整style中路径对应的价格来导入动画库文件,在对应的组件中添加动画对应动画效果的名称来显示动画。

    4.4设置全局属性globalStyle

    uni app开发准备工作及环境配置

    1.打开PS,新建一个800*600px的画布,填充C7FDC6。

    2.使用圆角矩形工具创建圆角为10px的360*446px圆角矩形,并添加图层样式。

    计算器的总体框架已经设计出来了。

    3.然后使用圆角矩形工具制作一个326*66px的显示窗口,圆角5px,填充1A1A1A的颜色,添加图层样式的内部阴影。

    4.继续使用圆角矩形工具制作一个68*48px按钮,圆角为4px,并复制4个按钮到右边。快捷键CTRL G建立4个按钮为组1,然后向下复制4个组,分别命名为组2、组3、组4、组5。

    5.双击组1,依次添加以下图层样式,右键单击要复制图层样式的图层,然后右键单击组2、组3和组4,依次粘贴图层样式。

    6.将图层样式粘贴在右键组5的右三个关键图层上,较后一个关键叠加的颜色改为18D516。

    7.将图层样式添加到第5组左侧的为数不多个按钮。

    8.此时,计算器已经完成了整体外观,然后在按键上添加数字和符号,使其更加逼真!

粤公网安备 44030602002171号      粤ICP备15056436号-2

在线咨询

立即咨询

售前咨询热线

0755-27805158

[关闭]
应用公园微信

官方微信自助客服

[关闭]