Article directory
- 1. Getting Started
- 2. Use Appsmith to build a WeChat applet for the mall
- 3. Summary and usage experience
- 4. Reference
1. Getting Started
(1) Introduction
Appsmith is an open source framework that allows your team to build custom internal applications like dashboards, admin panels, CRUD applications faster and more collaboratively.
PagePlug is an open source front-end low-code project based on AppSmith that is more suitable for Chinese developers. There is no need to intrude into the customer architecture, directly connect to the data source (API, DB), no need to learn any third-party concepts, and use basic js knowledge to quickly generate multi-platform front-end applications, including PC-side web applications, WeChat applets, etc.
Several template references provided by PagePlug
Warehouse URL: https://gitee.com/cloudtogo/pageplug/tree/open/demo
The online trial platform provided by PagePlug: https://lowcode.methodot.com
Searching for low code keyword stars on github is appsmith at most.
(2) Functional characteristics
【1】Connect to any data source: Integrate with data sources such as databases or APIs. PagePlug provides plug-and-play support for many databases and RESTful API interfaces, and can be seamlessly connected with most tools.
【2】Build UI: Use customizable built-in widgets to build application layouts.
[3] Access data: Connect the UI to the data source by writing a query and binding the data to the widget. Control everything with JavaScript.
[4] Collaborate, deploy, share: PagePlug also supports version control with Git to track changes, create rollbacks, and collaborate using git branches. Deploy the application and share it with other users.
【5】The database is an important part of every application and is used to store and manage data. On PagePlug, you can connect directly to supported databases and run queries to read and write data on the PagePlug Query Editor.
(3) Experience it
【1】Engineering management platform developed using appsmith
https://lowcode.methodot.com/applications/6322a1453892ca140cb874d5/pages/6322a1453892ca140cb874e3
【2】Enterprise CRM system developed using appsmith
https://lowcode.methodot.com/applications/6322a6b83892ca750c /pages/6322a6d63892ca140cb87555?embed=1
(4) Reference Tutorial
[1] appsmith Chinese documentation
https://appsmithcn.gitbook.io/appsmith-tutorial/jie-shao/he-xin-jie-shao
【2】appsmith English documentation
https://docs.appsmith.com/
Remarks: There are no Chinese documents for many tutorials on appsmith, so you need to read the English documents of appsmith
【3】Use appsmith low-code to quickly build series, which is very suitable for project practice
https://www.bilibili.com/video/BV1bS4y1S7pC/
【4】Xingyun quickly made a small program with low code, and quickly built a WeChat small program in 12 minutes.
https://www.bilibili.com/video/BV1VY411J7Vt/?spm_id_from=333.999.0.0&vd_source=aa623f2ffb4e64007ccc86e6165bc957
[5] Appsmith Chinese Community B station video column
https://space.bilibili.com/1816481859
2. Use Appsmith to build a WeChat applet for the mall
(1) Description
For the use of Appsmith, you can refer to the above tutorial. This document will not describe too much. In order to understand and use Appsmith more intuitively and clearly, let’s build a complete WeChat applet mall project through the Appsmith platform. Currently The project is based on the development practice combing of the Yanxuan Mini Program (WeChat Mini Program) demo provided by PagePlug.
The complete e-commerce applet case produced by PagePlug supports registration, login, secondary product classification, product search, product details, shopping cart, purchase order, delivery address management, order management and other functions.
PagePlug does not provide background interface services, we need to build background services by ourselves, refer to the open source project litemall
The following development process only introduces some common functions, focusing on common WeChat functions, including registration, login, carousel, grid list, retrieval, adding products to shopping cart, and displaying personal information. Some important api operations will also be described in the middle, such as interface calls, js events, routing parameters, form submission, token storage, app data storage, component usage, etc. If you are interested in more functions, you can go to the platform to learn about it yourself. I have just learned about Appsmith for a few days. If there is an error in the description, or if there are more suggestions, we can communicate and improve it together.
(2) Application configuration
(1) start
[1] When we want to develop a small program, first we need the administrator to configure the appid and corresponding appkey of the small program.
[2] For small programs, we can start a new small program by creating a mobile application in the above figure, or import an external mobile application and modify and develop it, such as the "mall small program.json" described above [3
] 】The use of the above components has been clearly described in the PagePlug documentation, and can be used for reference.
(2) tabBar navigation bar configuration
In the daily development of applets, we need to configure page routing and tabbar in the configuration file. In appsmith, we can use the [bottom panel] component, and then create multiple pages in the upper left corner of the workspace.
Then, you can modify the name of the page as needed, whether to display it on the bottom navigation bar, and select the corresponding navigation bar icon. In this way, we have built the bottom navigation bar of the applet.
(3) Function development
1. Commodity Quantity Statistics
How to display text data in appsmith
【1】Prepare the commodity statistics background interface /wx/goods/count, which returns the number of products in the system 【2】Create a
corresponding query interface on the platform
【3】Select the "search box" component in the component and modify its properties
【 4] Counting the number of goods, through: {
{GoodsCount.data.data}} to get the background interface data, where GoodsCount represents the name of the corresponding commodity statistics interface, and the system will automatically prompt to complete when we enter / backslash.
【5】Click the product search component to enter the search page, add js code in the search component, and navigate to the search page. The navigation uses navigateTo()
2. Page Navigation
navigateTo allows the user to navigate between internal pages of the application or to external URLs. It can be triggered on any component action like Button onClick, Dropdown onOptionChange etc. In the navigateTo function enter the page name or external URL (under triggerable actions like onClick), enter query parameters if required, and select the target new page (new window or same window).
grammar:
navigateTo(pageName: string, params?: {
}, target: "SAME_WINDOW" | "NEW_WINDOW") -> Promise
Parameter 1: The address of the redirected page. You can fill in the name of the page in the application or an external URL.
Parameter 2: The query parameter passed through the URL. Used to share information with the target page.
Parameter 3: Configure the way to open the navigation, the current page or a new window.
3. Home page carousel
Select the [Carousel] component, and then select the corresponding interface data, where the image field can be directly filled in the attributes of the elements in the interface return array. The specific field names can be viewed in [Data]
4. Commodity list
Component introduction
For the display of the applet list, there are mainly the following two layout components
[grid] component, the layout [grid] component with the number of columns set to 5 , and the layout [list] component
with the number of columns set to 2
Instructions for use
Here is a list of product classifications. The
use of the list component is very simple. Configure the data, which requires an array type, and then configure the image, font, title and other attributes according to the attributes.
Classification parameters to jump to all products
The following describes how to develop the page transfer parameter jump function in the appsmith applet.
[1] Configure the component click event, select "Jump to" a specific page, and carry the parameters
[2] The code to jump to can be manually selected or edited and modified by yourself, you can manually pull down to select the page or configure an external url, query The parameter is the parameter to be passed {
{
{id: m_grid1.currentItem.id}}}, where id represents the parameter name, followed by the corresponding selected data, m_grid1 is the component name, currentItem is the current element provided by the system, and the id matches it It is the attribute value of the data source interface element corresponding to m_grid1.
【3】Test: configure the properties of jumping to the target page, and first obtain the passed parameters through a test text component.
How to get parameters: {
{global.URL.queryParams.id}}
【2】The jumping code can be manually The selection can also be edited and modified by yourself. You can manually pull down the selection page or configure the external url. The query parameter is the parameter to be passed { { {
id
: m_grid1.currentItem.id}}}, where id represents the parameter name, and the following is the corresponding For the selected data, m_grid1 is the component name, currentItem is the current element provided by the system, and the id matches the attribute value of the data source interface element corresponding to m_grid1.
【3】Test: configure the properties of jumping to the target page, and first obtain the passed parameters through a test text component
Method of obtaining parameters: {
{global.URL.queryParams.id}}
【4】On all product pages, set the parameters Placed on the request url,
the corresponding data can be obtained through the { {}} symbol in the appsmith application .
Reference:
/wx/catalog/index?{
{global.URL.queryParams.id ? 'id' : undefined}}={
{global.URL.queryParams.id}}
The interface returns data, in which the current data item is used to write back the selection status of the category
[5] After configuring the interface, set the following attributes on the category on the left,
mark A: first display the written-back data, and the write-back of A needs to be selected Match the code at marker C. Position B is configured to display all classified data, and the code in position D is used to trigger the display switch of the data list on the right after the end of the left tab, execute js query, and call the CurrentCatalog interface, where {{m_tabs1.selectedTab.id}}
means Get the value of the currently selected attribute item of the [Label Navigation] component.
5. Product search
page display
Product retrieval mainly uses three components, 【Search Box】【Tag Navigation】【Grid】
Development introduction
【1】Configure the properties of the search component, modify the placeholder prompt information, display the search button, and add event binding
[2] The product search interface is as follows, that is, to obtain the input box text, sorting conditions, and product classification label conditions for query Reference request
: /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. Product details
introduce
In the above product display, it is necessary to support clicking on the product to enter the product details page.
Take the search result product as an example:
[1] Configure the event action of the grid list, select the navigation to jump to the product details page
[2] Add the parameter information of the current product
[3] The product details page is as follows
[4] Create product details page, and create a product details interface on the current page, and pass the product id
[5] Construct the component layout of the product details page, which involves many components and will not be introduced in detail. Here is a brief description of the components used.
Remarks: The following commodity specification components are customized by the system for mall business.
Open the popup
Click the cell component below to open the product specification pop-up box
Open the pop-up box: showModal(modalName: string): Promise
Close the pop-up box: closeModal(modalName: string): Promise
The parameter passed is the name of the component
{
{
(function(){
if (Cart.data.errno) {
navigateTo('登录');
} else {
showModal('m_popup1');
}})()}}
Judging that the return value errno of the shopping cart data cart interface is not empty, jump to the login page, otherwise open the popup box of the product specification, m_popup1 is the name of the product specification component.
Favorite and Add to Cart
These two functions are the new operations of the form, involving two interfaces, the collection interface and the add shopping cart interface
[Favorite interface]
[Add to shopping cart]
Execute
the corresponding interface and parameter information of the js script
7. Personal center
8. Registration
[1] Build and enter the registration page
[2] Select the form component, and set the corresponding input type according to the field type
[3] Bind an event to the button, interact with the interface to add a new user
{
{
Register.run(function(r){
if (r.errno) {
showAlert(r.errmsg, 'error');
return;
}
storeValue('loginInfo', r.data);
showAlert('注册成功', 'success');
navigateTo('首页');}, function(){
})}}
【4】Call the Register interface to register the user, and save the returned result to the app. The storeValue() function stores data in the application as key-value pairs, which can later be accessed anywhere in the application. Then prompt the successful registration information, and then jump to the home page.
Reference:
https://docs.appsmith.com/reference/appsmith-framework/widget-actions/store-value
[5] Register interface
[6] The above registration is relatively simple, that is, user name and password, and random verification can be added as needed code or SMS verification.
9. Login
[1] Build a login form and call the login interface
[2] Save the logged-in data to the app and maintain a session state
{
{
Login.run(function(r){
if (r.errno) {
showAlert(r.errmsg, 'error');
return;
}
storeValue('loginInfo', r.data);
navigateTo('首页');
}, function(){
});
}}
[3] The personal center dynamically displays and hides the login button and displays personal information according to the value of storeValue.
Tip: The light color on the workbench means it is hidden, and it will be hidden when it is released.
{
{global.store.loginInfo==null}} The judgment here is very simple, which is to judge whether the user data exists.
10. Log out
Logout js event operation, clear the login status and navigate to the home page
3. Summary and usage experience
[1] The mall applet example above still involves a lot of functions and covers a lot of common scenarios. Generally speaking, it is feasible to use appsmith for simple business projects.
[2] The import and export and git collaboration provided by it are very helpful for team development and component reuse, which can greatly improve development efficiency and quickly realize product functions.
[3] For the appid configuration and preview release of WeChat applets, this is not normal after many attempts, but it is normal in the official experience version, and many consultations in the community group have not received a response, and how to achieve this Product delivery and release, there is currently no clear documentation and instructions, the applet is a new feature unique to the domestic version, and many things are not perfect.
[4] The login method of the WeChat applet demonstrated above is through the account password, but many of the general applets use the wx.login api. It is supported, and there are very few related documents for WeChat applets.
[5] Compared with the web side, the mobile side has much fewer components. For example, for ordinary form components, there is no drop-down list, and it cannot be customized and modified.
[6] When adding an interface on the platform, the default scope is the current page, and the data of the current interface cannot be obtained on other pages. If you want to use this interface on other pages, you need to move or copy the interface. .
[7] The content of the Chinese document is not comprehensive enough compared to the English document.
【8】The overall use is relatively simple and easy to use, easy to get started, and the overall functions provided are also very rich.
4. Reference
Open source applet with low code! Make a mini program in one minute and go online!
https://appsmith-fans.cn/blog/post-slug-5
Appsmith Chinese Community URL
https://appsmith-fans.cn/
appsmith English documentation
https://docs.appsmith.com/