微信小程序的极速应用

橘子不知陈

已于 2024-04-07 08:25:44 修改

阅读量656

点赞数 3

文章标签：微信小程序小程序

于 2024-04-03 09:44:18 首次发布

本文链接：https://blog.csdn.net/m0_74842053/article/details/137225964

版权

1.即速应用概述

（1）　即速应用的优势

即速应用是深圳市咫尺网络科技开发有限公司开发的一款同时兼具微信小程序和支付宝小程序快速开发能力的工具 , 用户只需简单拖拽可视化组件 , 就可以实现在线小程序开发。据不完全统计 , 在微信小程序正式发布的１年内 , 在即速应用上打包代码并成功上线的微信小程序已经超过５万个。

即速应用的功能特点主要体现在以下几个方面 :

１ . 开发流程简单 , 零门槛制作

使用即速应用来开发微信小程序的过程非常简单 , 无须储备相关代码知识 , 没有开发经验的人也可以轻松上手。

( １ ) 登录即速应用的官方网站 ( ｗｗｗ . ｊｉｓｕａｐｐ . ｃｎ ), 进入制作界面 , 从众多行业模板中选择一个合适的模板。

( ２ ) 在模板的基础上进行简单编辑和个性化制作。

( ３ ) 制作完成后 , 将代码一键打包并下载。

( ４ ) 将代码上传至微信开发者工具。

( ５ ) 上传成功后 , 等待审核通过即可。

２ . 行业模板多样 , 种类齐全

即速应用为广大开发者提供了非常齐全的行业解决方案。目前 , 即速应用已经上线６０多个小程序行业模板 , 涉及餐饮 ( 单店版、多店版 ) 、婚庆、旅游、运动、美容、房地产、家居、医药、母婴、摄影、社区、酒店、ＫＴＶ、汽车、资讯等多个行业。

这些小程序行业模板可以有效地帮助企业拓宽资源整合渠道 , 降低运营成本 , 提高管理效率 。

３ . 丰富的功能组件和强大的管理后台

即速应用的功能组件和管理后台非常实用 , 可以根据实际情况解决商家的不同需求。

即速应用的应用范围主要包括以下类型 :

( １ ) 资讯类 : 新闻、媒体。

( ２ ) 电商类 : 网购 ( 服装、电器、读书、母婴 ……) 。

( ３ ) 外卖类 : 餐饮及零售。

( ４ ) 到店类 : 餐饮及酒吧。

( ５ ) 预约类 : 酒店、ＫＴＶ、家教、家政 , 其他服务行业。

(2)　即速应用界面介绍

登录即速应用官网 , 单击“注册” 按钮 , 在 如图所示 的页面填写相应信息 , 即可完成注册。完成注册后 , 即可登录账号 , 使用即速应用。

即速应用的主界面主要分为４个区域 , 分别为菜单栏、工具栏、编辑区和属性面板 , 如图所示。

１ . 菜单栏

菜单栏中的“风格” 选项用于设置小程序页面的风格颜色 , “管理” 选项用于进入后台管理页面 , “帮助” 选项用于提示帮助功能 , “客服” 选项用于进入客服界面 , “历史”选项用来恢复前项操作 , “预览” 选项用在ＰＣ端预览制作效果 , “保存” 选项用于保存已制作的内容 , “生成” 选项用于实现小程序打包上线设置 。

２ . 工具栏

工具栏包括“页面管理” “组件库” ２个选项卡 , “页面管理” 实现添加页面和添加分组以及对某一页面进行改名、收藏、复制、删除操作。 “组件库” 有９个基础组件、７个布局组件、１８个高级组件和２个其他组件。

组件布局如下：

３ . 编辑区

编辑区是用来制作小程序页面的主要区域 , 通过拖拽组件实现页面制作 , 右边的“前进” “后退” 选项可以进行恢复操作 , “模板” 选项可以用来选择模板 , “元素” 选项可以用来显示页面中的组件及其层次关系 , “数据” 选项可以用来进行页面数据管理 , “模块” 选项可以用来选择模块。

４ . 属性面板

属性面板用来设置选定组件的属性及样式 , 包括“组件” 和“组件样式” 两个选项卡。“组件” 选项卡用来设置组件内容及点击事件 ; “组件样式” 选项卡用来设置组件的样式 , 不同组件有不同的样式需要设置。

2.极速应用组件

即速应用提供了大量的组件供用户快速布局页面 , 包括７个布局组件、９个基本组件、１８个高级组件和２个其他组件。

（1）布局组件

布局组件用于设计页面布局, 主要包括双栏、面板、自由面板、顶部导航、底部导航、分割线和动态分类，如图所示：

１ . 双栏组件

双栏组件用来布局整体, 它可以把一个区块分为两部分, 操作时显示一个分隔的标志, 便于操作, 预览时则不会出现。双栏组件默认设置每个栏占５０％总宽, 也可以按实际需要调整比例双栏里面可以添加基本的组件, 从而达到整体的布局效果。双栏还可以嵌套双栏, 即可以在其中的一个栏里嵌入一个双栏, 从而将整体分成３部分(若需要将整体分成４部分, 就再嵌套一个双栏, 依次类推)。双栏组件的属性面板如图所示。

２.面板组件

面板组件相当于一个大画板, 用户可以将很多基本(甚至高级) 的组件(如文本组件、图片组件、按钮组件、标题组件、分类组件、音频组件、双栏组件、计数组件等) 放进面板组件里一起管理。面板组件的属性面板如图所示。

３ . 自由面板组件

自由面板组件是指放置在该面板内的组件可以自由拖动 , 调节组件大小。用户既可以向自由面板内拖入部分组件 ( 包括文本组件、图片组件和按钮组件 ), 也可以拖入任意相关容器组件 , 用于不规则布局。自由面板组件的属性面板如 图所示。

４ . 导航组件

导航组件固定于页面顶部, 用于编辑顶部的导航。常用的手机应用在顶部有一条导航, 上面写有手机应用Ａｐｐ的名称或ｌｏｇｏ, 以及返回键等。顶部导航组件的属性面板设置如图所示

５ . 底部导航组件

底部导航组件固定于页面底部 , 用于编辑底部的导航。底部导航组件的属性面板设置如 图５－８所示 。

通过底部导航组件可以添加标签、删除标签 , 同时可以分别设置每个标签的名称、原始图片、点击图片及链接至某一页面 ; 通过组件面板可以进行组件背景色、图片及文字的设置。底部导航组件的制作效果 如图５－９所示。

６ . 分割线组件

分割线组件被放置于任意组件之间 , 用于实现分割。分割线组件的属性面板如 图５－１０所示 。

７ . 动态分类组件

动态分类组件仅适用于电商、到店类小程序。用户通过选择动态分类组件的样式 , 可以实现顶部分类、侧边栏分类来展示应用数据、商品数据等。动态分类的二级有图模式只适用于电商类小程序。动态分类组件的属性面板 如图５－１１所示 。

（2）　基本组件

基本组件是小程序页面常用的组件 , 包括文本、图片、按钮、标题、轮播、分类、图片列表、图文集和视频 , 如图５－１２所示 。

１. 文本组件

文本组件用于展示文字、设置点击事件 , 是小程序页面中最常用的组件。文本组件的属性面板如 图５－１３所示 。

２ . 图片组件

图片组件用于在页面中展示图片 , 其属性面板 如图５－１４所示。

３ . 按钮组件

按钮组件用于在页面中设置按钮 , 其属性面板 如图５－１５所示。

４ . 标题组件

标题组件用于在页面中设置标题 , 其属性面板 如图５－１６所示。

５. 轮播组件

轮播组件用于实现图片的轮播展示 , 其属性面板如 图５－１７所示 。

单击“添加轮播分组” 按钮进入管理后台 , 然后单击“轮播管理” → “新建分组” 选项可以创建轮播分组 , 如图５－１８所 示。

分别填写“分组名称” 和“分组描述” , 单击“确定” 按钮进入 图５－１９所示 的轮播管理界面 。

单击“轮播项” 按钮 , 进入 图５－２０所示的 页面。

单击“添加轮播” 按钮 , 在 图５－２１所示的 页面进行轮播项的设置。

根据需要添加相应的轮播后 , 轮播项界面 如图５－２２所示。

单击 图５－２３ ( ａ ) 中 的“编辑” 按钮 , 在 图５－２３ ( ｂ ) 所 示的绑定轮播分组中选定“ｂａｎｎｅｒ” 轮播分组 , 单击“预览” 按钮 , 将出现预览效果 , 如图５－２３ ( ｃ ) 所示。

６ . 分类组件

分类组件可以设置不同内容展示在不同类别中 , 还可以添加、删除分类的个数及进行相应的设置。分类组件的属性面板 如图５－２４所 示。

７ . 图片列表组件

图片列表组件可以将图片以列表的形式展示 , 还可以设置图片的名称、标题和点击事件。图片列表组件的属性面板 如图５－２５所示。

８ . 图文集组件

图文集组件用于展示图片、标题和简介 , 其属性面板 如图５－２８所 示

９ . 视频组件

视频组件用于展示视频 , 其属性面板如 图５－２９所示。

视频组件提供网页应用、小程序和云服务３种视频来源。网页应用使用视频通用代码来确定视频来源。例如 , 打开优酷网站 , 找到需要的视频 , 进入“分享给朋友” 页面 , 通用代码就显示出来 , 如图５－３０所示。

单击“复制通用代码” 按钮 , 把复制好的通用代码粘贴 到图５－３１ 所示的文本框中 , 保存后即可在小程序项目中添加该视频。

(3) 高级组件

高级组件通常需要后台数据 , 通过设置后台数据来实现数据后台化 , 让小程序的数据随时更新 , 及时修改 , 如图５－３２所 示。下面介绍其中的几种常用组件。

１ . 动态列表组件

动态列表组件是容纳基础组件来展示后台数据的容器 , 通过添加基础组件来展示对应的后台数据 , 其属性面 板如图５－３３所示。

要使用动态列表组件 , 必须在后台进行数据管理 , 单击“管理对象” 按钮 , 进入管理后台 , 如图５－３４所示 。 单击“新增数据对象” 按钮 , 进入“数据对象列表” 页面 , 如图５－３５所示。

单击“添加字段” 按钮 , 添加相应字段 , 如图５－３６所示。

单击“保存” 按钮并返回 , 进入“对象管理” 页面 , 如图５－３７所示。

单击“数据管理” 按钮 , 进入“数据管理” 页面 , 如图５－３８所 示。

单击“ ＋添加数据” 按钮新建数据 , 进入“添加数据” 页面 , 如图５－３９所示。

添加相应数据并保存 , 继续添加所需数据 , “数据管理” 页面 如图５－４０所示。

退回到编辑页面 , 为了方便布局 , 拖拽“自由面板” 组件到动态列表中 , 然后拖拽一个图片和两个文本组件到自由面板组件 , 如图５－４１所示 。

在动态列表属性面板的绑定数据对象中选择“羽绒服” 数据对象 , 同时图片组件绑定数据对象样式字段 , 文本组件分别绑定数据对象的名称和价格字段 , 如 图５－４２所示。

最终效果如 图５－４３所示。

２ . 个人中心组件 个人中心组件显示个人相关信息的组件 , 包括图像、昵称、我的订单、收货地址、购物车等 , 如 图５－４４所示 。

个人中心组件的属性面板如 图５－４５所示。

３ . 动态表单组件

动态表单组件相当于ＨＴＭＬ中的 < ｆｏｒｍ > 标签 , 是一个容器组件 , 可以添加子表单组件和基本组件 , 用来收集用户提交的相关信息给后台数据对象。动态表单组件的属性面板 如图５－４６所示 。

在编辑页面 , 添加相应的动态表单子组件 ( 如“评分” ), 如图５－４７ 所示。

• 单击图５－４６所示属性面板中的“管理对象” 按钮 , 添加数据对象列表 , 如图５－４８所示。

• 前端提交相关数据 , 可以通过后台进行查看并统计 , 如图５－４９所 示。

• ４ . 评论组件

• 评论组件提供信息发布或回复信息的组件 , 评论组件的属性面板 如图５－５０所示。

５ . 计数组件

计数组件可以用于点赞、统计浏览量等类似的计数功能。计数组件的属性面板 如图５－５１所示 。

６ . 地图组件

地图组件用于显示指定地址的地图 , 常用于实现定位及导航功能 , 地图组件的属性面板如 图５－５２所示。

７ . 城市定位组件

城市定位组件通常与列表类组件搭配使用, 常见搭配有动态列表和商品列表。例如, 城市定位组件与商品列表搭配, 可以实现通过城市定位来搜索出某具体位置信息下的商品列表城市定位组件的属性面板如图５－５３所示。

８ . 悬浮窗组件

悬浮窗组件的固定搭配有 : 客服、我的订单、购物车、回到顶部。悬浮窗组件通常出现在个人中心或商品列表页面 , 其属性面板 如图５－５４所示。

（4）　其他组件

其他组件包括音频组件和动态容器组件。

１. 音频组件

音频组件用于播放音乐 ( 每个页面有一个音频组件即可 ), 手动点击播放按钮后即可实现播放。音频文件可以选择音频库中的音乐 , 也可以上传本地音频进行更换 , 音频组件的属性面板 如图５－５５所示。

２ . 动态容器组件

动态容器组件用于动态页面 , 即所在页面绑定了数据对象。动态容器组件中可以添加多种组件 ——— 文本组件、图片组件、按钮组件、标题组件、分类组件、音频组件、双栏组件、计数组件。其中 , 文本组件和图片组件可以绑定相应的数据对象字段 ( 填充相应动态数据 ), 若有计数组件 , 则会自动与动态容器关联。动态容器组件的属性面板如图 ５－５６所示 。