使用AppSmith（PagePlug ）低代码平台快速构建小程序应用实践

news/2024/10/30 17:22:51/

文章目录

  • 一、入门
    • （一）介绍
    • （二）功能特性
    • （三）体验一下
    • （四）参考教程
  • 二、使用Appsmith构建商城微信小程序
    • （一）说明
    • （二）应用配置
      • （1）开始
      • （2）tabBar导航栏配置
    • （三）功能开发
      • 1.商品数量统计
      • 2.页面导航
      • 3.首页轮播图
      • 4.商品列表
        • 组件介绍
        • 使用说明
        • 分类传参跳转至全部商品
      • 5.商品检索
        • 页面展示
        • 开发介绍
      • 6.商品详情
        • 介绍
        • 打开弹框
        • 收藏和加入购物车
      • 7.个人中心
      • 8.注册
      • 9.登录
      • 10.退出登录
  • 三、小结以及使用感受
  • 四、参考

一、入门

（一）介绍

Appsmith 是一个开源框架，可让您的团队更快、更协作地构建自定义内部应用程序，如仪表板、管理面板、CRUD 应用程序。

PagePlug 是基于 AppSmith 打造的更适合中国开发者的开源前端低代码项目。无需侵入客户架构，直接连接数据源（API、DB），无需学习任何第三方概念，使用基础 js知识就可以快速生成多平台前端应用，包括 PC 端 web 应用、微信小程序等。

PagePlug提供的几款模板参考

仓库URL：https://gitee.com/cloudtogo/pageplug/tree/open/demo

在这里插入图片描述
PagePlug提供的在线试用平台：https://lowcode.methodot.com

在github上搜索low code关键词stars最多就是appsmith.
在这里插入图片描述

（二）功能特性

【1】连接任何数据源: 与数据库或 API 等数据源集成。PagePlug 对许多数据库和 RESTful API 接口提供即插即用支持，可与大多数工具无缝连接。
【2】构建 UI：使用可自定义的内置小部件来构建应用程序布局。
【3】访问数据：通过编写查询并将数据绑定到小部件，将 UI 连接到数据源。用 JavaScript 控制一切。
【4】协作、部署、共享：PagePlug还支持使用 Git 进行版本控制，以跟踪更改、创建回滚并使用 git 分支进行协作。部署应用程序并与其他用户共享。
【5】数据库是每个应用程序的重要组成部分，用于存储和管理数据。在 PagePlug 上，您可以直接连接到支持的数据库并运行查询以在PagePlug查询编辑器上读取和写入数据。

（三）体验一下

【1】使用appsmith开发的工程管理平台
https://lowcode.methodot.com/applications/6322a1453892ca140cb874d5/pages/6322a1453892ca140cb874e3
在这里插入图片描述
【2】使用appsmith开发的企业CRM系统
https://lowcode.methodot.com/applications/6322a6d63892ca140cb87551/pages/6322a6d63892ca140cb87555?embed=1
在这里插入图片描述

（四）参考教程

【1】appsmith中文文档
https://appsmithcn.gitbook.io/appsmith-tutorial/jie-shao/he-xin-jie-shao

【2】appsmith英文文档
https://docs.appsmith.com/

备注：appsmith很多的使用教程中文文档没有，需要去看appsmith英文文档

【3】使用appsmith低代码快速搭建系列，非常适合项目实践
https://www.bilibili.com/video/BV1bS4y1S7pC/

【4】行云低代码快速制作小程序，通过12分钟快速构建了一个微信小程序。
https://www.bilibili.com/video/BV1VY411J7Vt/?spm_id_from=333.999.0.0&vd_source=aa623f2ffb4e64007ccc86e6165bc957

【5】Appsmith中文社区B站视频专栏
https://space.bilibili.com/1816481859

二、使用Appsmith构建商城微信小程序

（一）说明

关于Appsmith的使用可以参见上面的教程，本篇文档不再过多的描述，为了能够更加直观更加清晰的了解和使用Appsmith的使用，下面通过Appsmith平台去搭建一个完整的微信小程序商城项目，当前项目是基于PagePlug提供的严选小程序（微信小程序）demo进行的开发实践梳理。

PagePlug 制作的完整电商小程序案例，支持注册、登录、二级商品分类、商品搜索、商品详情、购物车、购买下单、收货地址管理、订单管理等功能。

PagePlug 并未提供后台接口服务，需要我们自己搭建后台服务，参考开源项目litemall

下面的开发流程仅针对部分常见功能进行介绍，侧重于常见的微信端功能，包括注册，登录，轮播图，网格列表，检索，商品收藏加入购物车，个人信息展示。中间也会穿插中描述一些比较重要的api操作，比如接口调用，js事件，路由传参，表单提交，token保存，app数据存储，组件使用等等。更多功能感兴趣的可以到平台自行了解尝试。对于Appsmith也是刚了解没几天，如果描述的有错误，或者有更多的建议可以多多共同交流完善。

（二）应用配置

（1）开始

在这里插入图片描述

【1】当我们想要开发一个小程序的时候，首先我们需要管理员配置小程序的appid和对应的appkey。
【2】对于小程序我们可以通过上图的创建移动应用开始新的小程序，或者通过导入的方式引入一个外部的移动应用并进行修改开发，例如上面介绍的“商城小程序.json”
在这里插入图片描述
【3】上面的组件使用在PagePlug使用文档上都已经描述清楚了，可以参考使用。

（2）tabBar导航栏配置

在这里插入图片描述
在日常开发小程序的时候，我们需要在配置文件中配置页面路由和tabbar,在appsmith中我们可以使用【底部面板】组件，然后在工作区左上角位置创建多个页面。
在这里插入图片描述
然后，可以根据需要修改页面的名称，是否展示在底部的导航栏上，以及选择对应的导航栏图标。这样我们就构建好了小程序的底部导航栏。
在这里插入图片描述

（三）功能开发

1.商品数量统计

如何在appsmith中展示文本数据

【1】准备好商品统计后台接口/wx/goods/count，该接口返回系统商品数量
【2】在平台创建对应的查询接口
【3】在组件中选择“搜索框”组件，并修改其属性
【4】商品数量统计，通过：{{GoodsCount.data.data}} 获取后台接口数据，其中GoodsCount表示的是对应商品统计接口的名称，我们输入/反斜杠的时候系统会自动提示补全。
在这里插入图片描述
【5】点击商品搜索组件，进入到搜索页面，在搜索组件中添加js代码，导航跳转到搜索页面，导航使用的是navigateTo（）
在这里插入图片描述

2.页面导航

navigateTo 允许用户在应用程序的内部页面之间导航或导航到外部 URL。 它可以在任何组件操作上触发，如 Button onClick、Dropdown onOptionChange 等。在 navigateTo 函数中输入页面名称或外部 URL（在 onClick 等可触发操作下），如果需要，输入查询参数，并选择目标新页面（新窗口或同一窗口）。

语法：

navigateTo(pageName: string, params?: {}, target: "SAME_WINDOW" | "NEW_WINDOW") -> Promise

参数1：跳转的页面地址，可以填写应用内的页面名称，也可以填写外部URL
参数2：通过 URL 传递的查询参数。用于与目标页面共享信息。
参数3：配置导航打开的方式，当前页面或者新的窗口。

3.首页轮播图

在这里插入图片描述
在这里插入图片描述
选择【轮播】组件，然后选择对应的接口数据，其中图片字段直接填入接口返回数组中元素的属性即可，具体的字段名称可以在【数据】中查看
在这里插入图片描述

4.商品列表

组件介绍

对于小程序端列表的展示主要有如下俩种布局组件
在这里插入图片描述
【网格】组件，列数设置为5的布局
在这里插入图片描述
【网格】组件，列数设置为2的布局
在这里插入图片描述
【列表】组件

使用说明

这里说下商品分类列表
在这里插入图片描述
对于列表组件的使用很简单，配置数据，其要求为数组类型，然后根据属性配置图片，字体，标题等属性即可。
在这里插入图片描述

分类传参跳转至全部商品

下面介绍如何在appsmith小程序中开发页面传递参数跳转功能。
【1】配置组件点击事件，选择“跳转到”具体的页面，并携带参数
在这里插入图片描述
【2】跳转至的代码可以手动选择也可以自己编写修改，可以手动下拉选择页面也可以配置外部url,查询参数即待传递的参数{{{id: m_grid1.currentItem.id}}}，其中id表示参数名称，后面的是对应的选择的数据，m_grid1是组件名称，currentItem系统提供的当前元素，id匹配的是m_grid1对应数据源接口元素属性值。
【3】测试：配置跳转至目标页面的属性，先通过一个测试文本组件获取到传递的参数
获取参数方式：{{global.URL.queryParams.id}}
在这里插入图片描述
【2】跳转至的代码可以手动选择也可以自己编写修改，可以手动下拉选择页面也可以配置外部url,查询参数即待传递的参数{{{id: m_grid1.currentItem.id}}}，其中id表示参数名称，后面的是对应的选择的数据，m_grid1是组件名称，currentItem系统提供的当前元素，id匹配的是m_grid1对应数据源接口元素属性值。
【3】测试：配置跳转至目标页面的属性，先通过一个测试文本组件获取到传递的参数
获取参数方式：{{global.URL.queryParams.id}}
在这里插入图片描述
【4】在全部商品页面，将参数放置在请求url上，在appsmith应用内都可以通过{{}}符号去获取对应的数据。
在这里插入图片描述
参考：
/wx/catalog/index?{{global.URL.queryParams.id ? ‘id’ : undefined}}={{global.URL.queryParams.id}}

接口返回数据，其中当前数据项用于回写分类的选择状态
在这里插入图片描述
【5】配置完接口后，在左侧的分类上设置如下属性，
在这里插入图片描述
标记A：首先展示回写的数据，A的回写选中需要配合标记C处的代码。B位置配置的是全部分类数据展示，D位置的代码用于在左侧标签结束后触发右侧数据列表的展示切换，执行js查询，调用CurrentCatalog接口，其中{{m_tabs1.selectedTab.id}}表示获取【标签导航】组件的当前所选属性项值。
在这里插入图片描述

5.商品检索

页面展示

商品检索主要使用了三个组件，【搜索框】【标签导航】【网格】
在这里插入图片描述

开发介绍

【1】配置搜索组件属性，修改占位提示信息，显示搜索按钮，并添加事件绑定
在这里插入图片描述

【2】商品搜索接口如下所示，即获取输入框文本，排序条件，商品分类标签条件进行查询
在这里插入图片描述
参考请求：
/wx/goods/list?keyword={{m_search1.text}}&page=1&limit=20&sort=name&order=desc&categoryId={{(m_tabs1.selectedTab ? m_tabs1.selectedTab.id : 0) || 0}}
在这里插入图片描述

6.商品详情

介绍

在上面的商品展示中都需要支持点击商品进入到商品详情页面。
以检索结果商品为例：
在这里插入图片描述
【1】配置网格列表的事件动作，选择导航跳转至商品详情页面
【2】添加当前商品的参数信息
【3】商品详情页如下所示
在这里插入图片描述
【4】创建商品详情页面，并在当前页面创建商品详情接口，传递商品id
在这里插入图片描述
【5】构建商品详情页面的组件布局，涉及组件较多不进行详细介绍。这里简单说下使用了那些组件。
备注：下面的商品规格组件是系统针对于商城类业务定制的组件。
在这里插入图片描述

打开弹框

点击下面的单元格组件打开商品规格弹框
在这里插入图片描述
打开弹框：showModal(modalName: string): Promise
关闭弹框：closeModal(modalName: string): Promise

其中参数传递的是组件的名称
在这里插入图片描述
在这里插入图片描述

{{(function(){if (Cart.data.errno) {navigateTo('登录');} else {showModal('m_popup1');}})()}}

判断购物车数据cart接口返回值errno不为空的话跳转到登录页面，否则打开商品规格的弹框，m_popup1是商品规格组件名称。

收藏和加入购物车

这俩个功能就是表单的新增操作，涉及两个接口，收藏接口和添加购物车接口

【收藏接口】
在这里插入图片描述
【加入购物车】
在这里插入图片描述
执行js脚本
在这里插入图片描述
对应的接口以及参数信息
在这里插入图片描述

7.个人中心

在这里插入图片描述

8.注册

【1】构建并进入到注册页面
【2】选择表单组件，并根据字段类型设置对应的输入类型
在这里插入图片描述
【3】为按钮绑定事件，与接口交互添加新用户
在这里插入图片描述

{{Register.run(function(r){if (r.errno) {showAlert(r.errmsg, 'error');return;}storeValue('loginInfo', r.data);showAlert('注册成功', 'success');navigateTo('首页');}, function(){})}}

【4】调用Register接口注册用户，并将返回结果保存到app中。storeValue() 函数将数据作为键值对保存在应用中，以后可以在应用程序的任何地方访问。接着提示注册成功信息，然后跳转至首页。

参考：
https://docs.appsmith.com/reference/appsmith-framework/widget-actions/store-value
【5】Register接口
在这里插入图片描述
【6】上面的注册比较简单，即用户名和密码，可以根据需要添加随机验证码或者短信验证。

9.登录

【1】构建登录表单，并调用登录接口
在这里插入图片描述
【2】将登录后的数据保存到app内，维护一个session状态
在这里插入图片描述

{{Login.run(function(r){if (r.errno) {showAlert(r.errmsg, 'error');return;}storeValue('loginInfo', r.data);navigateTo('首页');
}, function(){});
}}

【3】个人中心根据storeValue的值动态显示和隐藏登录按钮以及展示个人信息.

小提示：在工作台上淡色表示的就是已隐藏，在发布的时候就会隐藏的。

{{global.store.loginInfo==null}} 这里判断很简单就是使用用户数据是否存在判断的。
在这里插入图片描述

10.退出登录

退出登录的js事件操作，清除登录的状态然后导航到首页
在这里插入图片描述

三、小结以及使用感受

【1】上面的商城小程序示例所涉及的功能点还是比较多的，所涵盖的通用的场景也是比较多的，总体来看对于简单业务的项目使用appsmith是可行的。

【2】其提供的导入导出以及git协作对于团队开发和组件复用很有帮助，可以大大提高开发效率，能够快速实现产品功能。

【3】对于微信小程序的appid配置以及预览发布，这个在多次尝试后都不正常，但是在官方体验版本是正常的，在社区群里多次咨询也未得到回应，还有这个如何实现产品交付和发布，这个目前也没有明确的文档和说明，小程序是国内版本特有的新功能，很多东西还不完善。

【4】上面演示的微信小程序的登录方式是通过账号密码的方式，但是在一般的小程序中很多都是通过wx.login的api的方式，此外，对于微信小程序的相关api似乎也未得到支持，微信小程序的相关文档也很少。

【5】移动端相对于web端的组件少了很多，比如对于普通的表单组件，没有下拉列表，而且是不可以自定义修改的。

【6】在平台添加接口的时候，默认的作用域是当前页面，不可以在其他页面获取到当前接口的数据，如果想要在其他页面也使用该接口，需要通过接口移动或复制的方式处理。

【7】中文文档的内容相对于英文文档不够全面。
【8】整体使用起来还是较为简单易用的，上手简单，整体提供的功能也很丰富。

四、参考

开源小程序低代码！一分钟制作小程序上线！
https://appsmith-fans.cn/blog/post-slug-5

Appsmith中文社区网址
https://appsmith-fans.cn/

appsmith英文文档
https://docs.appsmith.com/


http://www.ppmy.cn/news/29866.html

相关文章

【Linux】进程等待 | 详解 wait/waitpid 的 status 参数

【Linux】进程等待 | 详解 wait/waitpid 的 status 参数

🤣 爆笑教程 👉 《看表情包学Linux》👈 猛戳订阅 🔥 💭 写在前面：在上一章中我们讲解了进程创建与进程终止，本章我们开始讲解进程等待。进程等待这部分知识相较于前面还是较为复杂的&#xff0…
阅读更多...
【matplotlib】条形图及垂线显示小技巧 |一些有用参考帖子收集

【matplotlib】条形图及垂线显示小技巧 |一些有用参考帖子收集

最近在画图。一方面看论文看思路，一方面用数据跑图出论文雏形。 有些帖子写得很好，不记录的话下次还想看就只能随缘了。 帖子 博客：nxf_rabbit75 matplotlib技巧—9.共享坐标轴、创建多个subplot、调整横坐标、放置文本框、latext文字、平移…
阅读更多...
机器学习库（Numpy, Scikit-learn）

机器学习库（Numpy, Scikit-learn）

Numpy 创建数组 import numpy as npa np.array([1,2,3]) b np.array([(1.5,2,3), (4,5,6)], dtype float) c np.array([[(1.5,2,3), (4,5,6)], [(3,2,1), (4,5,6)]],dtype float)创建占位符 z1np.zeros((3,4)) z2np.ones((2,3,4),dtypenp.int16) z3d np.arange(10,25,5)…
阅读更多...
【java web篇】Tomcat的基本使用

【java web篇】Tomcat的基本使用

📋 个人简介 💖 作者简介：大家好，我是阿牛，全栈领域优质创作者。😜📝 个人主页：馆主阿牛🔥🎉 支持我：点赞👍收藏⭐️留言&#x1f4d…
阅读更多...
基于自抗扰控制ADRC的主动悬架控制

基于自抗扰控制ADRC的主动悬架控制

目录 前言 1. 悬架系统 2.ADRC流程图 3.仿真分析 3.1 性能指标和观测效果对比 3.2控制输入对比 3.3 性能指标均方根对比 4.总结 前言 之前通过4篇文章介绍了ADRC，并且在最后一篇文章中进行了总结和应用，本篇文章继续将其应用于悬架对象上&am…
阅读更多...
Modbus协议初探(C#实现)

Modbus协议初探(C#实现)

由于作者水平有限，如有写得不对得地方请指正 趁着今天休息，就折腾一下Modbus协议，之前零零散散的看过几篇博客，听说搞上位机开发的要会这个协议，虽然我不是搞上位机开发的，但个人对这个比较感兴趣。按照我个…
阅读更多...
【蒸滴C】C语言结构体入门？看这一篇就够了

【蒸滴C】C语言结构体入门？看这一篇就够了

目录 一、结构体的定义 二、结构的声明 例子 三、 结构成员的类型 结构体变量的定义和初始化 1.声明类型的同时定义变量p1 2.直接定义结构体变量p2 3.初始化：定义变量的同时赋初值。 4.结构体变量的定义放在结构体的声明之后 5.结构体嵌套初始化 6.结构体…
阅读更多...
双指针法|位运算|离散化|区间合并

双指针法|位运算|离散化|区间合并

目录 双指针算法 位运算 离散化 序列合并 双指针算法 题目描述&#xff1a;1.输入n个单词&#xff0c;每个单词在输入的时候按空格隔开&#xff0c;之后打印出每个单词且换行 #include<iostream> #include <string>using namespace std; int main() {strin…
阅读更多...
最新文章

Copyright @ 2022~2023