小程序可视化编辑.PDF

小程序可视化编辑 用户手册 上海辰商软件有限公司 2017.11.24 目录 一、引言1 1.1 编写目的1 1.2 用途1 二、 使用流程1 2.1 绑定并设置微信小程序1 2.2 素材库4 2.3 小程序页面管理5 2.3.1 创建单页6 2.3.2 编辑单页7 2.3.3 挂件设置8 2.3.4 删除挂件9 2.3.5 复制挂件9 2.3.6 重新选择单页模板10 2.3.7 保存单页10 2.4 挂件介绍10 2.5 标签分类15 2.6 客服配置15 2.7 数据助手16 三、附件17 附件1 视频原始地址获取方法17 附件2 可视化页面常规图片尺寸18 一、引言 1.1 编写目的 编写本使用说明的目的是充分叙述小程序编辑页的功能，以便使用者了解 本平台的使用范围和使用方法。 1.2 用途 本平台为用户自主设计小程序提供了一个可视化的编辑工具，为用户提供 更好的体验感受。 二、使用流程 2.1 绑定并设置微信小程序 要进行模板编辑首先需要绑定小程序。进入“微信小程序”—— “绑定微 信小程序”—— “现在去绑定”（图2.1.1）。 图2.1.1 绑定小程序 扫描二维码授权成功后，自动跳回，并显示绑定后的信息(图2.1.2)。 图2.1.2 绑定成功 1 绑定成功后，进入“微信小程序”—— “微信小程序认证配置”，填写小 程序密钥并保存 （图2.1.3）。右上角提示操作成功，即为保存成功。 图2.1.3 小程序密钥 保存密钥成功后，进入 “微信小程序”—— “选择小程序模板”(图 2.1.4)，点击后自动跳转至 “系统设置”（图2.1.5）。请在该页面选择想要 的模板主题，选中后，右上角提示操作成功。 图2.1.4 选择小程序模板 图2.1.5 选择小程序模板 2 选中模板后，进入“微信小程序”—— “小程序页面设置”（图2.1.6）， 对整个小程序的顶部导航和底部导航的内容及颜色进行定义。页面左侧部分为 页面面设置说明图，对页面字段所指内容进行了说明展示。页面右侧为页面导 航的具体设置，包括了颜色文字等内容。 图2.1.6 选择小程序模板 完成页面设置后，进入 “微信小程序”—— “小程序导航菜单设置”（图 2.1.7），对底部导航栏进行配置。操作过程：1.确认基础配置的颜色；2.勾选 需要的菜单个数 （注意：底部导航栏最多添加5 项菜单，最少添加2 项菜 单。）；3.编辑菜单文字和图标内容 （注意：导航图标选择时，为了视觉效 果，请保持色系一致）；4.保存导航菜单配置。 图2.1.7 小程序导航菜单设置 完成导航菜单设置后，进入“微信小程序”—— “生成微信体验小程序” —— “提交设置并查看二维码”（图2.1.8）。注意：未正式发布前，可通过 3 增加体验者的方式，使其拥有预览和试用小程