用户
 找回密码
 立即注册
搜索

该用户从未签到

17-9-15 16:34 叮当-奇一 管理员 楼主 10829393
图文视频双管齐下,学习叮铛使你快乐!   点击有惊喜: https://v.qq.com/x/page/z0550swsz3n.html



叮铛应用缘起叮当App自助生成运营平台,基于大量用户需求和技术开发经验,完成了从底层架构、后台控制、客户端表现等方面完全的重构。为了帮助大家更顺畅的使用叮铛应用制作App,我们将陆续放送出更多精心制作的App教程~


首批上线的场景能力重点聚焦电商、社区、付费内容三个领域。本期教程将重点帮助大家搭建一个简单的电商App

长而详尽的教程才配的上你们期待~

——————————做App软件哪家强,叮铛应用来帮忙——————————

App简述:
目标是完成一个简单的电商App,包括商品列表展示页(普通页)、商品详情页(详情页)和个人中心页。App的功能包括商品下单支付、购物车、联系客服、用户登陆等。

App素材准备:
App的图标、App启动图、首页和个人中心页面图标、登陆头像默认图、个人中心页面图标。

素材包点击链接下载:https://pan.baidu.com/s/1i5QSCTJ   提取码:jv6k

下载预览助手:
叮铛预览助手可以实现App实时的真机预览,辅助用户设计App。预览助手登陆的账号密码和登陆后台的账号密码一致。

App展示:

——————————做App软件哪家强,叮铛应用来帮忙——————————


制作流程

制作入口


1.套用模板
示例展示页面提供了电商、社区和知识付费三个场景的多个模板,选择适合的模板,点击“创建应用”。待模板导入成功之后,可以修改App的相关信息。

2.自定义入口
示例展示页面拖到最下方,点击“点击这里”。在需求提交页面,点击“去制作”。


——————————做App软件哪家强,叮铛应用来帮忙——————————

创建App
  • App名称: 只允许使用中文、英文(区分大小写)、数字和下划线
  • App图标: PNG格式,最佳尺寸1080*1920
  • App启动图: PNG格式,最佳尺寸1080*1920

1.输入App的名称,上传素材包中的App图标和启动图,然后点击下面的“创建App”按钮。


设计数据表

注意: 进入制作控制台,左边侧栏只显示部分内容,点击一下即可制作和修改界面。

梳理自己的App功能点,考虑其中逻辑关系,列出所需要的字段。我们也提供了通用、电商、付费内容和社区四个场景的多个数据表以供套用。
叮铛家居商品详情所需字段:标题、商品描述、商品组图、商品规格、服务说明、商品详情。


1.添加数据表

1.1点击“添加数据表”,选择一个空白数据表,点击“确定”。(标题和索引图是固定字段,不可删除。)

2.勾选功能字段
2.1电商详情页,需要勾选“实物商品”,及阅读数、评论数等。

电商的数据表需要选择“电商实物”商品字段,添加内容页面对应有实物商品信息的字段。实物商品信息包括商品组图、商品详情、商品规格、价格、库存和物流信息。

3.添加商品详情页的字段
除标题、索引图和电商商品信息已包含的字段,还需添加描述和服务简介的字段。

3.1点击“添加模型字段”,添加“描述”的字段。名称填写描述,字段类型选择文本,文本类型选择多行文本,然后点击确定。



——————————做App软件哪家强,叮铛应用来帮忙——————————

添加内容

开启电商业务功能字段的数据表均在商品分类中,其他数据表在数据的分类中。添加内容时需要切换到【运营控制台】。

1.设置内容分类
1.1点击“商品”选择【商品详情数据表】。点击设置按钮,商品详情页点击“+”,填写分类名称,点击保存。


2.添加内容
2.1点击“新增内容”。依次填写标题、上传索引图、选择分类、填写描述和服务简介、上传商品组图、填写商品详情。

实物商品信息中点击【添加规格项目】,添加商品颜色和款式两个规格项目。颜色需要填写颜色名称和上传图片,款式添加款式名称即可。

填写价格、库存和限制数量,选择运费设置和开售时间,点击保存。

开启功能模块
根据自己App的定位开启需要的功能模块,电商App通常需要支付、储值、电商、客服、评论等功能模块。部分功能模块的样式需要在功能模块中配置,如电商的SKU面板。
【制作控制台】功能模块中点击“添加功能模块”,选择所需功能模块,点击启用。



全局样式配置
全局中可对App配色风格、顶栏、页面背景及App字体进行设置,页面配置如果勾选全局,即默认取全局配置样式。

1.顶栏配置
【App信息】选择全局风格,点击设置按钮。这边可以设置App的顶栏和页面,还可以选择App的字体。

顶栏就是App顶部我的、首页。。。,支持配置顶栏的高度、背景及边线。如果页面中勾选了启用全局,则页面的顶栏样式就取全局的配置。如果不启用全局配置,可以单独配置页面样式。

2.全局返回按钮
点击“全局返回按钮”,这边我们给了适合的默认值,我们也可以自由设置相关属性。


3.页面配置
配置页面主题色,背景色选择白色,下拉动画可以任选一个。


配置详情页
1.新建详情页
在【页面管理】中,切换至【详情】,即可【新增详情页】
在新弹出的界面中,可按需选择自定义创建或者直接套用模版。

自定义:点击“自定义创建普通页”,自由设计页面样式。
套用模板:叮铛助手扫描页面二维码即可预览页面详情,选择适合的页面点击“使用模板”。在页面管理中可以添加和删除(详情组件/组件),也可在页面设计中修改样式。



2.绑定数据表
在弹框中,选择你的商品详情页所需绑定的数据表

如需更换数据表,可在头部进行修改


3.添加详情组件 & 组件
详情组件和组件

详情页除了可以添加详情组件(包括图文组件、媒体组件、Tab组件、表格组件和功能组件)外,还可以添加组件(即普通页组件)。

拆解详情页结构

首先,我们需要分析一下商品详情页的结构,排成一张组件列表,然后按需进行设计。
一般而言,详情页使用到的多为详情组件。
高级布局组件与其他详情组件的区别在于,它是完全自定义的。
浮动布局组件,顾名思义,是浮动在页面之上的,和顶栏一样,都有自己的固定位置。


3.1 设置【1高级布局组件】

点击右上角【添加详情组件】,点击【图文组件】-【高级布局】,挑选心仪的模版,然后【使用该模版】
在正式设置前,我们必须理解【编辑布局框】,【编辑控】件,【设置布局】这3者之间的逻辑,大家可以把详情页页面类比做一张Excel表格——
Excel表格 = 线性框架 + 表格内容
详情页页面 = 布局 + 控件

3.1.1 编辑布局框

制作Excel表格的时候,我们需要用到向上(下)插入1行,拆分单元格这样的功能,等同于叮铛这里的“插入”和“拆分”。
注意注意:只有选中某一行,才能看到右侧的设置项。
在添加表格内容前,先要把表格搭建好——
(和Excel一样,布局框是线性的,横向的)


3.1.2 编辑控件
编辑控件相当于往Excel表格里面填充内容。
注意注意:只有选中单个控件,才能看到右侧的设置项。
首先,看一下,(下图),我们的这组布局中含有哪些控件内容?
控件内容和控件类型是一一对应的,要先选类型,再添加内容。
比如说“商品组图”属于“多图幻灯”,所以我们就把右侧的“多图幻灯”拖到左边的布局框里面,然后选中该控件(变蓝),进行属性配置。
3.1.3 绑定字段

编辑完控件,先别急配置属性。
因为我们要先切换到【管理组件】,进行内容模型字段绑定,否则我们的控件没有对应的数据内容,就无法在预览助手上看到设置效果。

3.1.4 配置属性
现在,我们的Excel表格做好了,内容也添加完了,下一步就是配置属性,表格的好看都是通过属性来支撑的。
在Excel表格里,属性是——字体的颜色大小,行间距,列间距,表格的边框颜色等等。
在叮铛详情页,也是一个道理。
只不过我们的属性配置是分成3个层级的:
先【设置布局】属性 → 再【编辑布局框】属性 → 最后【编辑控件】属性
  • (1)设置布局:
第一步: 选择【外框样式】,设置【控件区域大小】,此处,我们选择的属性分别是“撑满”和“自适应”
【控件区域大小】:可类比做Excel表格的单元格的宽度和高度
  • 自适应:布局框尺寸=控件尺寸
  • 固定值:此处最大值可设置为750(即客户端手机屏幕的最大宽度),大家可通过设置一个定值的方法,来控制空间区域的大小
  • 撑满:控件尺寸=父布局尺寸=撑满750
第二步: 选择【设置布局】,设置【子控件对齐方式】,此处,我们设置为【左】
  • 子控件对齐方式:是线性布局的特有属性,控件和控件是横向排列的,以“行”为基点,此属性可控制子布局(控件)的对齐方式(左/中/右)
  • (2)编辑布局框:

第一步: 选中你需要设置的“行”,对【外框样式】进行设置

尺寸设置和【控件区域大小】的设置项类似,但是多了个“权重”选项——
  • 权重:所有配置权重的布局按比例分配剩余可用空间(比如:一行只有一个控件,权重设置为1,那么这一行的所有空间都是该控件的可用空间,即为撑满效果)
  • 自适应:布局框尺寸=控件尺寸
  • 固定值:此处最大值可设置为750(即客户端手机屏幕的最大宽度),大家可通过设置一个定值的方法,来控制空间区域的大小
第二步: 背景色的透明度设置为0的话,此处会读取我们在页面配置中设置的页面背景色色值——
第三步: 设置下边框
此处,我们需要一条分割线,所以开启边框,并用下边框实现视觉效果:
步: 设置布局属性
此处,我们希望商品组图是局中显示,所以【子控件对齐】选择【中】
第五步: 第一行设置成功后,我们可以开始对第二行进行设置,以此类推
  • (3)编辑布局框:
第一步: 切换到【编辑控件】,选中需要设置的控件【商品组图】,对外框样式的属性进行设置
第二步: 对【幻灯控件分组】下的属性进行设置
3.2 设置【2高级布局组件】
同上

3.3 设置【3浮动布局组件】3.3.1编辑布局框
拆分浮动布局组件的结构——
参见上图,可以很轻易地看出来,这里面有4个控件,我们还是以“行”为基点,对布局框进行拆分——
可以发现布局框其实是一个彼此嵌套的关系,需要通过“拆分”来实现,我们这里的拆分需要分3步走——


3.3.2编辑控件
编辑控件就是给我们拆分好的布局框里填充内容。
首先我们要找到自己想要添加的控件类型,把右侧的控件类型拖入左侧的布局框内,排好顺序。

3.3.3 绑定点击事件
客服,加入购物车,购物车这3个均带有相应功能,所以我们需要去【管理组件】对它们进行“点击事件”的绑定。

点击【选择】,可以进入【选择绑定事件】页面,选择最右的【自定义】,找到相应的URL,选中,然后保存即可。
3.1.4 配置属性
现在,我们的Excel表格做好了,内容也添加完了,下一步就是配置属性,表格的好看都是通过属性来支撑的。
在Excel表格里,属性是——字体的颜色大小,行间距,列间距,表格的边框颜色等等。
在叮铛详情页,也是一个道理。
只不过我们的属性配置是分成3个层级的:
先【设置布局】属性 → 再【编辑布局框】属性 → 最后【编辑控件】属性
4.配置页面

配置页面这里有三个部分需要设置,分别是:顶栏,页面设置,状态栏。
大家可以结合前面讲到的【全局样式设置】一起来看,所属设置的属性大多类似,所以在【配置页面】这里,我们都是支持“全局开启”的功能,即直接继承全局样式设置。
4.1 顶栏4.1.1顶栏基础设置
参见下图,我们前面提到的隐藏顶栏的功能是在这里进行设置,即“开启隐藏”。
我们的商品详情页需要一个滑动渐变的效果(参见下图)——
所以在这个地方,我们要勾选开启滑动渐变——

4.1.2 按钮条设置
参见上图,我们的按钮条上设置了三个按钮,分别是:返回,购物车,分享。
其中,返回按钮我们在【全局样式设置】时,已经设置过一个“全局返回按钮”了,所以此处无需再设置,只需要设置右侧的“购物车”和“分享”按钮即可。
点击“添加按钮”的灰色字体,会得到一个弹窗,填写按钮名称,选择按钮类型,点击保存。
选中我们刚刚添加好的按钮(蓝色),就可以打开该按钮的属性配置项,一一进行设置即可。
由于是功能按钮,所以最后一个环节是“事件开启”,和前面我们“绑定点击事件”的原理是一样的。
首先,选中“高级”按钮,可以得到一个“高级设置”的弹窗,按需选择自己要绑定的功能即可。


4.2 页面设置
与【全局样式设置】处同理,这里的一个重点是需要勾选开启“全局返回按钮”,如不开启,就需要在“按钮条设置”里面重新设置。

4.3 状态栏
状态栏是针对安卓手机而言的,按需选择显示/不显示即可。
配置普通页(App首页)
创建普通页
套用模板:叮铛助手扫描页面二维码即可预览页面详情,选择适合的页面点击“使用模板”。在页面管理中可以添加和删除组件,也可在页面设计中修改组件样式。
自定义:点击“自定义创建普通页”,自由设计页面样式。


1.新建普通页
【页面管理】点击“新增普通页”,可以选择页面模块,这边我们选择自定义创建普通页。点击上面的小笔可以给普通页命名,接下来就可以给页面添加组件了。


2.大图组件

1.1添加组件
点击“添加组件”按钮,选择大图组件,这边我们选择第二个大图组件模板,点击使用该模板。


1.2组件绑定数据来源
切换到【管理组件】,数据来源选择“商品详情页”,内容分类选择“幻灯”,显示数据选择“全部数量”。
【点击事件】指定打开页面选择“商品详情页”。


1.3配置大图组件属性
【设计组件】中设置大图组件的列表项、标题和索引图属性,其他属性均不需要设置。
  • 列表项: 样式选择第一个
  • 标题: 标题不开启,则属性也不需要设置。
  • 索引图: 尺寸宽高比设置0.5

这样大图组件就设置好了,预览助手中点击通用页,选择首页进行效果预览。

3.等高图组件

2.1添加组件
上面我们已经配置好了大图组件,下面需要添加等高图组件。
2.2组件绑定数据来源
数据源绑定“商品详情页”下的“特惠商品”,显示数据选择全部数量,点击事件指定打开详情页选择“商品详情页”。


2.3配置大图组件属性
  • 列表项: 样式选择样式一/默认背景白色、点击背景灰色/显示列数为2/开启描边,上下颜色设置灰色,上下宽度为1.5。

  • 标题: 勾选显示标题/文字对齐方式“居中”、颜色设置黑色、文字大小为15/边距上20下10
  • 索引图: 尺寸宽度比和宽高比都为1


2.4设置等高图组件头部
组件头部、平铺扩展和浮动扩展都是使用的布局。布局

【设置布局】
点击“设置布局”,点击勾选【组件头是否显示】,这样头部配置才能显示。
  • 外框样式: 控件区域大小,宽度设置“撑满”,高度设置“自适应”。/默认背景设置“白色”

  • 布局属性: 布局属性不需要配置

【编辑布局框】

选中“布局框”,配置布局宽的属性。
  • 外框样式: 尺寸宽度撑满,高度自适应。/外边距上下各为30
  • 布局属性: 布局属性的子控件对齐选择“中”,头部组件的“特惠”是居中显示。

【编辑控件】
点击“编辑控件”,拖一个“固定文本”的控件到布局框中。头部组件只有3个普通控件,分别是弹出菜单按钮,固定文本和固定图片。这边我们选择的是固定文本。
点击控件,可以配置控件的属性样式。
  • 外框样式: 尺寸宽度和高度均设置为“自适应”/父容器中对齐选择“中”。
  • 属性: 文字内容“特惠”、文字颜色“黑色”、文字大小“18”


2.5设置平铺扩展字段
平铺扩展是在列表项固定区域的中的字段内容。开发者只需要在组件绑定的数据表中添加需要显示在布局中的字段。平铺扩展字段可以添加多行,每行也可添加多个字段。

【编辑布局框】
点击“编辑布局框”,设置外框样式和布局属性。这边只需要把外框样式的“父容器中对齐”和布局属性中的“子控件对齐”都选择“中”。

【编辑控件】

点击“编辑控件”,选择“文本”控件拖到布局框中。
【字段绑定】
除了固定文本和固定图片不需要绑定数据表中的字段,其他普通控件都需要绑定数据表中的字段。

切换至【管理组件】,扩展字段显示的是数据表中的“价格”字段,这边文本就绑定“实物商品”。

【配置控件属性】

点击“文本”,设置控件属性。这边只需要设置文本的属性。

2.6设置浮动扩展字段

浮动扩展内容是显示在列表项任意区域中的字段内容。因此,浮动扩展内容与平铺扩展内容之间的区别就在于扩展区域是否固定。
浮动布局组件不同于平铺扩展,相比平铺扩展少了设置布局的步骤,但需要选择布局浮动在列表项、索引图或者平铺扩展区域。

【编辑布局框】
这边我们浮动布局是浮动在索引图上,所以实在“浮动在索引图”的布局框中添加控件。
  • 外框样式: 控件区域大小宽度设置“撑满”,高度设置为“自适应”,相对父容器对齐选择“下” /控件外边距上0下25左30右30
  • 外框样式: 子控件对齐选择“中”
【编辑控件】
点击“编辑控件”,拖一个“文本”控件到浮动在索引图的布局框中。点击文本,设置控件的属性。
【字段绑定】
切换至【管理组件】,浮动在索引图的文本是数据表中的“描述”字段,这边文本就绑定描述。
【配置控件属性】
这边只需要设置文本的属性,配置如下图。
这样浮动扩展字段就设置完毕了~~
4.配置页面
点击“去配置页面”,配置顶栏和页面属性。
  • 顶栏: 配置文字内容、大小和颜色。
  • 页面设置: 背景设置白色,开启全局返回按钮和下拉刷新


预览助手通用页点击首页预览首页顶栏样式。配置普通页(个人中心页面)
搭建一个简单个人中心页面(如图),新建一个普通页,页面由标准列表组件和标准导航器组件组成.

1.个人中心头部配置登录前和登录后。登录前显示默认头像和请登录,登录后显示设置头像和用户昵称。
1.1添加组件
新增普通页添加一个标准列表组件,数据源来源绑定任意一个有内容数据表(这边绑定商品详情页)。
显示数量选择指定显示数量,数量设置1。默认状态下点击组件打开选择”无响应“,然后点击保存组件。

配置标准列表组件属性。列表项样式选择第一个,标题、索引图、组件头部均不开启。


1.2配置头部背景图
平铺扩展-设置布局-外框样式
  • 控件区域大小: 宽度设置方式选择“撑满”/高度设置方式选固定值,高度大小天400
  • 背景: 默认背景上传素材包中个人中心背景图


1.3添加用户头像
点击布局框,配置外框样式和布局属性。
  • 外框样式: 尺寸宽度和高度分别是撑满和自适应/间距的内边距上80/父控件对齐选择"左"
  • 布局属性: 线性方向选择"横向"/子控件对齐选择"中"
点击编辑控件,拖一个“图片”控件到布局框中。
点击图片控件,设置外框样式和控件属性。
  • 外框样式: 事件“开启”/尺寸宽高150/圆角开启,大小都为“75”

  • 控件属性: 上传素材包中的头像默认图
管理组件中显示内容,点击选择,“用户头像“控件绑定”会员头像“字段。
点击事件,用户头像绑定“我的-个人资料页”,然后点击保存。

1.4配置登录前的样式(“请登录”)
平铺控制选中第一个布局框,然后点击"插入",选择向下插入一行。
点击第二行布局框,配置其外框样式和布局属性。
  • 外框样式: 外间距上设置“10"/父容器中对齐选择”左“
  • 布局属性: 布局属性子控件对齐选择”中“
点击”编辑控件“,右边选择”固定文本“控件拖入第二行布局框中。设置其属性,文字输入“请登录”,颜色黑色,大小14号。
1.5配置登陆后的样式(显示用户昵称)
点击”编辑控件“,右边选择”文本“控件拖入第二行布局框中。点击”文本“设置其属性,文字颜色黑色,大小14号,勾选”控件不占位“。
管理组件中显示内容,文本绑定"会员昵称“,点击保存。

2.导航项的配置

2.1添加组件
添加一个标准列表导航器组件,选择适合的模板,点击使用。


2.2添加组件导航项
点击“添加组件导航项”,填写导航项名称、上传导航项图标。然后点击高级中的自定义,选择所需的URL。比如这边我的订单这一导航项,自定义中找到“我的订单”,点击“确认”即可。其他导航项也依次添加,对应各自的自定义选项。



2.3配置标准列表导航器的属性
  • 列表项: 样式选择第一个/列表项背景白色/分割线颜色灰色、粗细0.5、左边距40/列表项内边距上下右为25左为30/列表外边距上下20左右0


  • 标题: 开启显示/文字居右、颜色黑色、大小16、行数1/内边距
    左10

  • 索引图: 开启显示/宽高都为35

3.页面配置
点击右上角去配置页面,配置顶栏、页面设置。
  • 顶栏: 顶栏特效勾选滑动渐变/顶栏内容文字填写“我的”、文字大小18、文字颜色设置黑色。
  • 页面设置: 主题色白色/背景色灰色/开启全局返回按钮/监听用户行为勾选开启、登录、退出登录、用户资料更新。

配置组合页

1.新建组合页
同时勾选两个或者多个页面,点击下面的“新建组合页”。


2.编辑组合页
点击“编辑组合页”,命名普通页名称。上传素材包中的页面图标,然后点击保存。
3.配置页面

3.1选择组合页风格
点击“配置页面”,选择Tabbar导航风格。


3.2设置导航样式
选择默认样式和选中样式,高度设置”90“,背景设置白色,开启高斯模糊,顶线高度设置0.55,顶线颜色选择灰色。
菜单项设置,图标大小42,设置文字默认色和选中色,文字大小为12,然后点击保存。
4.设置App首页
为了首次打开App可以看到我们指定的页面(一般为组合页),此处需选择App组合页。

点击预览助手的”起始页“,即可预览整个App。

——————————做App软件哪家强,叮铛应用来帮忙——————————

生成App

测试版:打包完成后,仅该APP的制作者本人才可在扫描二维码后,安装此版本。
发布版:打包一旦完成,所有已下载该APP的移动端用户都可自动检测到最新版本,并可手动更新到此版本;

主页中点击“打包生成”,测试版选择iOS和安卓,点击“确认生成”。



手机扫描二维码,浏览器打开,然后点击下载。




使用道具 举报 回复
叮铛应用(www.ddapp.com)是集四端于一体的零代码移动应用生产运营平台。
使用道具 举报 回复 支持 1 反对 0
盖楼!盖楼!盖楼!
使用道具 举报 回复 支持 反对
盖楼盖楼!
使用道具 举报 回复 支持 反对
盖楼盖楼  赶紧到100
使用道具 举报 回复 支持 反对
预计需要十天才能盖到100曾
使用道具 举报 回复 支持 反对
17-9-15 23:15 ha3335001736 来自手机 新手上路
7#
盖楼!盖楼!盖楼
使用道具 举报 回复 支持 反对
盖楼!盖楼!盖楼
使用道具 举报 回复 支持 反对
盖楼盖楼盖楼!!!
使用道具 举报 回复 支持 反对
叮铛应用(www.ddapp.com)是集四端于一体的零代码移动应用生产运营平台。
使用道具 举报 回复 支持 反对
您需要登录后才可以回帖 登录 | 立即注册