小程序可视化编辑

用户手册上海辰商软件有限公司2017.
11.
24目录一、引言.
11.
1编写目的.
11.
2用途.
1二、使用流程.
12.
1绑定并设置微信小程序.
12.
2素材库.
42.
3小程序页面管理.
52.
3.
1创建单页.
62.
3.
2编辑单页.
72.
3.
3挂件设置.
82.
3.
4删除挂件.
92.
3.
5复制挂件.
92.
3.
6重新选择单页模板.
102.
3.
7保存单页.
102.
4挂件介绍.
102.
5标签分类.
152.
6客服配置.
152.
7数据助手.
16三、.
171视频原始地址获取方法.
172可视化页面常规图片尺寸.
181一、引言1.
1编写目的编写本使用说明的目的是充分叙述小程序编辑页的功能,以便使用者了解本平台的使用范围和使用方法.
1.
2用途本平台为用户自主设计小程序提供了一个可视化的编辑工具,为用户提供更好的体验感受.
二、使用流程2.
1绑定并设置微信小程序要进行模板编辑首先需要绑定小程序.
进入"微信小程序"——"绑定微信小程序"——"现在去绑定"(图2.
1.
1).
图2.
1.
1绑定小程序扫描二维码授权成功后,自动跳回,并显示绑定后的信息(图2.
1.
2).
图2.
1.
2绑定成功2绑定成功后,进入"微信小程序"——"微信小程序认证配置",填写小程序密钥并保存(图2.
1.
3).
右上角提示操作成功,即为保存成功.
图2.
1.
3小程序密钥保存密钥成功后,进入"微信小程序"——"选择小程序模板"(图2.
1.
4),点击后自动跳转至"系统设置"(图2.
1.
5).
请在该页面选择想要的模板主题,选中后,右上角提示操作成功.
图2.
1.
4选择小程序模板图2.
1.
5选择小程序模板3选中模板后,进入"微信小程序"——"小程序页面设置"(图2.
1.
6),对整个小程序的顶部导航和底部导航的内容及颜色进行定义.
页面左侧部分为页面面设置说明图,对页面字段所指内容进行了说明展示.
页面右侧为页面导航的具体设置,包括了颜色文字等内容.
图2.
1.
6选择小程序模板完成页面设置后,进入"微信小程序"——"小程序导航菜单设置"(图2.
1.
7),对底部导航栏进行配置.
操作过程:1.
确认基础配置的颜色;2.
勾选需要的菜单个数(注意:底部导航栏最多添加5项菜单,最少添加2项菜单.
);3.
编辑菜单文字和图标内容(注意:导航图标选择时,为了视觉效果,请保持色系一致);4.
保存导航菜单配置.
图2.
1.
7小程序导航菜单设置完成导航菜单设置后,进入"微信小程序"——"生成微信体验小程序"——"提交设置并查看二维码"(图2.
1.
8).
注意:未正式发布前,可通过4增加体验者的方式,使其拥有预览和试用小程序的权限.
图2.
1.
8微信体验小程序完成设置后,进入"微信小程序"——"发布微信小程序"——"提交小程序审核"(图2.
1.
9).
注意:请先提交审核,等审核状态转为通过后,再发布小程序.
审核时间大约为2至3个工作日.
设置为可见:用户可直接在微信搜索到该小程序.
设置为不可见:用户不能在微信内搜索到该小程序.
图2.
1.
9提交审核2.
2素材库素材库支持上传图片,并对其进行标签分类.
进入"素材库"(图2.
2.
1).
1.
填写标签名称后,点击"+"按钮,可添加标签分组.
2.
点击"上传"按钮可上传图片至素材库.
3.
选中素材库图片后,可设置标签分组或删除图片.
5图2.
2.
1素材库2.
3小程序页面管理成功绑定小程序后,可进入"小程序页面管理"(图2.
3.
1),选择在线单页模板或创建新的单页模板进行编辑,使小程序的页面设计更加个性化.
整个编辑过程都是可视化的,无需用户拥有编程基础即可完成,具体操作流程如图(图2.
3.
2).
图2.
3.
1小程序页面管理6图2.
3.
2单页编辑流程图2.
3.
1创建单页第一步:点击添加新页面(图2.
3.
3).
注意:首次编辑时,请先进入模板选择页面(图2.
3.
4),挑选合适的单页模板.
图2.
2.
3添加新页面7图2.
3.
4模板选择第二步:有三种单页创建方式,请挑选自己需要的模板样式.
在线单页,提供设计师编辑好的在线单页模板.
本地单页,提供用户自己保存的线下单页模板.
空白单页,不使用单页模板,用户可自己制作单页.
第三步:选择单页模板后,请跳转至基本配置页(图2.
3.
5).
填写完配置内容后,点击下一步,自动跳转至可视化页面管理页.
图2.
3.
5基本配置2.
3.
2编辑单页可视化页面(图2.
3.
6)分为三部分.
8图2.
3.
6可视化页面管理左侧为挂件区,用户可拖曳挂件至预览页面.
中间为预览区,用户可预览挂件效果.
右侧为设置区,用户可对挂件内容进行自定义设置.
2.
3.
3挂件设置以下将示范如何用挂件配置一个智能橱窗.
1.
从左侧挂件区,将智能橱窗的图标拖曳至预览区(图2.
3.
7).
2.
点击预览区的智能橱窗挂件,在右侧设置区对内容进行编辑.
3.
在右侧设置区,选择图片组合方式、间距圆角选择、选择图片、添加链接文字等,设置完成后点击保存,即可预览效果.
图2.
3.
7智能橱窗挂件92.
3.
4删除挂件以下将示范两种删除已编辑完成挂件的方法.
鼠标hover要删除的挂件时,出现选中状态.
点击红色删除键(图2.
3.
8).
图2.
3.
8删除挂件展开右侧页面挂件概览,选择要删除的挂件(图2.
3.
9).
图2.
3.
9删除挂件2.
3.
5复制挂件以下将示范两种复制挂件的方法.
鼠标hover要复制的挂件时,出现选中状态.
点击蓝色复制键(图2.
3.
10).
10图2.
3.
10复制挂件展开右侧页面挂件概览,选择要复制的挂件(图2.
3.
11).
图2.
3.
11复制挂件2.
3.
6重新选择单页模板注意:当用户完成单页编辑内容后,重新选择单页模板,会覆盖所有编辑内容,不可恢复.
2.
3.
7保存单页正式发布:将当前页正式发布为小程序内容.
(图2.
3.
12)保存为单页:已保存的单页内容会出现在线下单页模板内,可供用户重复使用单页该模板.
保存:仅保存单页内容,不发布.
预览:预览单页效果.
图2.
3.
12保存单页2.
4挂件介绍名称作用名词解释提供商品搜索服务是否显示扫码图标:是否需要在搜索栏右侧添加扫描二维码的功能.
固定在顶部:将搜索框悬浮在手机顶部,即使滑动也不会隐藏.
背景色:更改整个挂件的背景色.
输入框背景色:更改输入框的背景色.
默认值:默认搜索类目,如填写"衣服",即可让用户直接搜索衣服.
11占位文字:占位文字不可直接搜索,填写信息时会消失.
比如填写"搜索""请在这里输入搜索信息".
提供广告banner轮播图功能显示面板指示点:定位当前展示banner在多张banner中的位置.
自动切换:自动切换至下一张banner.
衔接滑动:最后一张banner直接衔接至第一张banner.
切换时间间隔:每张banner切换时长.
滑动动画时长:滑动动画时长.
高度:固定图片高度.
增加一项:添加一组新的banner内容.
上传图片:上传banner图片.
重新上传:重新上传banner图片.
链接类型:选择链接的页面或商品.
其他参数:定位具体展示内容.
删除:删除该轮播图片(包括填写内容).
保存:添加图片及信息后需要点击保存,才会在预览区上传数据展示.
更改图片后也需点击保存,刷新内容.
提供商品列表展示功能显示标题:选择是否显示列表标题.
显示面板:是否显示列表面板,不显示为透明,显示为白底.
卡片模式:是否采用卡片模式展示.
显示产品标题:产品标题为商品名称.
显示产品价格:产品价格为商品价格.
显示产品介绍:产品介绍为商品介绍.
标题:请填写标题内容,如"商品列表".
显示类型:选择显示类型,有"图片滚动方式""图册方式""表格方式""塔式""列表方式"五种展示方式.
滚动图片宽度:(滚动模式下出现)定义图片宽度.
滚动图片间距:(滚动模式下出现)定义图片间距.
获取数量:所需获取的商品数量.
筛选方式:五种筛选方式,"商品""分类""品牌""标签""集合".
选择XX:根据筛选方式选择列表上传数据.
刷新产品:上传商品数据后需点击"刷新产品",在预览区才会显示上传内容.
提供图文组合展示功能模板选择:四种模式可选,"左图右文""左文右图""上图下文""左图右文小图展示".
滚动展示:选择是否需要滚动展示,此处滚动展示需用户自己滑动.
显示设置:选择需要显示的内容,包括"标题"和"内容".
圆角:图片是否需要圆角.
12增加一项:添加一组新的内容.
链接类型:选择链接的页面或商品.
上传图片:上传图片.
重新上传:重新上传图片.
其他参数:定位具体展示内容.
标题内容:请填写标题内容.
文字内容:请填写文字内容.
删除:删除该图文组合(包括填写内容).
保存:添加图片及信息后需要点击保存,才会在预览区上传数据展示.
更改图片后也需点击保存,刷新内容.
提供图片导航链接功能显示设置:选择是否显示导航文字.
每行显示个数:至少1个,最多8个.
图片高度:固定图片高度.
图片宽度:固定图片宽度.
底部边距:设置挂件底部留出的间距大小.
增加一项:添加一组新的内容.
链接类型:选择链接的页面或商品.
上传图片:上传图片.
重新上传:重新上传图片.
其他参数:定位具体展示内容.
链接文字:填写所显示的链接文字内容.
删除:删除该图片信息(包括填写内容).
保存:添加图片及信息后需要点击保存,才会在预览区上传数据展示.
更改图片后也需点击保存,刷新内容.
提供文字导航链接功能添加链接:添加新的一组链接内容.
链接文字:填写所显示的链接文字内容.
链接类型:选择链接的页面或商品.
其他参数:定位具体展示内容.
删除:删除该文字导航(包括填写内容).
提供分割功能显示间距:是否显示左右间距.
线条颜色:可更改线条颜色.
线条类型:有三种线条类型可供选择,"实线""虚线""点线".
提供空白间距功能高度:定义空白的高度.
提供多种图片组合模式并能添加链接组合方式:八种组合方式可供选择.
显示间距:选择图片间是否显示间距.
显示圆角:图片是否需要圆角.
增加一项:添加一组新内容.
链接类型:选择链接的页面或商品.
上传图片:上传图片.
重新上传:重新上传图片.
13其他参数:定位具体展示内容.
链接文字:填写所显示的链接文字内容.
删除:删除该图片信息(包括填写内容).
提供添加视频功能高度:定义视频高度.
视频地址:添加视频原始地址.
(原始地址获取方法见1)封面图:上传视频封面图.
显示控件:是否显示进度条等播放控件.
自动播放:是否需要打开该页面就自动播放该视频.
提供可供用户输入活动等信息的表单功能显示表单名称:选择是否显示表单名称.
表单名称是否居中:选择是否居中表单名称.
选择表单:上传表单.
刷新表单:上传表单后需点击"刷新表单",在预览区才会显示上传内容.
提供团购活动、预售商品的入口功能团购功能:选择团购功能.
展示方式:选择通屏展示或卡片展示.
上传图片:上传图片.
重新上传:重新上传图片.
标题:请输入团购标题.
选择团购:上传团购数据.
刷新列表:上传团购数据后需点击"刷新列表",在预览区才会显示上传内容.
按钮背景:选择按钮背景,包括"去开团""X人团"颜色.
预售功能:选择预售功能.
展示方式:选择通屏展示或卡片展示.
上传图片:上传图片.
重新上传:重新上传图片.
标题:请输入预售标题.
选择预售:上传预售数据.
刷新列表:上传预售数据后需点击"刷新列表",在预览区才会显示上传内容.
按钮背景:选择按钮背景,包括"马上预约"、"定金"颜色、"可抵扣"背景色.
提供自定义图片布局的功能模板选择:首先,请框选左侧"+"号范围,右侧将会出现框选出的图片大小.
框选完所有图片布局后,点击"确定"按钮,开始进行图片内容设置.
注意:1.
点击"重置"后,之前所有布局都会删除.
2.
没有框选的位置不能上传图片,请确保所有需上传图片的位置都已框选过.
显示设置:选择图片间是否显示间距,图片是否显示圆角.
背景:选择背景颜色.
链接类型:选择链接的页面或商品.
上传图片:上传图片.
14重新上传:重新上传图片.
其他参数:定位具体展示内容.
保存:添加图片及信息后需要点击保存,才会在预览区上传数据展示.
更改图片后也需点击保存,刷新内容.
提供文章列表功能显示类型:提供两种显示方式,"图册方式""列表方式".
获取数量:所需获取的文章数量.
筛选方式:提供"栏目""内容"两种筛选方式.
选择栏目:上传文章数据.
刷新列表:上传文章数据后需点击"刷新列表",在预览区才会显示上传内容.
提供活动入口功能内容设置:请选择需要展示的内容,"标题""简介""时间""地址""圆角""间距".
选择活动场次:上传活动场次数据.
刷新列表:上传活动场次数据后需点击"刷新列表",在预览区才会显示上传内容.
提供自定义顶部导航栏功能显示个数:当前页一行内所展示的个数(至少一个,最多八个).
滚动展示:是否需要滚动展示(建议实际链接个数超过"显示个数"时,选择滚动展示).
下拉展示:是否需要下拉展示(建议实际链接个数超过"显示个数"时,选择滚动展示).
跳转方式:当前页刷新和新页面跳转(建议使用当前页刷新,体验会比较好).
展示方式:有下划线和标签两种展示方式.
文字颜色:未选中时的标签颜色.
选中后颜色:已选中时的标签颜色.
增加一项:再添加一项标签.
链接文字:填写所显示的链接文字内容.
链接类型:选择链接的页面或商品.
其他参数:定位具体展示内容.
设置为当前页:该标签如果展示的是当前页的内容,请选择"是".
(请注意,当前页在标签导航中只存在一个)删除:删除该链接信息(包括填写内容).
注意:请先配置好所有链接页的内容后,再给所有链接页增加标签导航挂件.
如:1.
先配置完"美妆""香水""日用"三个页面.
2.
然后分别在三个页面中添加标签导航挂件.
3.
除当前页设置会有所不同外,三个页面中的标签导航挂件内容应一致.
提供悬浮客服入口、普通链接入口挂件数量:至少一个,最多两个.
挂件位置:挂件位置分为两种,左上、左下、右上、右下(挂件数量可为2,无法关闭)和中间(挂件数量只能为1,且有关闭按钮).
15和红包入口.
选择图片:上传图片.
服务链接:是否链接至客服或客服电话.
链接类型:选择链接的页面或商品.
其他参数:定位具体展示内容.
保存:添加图片及信息后需要点击保存,才会在预览区上传数据展示.
更改图片后也需点击保存,刷新内容.
展示门店信息并按距离排序显示内容:选择是否显示电话、地址、图片和时间信息.
展示方式:选择通屏展示或卡片展示.
获取数量:所需获取的商品数量.
选择门店:选择需要展示的门店,可全选.
刷新列表:上传门店信息后需点击"刷新列表",在预览区才会显示上传内容.
2.
5标签分类在页面管理中(图2.
5.
1),有标签符号.
可以给页面加上标签,方便搜索管理.
1.
选中要加标签的页面.
2.
点击标签.
3.
新增标签,并保存.
图2.
5.
1标签分类2.
6客服配置进入"微信"——"小程序客服配置"页面(图2.
5.
1),按照说明进行客服配置.
16图2.
6.
1小程序客服配置2.
7数据助手进入"微信"——"小程序数据助手"页面(图2.
7.
1),可在该页面查看小程序的数据概况、访问分析、实时统计、用户画像,数据与小程序后台常规分析.
图2.
7.
1小程序数据助手使用说明17三、1视频原始地址获取方法182可视化页面常规图片尺寸挂件名称支持图片尺寸(iphone6展示时,效果最佳)尺寸自适应,所有轮播图尺寸一致即可.
170x125pixel170x125pixel自适应120x75pixel自适应正方形即可正方形即可正方形;宽:高=1.
05:1(有间距时)正方形;宽:高=2:1正方形;宽:高=2:1正方形;宽:高=1:2(无间距时);宽:高=1:2.
1(有间距时)正方形;宽:高=1:2(无间距时);宽:高=1:2.
1(有间距时)无间距时,图片比例按1:1、1:2、1:3、1:4即可.
有间距时图片比例如下.
2:1=2.
13:1193:1=3.
25:14:1=4.
38:13:2=1.
53:14:2=2.
06:14:3=1.
345:1边缘悬浮挂件:圆形即可.
中间悬浮挂件:自适应.