appcan如何快速、准确地布局？玩转UI框架

介绍

APPCAN是利用html+js+css来制作手机app。手机端的ui和电脑pc端的ui的语法有所不同，而且不同的ui框架的样式名称也不一样。现在的开发都是快餐式的开发，怎么迅速上手呢？怎么给html布局出想要的相关呢？怎么快速、准确的给APPCAN布局呢？下面来看一下我的经验分享把！

建议

你对html（PC端编程）有一定的基础，可以不借助框架能够搭建出一个精美的页面（jquery,javascript特效可以除外）。因为如果你可以搭建一个下想要的页面的话，那么说明你对css的一些元素的功能是很清楚的，知道什么时候用什么，不然的话，排版对你来说就太痛苦了

根据文档快速了解UI框架

1、用框架的目的

无论是pc端还是手机端的开发，html是在ui框架定义属性的基础上再添加自己的一些样式，使得页面更自然，框架是适合大家使用的，不是私人订制的。

而是用框架的目的是为了让你样式可以自适应各个屏幕的尺寸，不至于在安卓的手机上显示没问题，到了苹果手机上就全乱了。

2、总的布局用可拖拽页面来实现

由于APPCAN是可以通过可拖拽页面把各个组件放上去的，然后生成html_js+css等样式的；

我们可以先利用可拖拽页面把大致的组件分布图搞出来；然后利用css来精准、美化页面。

如何生成可拖拽页面，如何把组件放在上面，怎么更改组件的属性？

见文档http://newdocx.appcan.cn/IDE/UI-designer

一个小栗子教大家如何快速定位，主要是思想

需要实现的功能

一个页面从模块的定位来说有：左上10%距左2%宽高多少颜色等等；

我们一般是通过div来实现的，但是div也有css样式

如下的一个支付宝登录页面的底部，我们需要作出如下的修改：

1、四个功能要均匀分布在底部

2、插入icon图标

3、底部的高度稍微高一点

4、字体变大一点

那么怎么实现呢？

附图前两个你大致了解一下有哪些样式？

布局遵循的原则-首选框架里面有的css样式，便于管理和优化；

1、均匀分布底部，就是把底部分成4列，一个功能一列，并且在列中处于居中

每个都是ub-f1

如下是利用ui框架里面的css样式实现的

2、插入icon图标

2.1、上alibaba矢量图库网下载图片

2.2、把图片放在文件夹里或者新建一个文件夹专门放图片的

2.3、主要代码如下

appcan如何快速、准确地布局？玩转UI框架

⑤上个步骤的解释

uf 是需要了解的意思，代表底部uifooter的缩写

sc-bg辅助组件的背景颜色

如果有的你不知道是什么意思，记起来太麻烦了，在页面的实时预览页面上，按f12，开启开发者工具模式，借助开发者工具一个放大镜的东西，点击页面上的区域，查看css样式到底是什么！

操作视频如下

这个是最快的方法，可以借助别人的布局借鉴，不用百度可以省很多的时间！！

3、底部的高度稍微高一点

两种方法

第一种是把底部的高度增大，如果你的app底部都是一样高度的话，就可以直接修改Ui框架里面的值！

1、在实时预览页面f12,进入开发者工具页面，然后用搜索工具找到页面的底部位置，如果不知道怎么利用搜索工具的话，可以看下面的视频教程

2、找到涉及宽高的样式，可以在开发者工具css样式里面添加调试代码，直到满意为止，ctrl+enter进入该样式的文件里面，查看文件的名称；

3、找到该文件的需要修改的位置，把需要改的的部分修改，保存样式文件

第二种方法

添加ui原有的样式

1、开发者工具，定位首页的代码，我们需要把首页的margin距离上下的高度调整一下

2、我们要在相应的css样式里面找关于高度的字height、margin、top等等

3、如果直接修改代码的话，感觉为后面的修改与维护增加负担，但是我又不知道在这个Ui框架里面什么样的字母词汇代表宽高上下距离呢？

4、只要找到一个关于css样式涉及宽高的词汇，

5、ctrl+鼠标点击这个样式名称，既可以进入相应的css文件夹中

6、ctrl+f来搜索关键字，如margin;height等等，找到可以满足需求的css名称

7，把这个样式名加入到class里面去，就可以了

4、字体变大一点

还是借助f12工具

我们知道字体大小和font-size有关系

在样式表里ctrl+f 搜索font-size

然后选择自己需要的相近的样式名称，复制，粘贴到html相应的位置的class里面