Our previous seven articles explained PC-side functions, and we also need to provide merchants with a set of mobile-side back-end management programs. In WeChat, we can use H5 to develop the mobile background program. After the development is completed, login can be enabled so that the administrator can operate it on the mobile phone.
01 Create an application
Log in to the WeChat backend, click Create Application, and create a new custom application.
02 Setting menu
We usually provide a navigation menu for mobile programs, and we use grid navigation to set the navigation menu here. Find the grid navigation from the component area on the right, drag it into the editing area in the middle,
select our component, and switch to the configuration panel on the right. Gongge navigation is mainly about setting navigation settings
. Click on a menu to select the menu icon and set the menu text. We set the first menu to member management, and the second menu to member card opening.
03 Create a card opening page
When we click on the menu, we want to jump to the card opening page, and we need to create the page first. Click the page creation icon on the left, enter the name of the page
, then return to our homepage, navigate to the open page of settings, and select the page we just created
04 Implement the card opening page
We use a form container to implement the card opening page. Find the form container from the component area and drag it into the page. The
form container needs to select a data source, and the page will be automatically generated based on the fields of the data source. Select the membership card data source
. We have listed all the members. In a common scenario, we need to find the member information based on the mobile phone number. We add an ordinary container above the form container and place a single-line input component inside.
Select the single-line input template as the search template.
Then place a button component next to the single-line input component. Set the layout of the ordinary container to horizontal arrangement and
change the button type to Link
05 Implement data filling
Our current logic is to enter the phone number in the search box, click the query button after inputting to match the member information, and then fill it into the member drop-down list.
First create a variable in the code area.
Select New Custom Variable.
Modify the name of the variable to phone
and add a verification rule to the search box. Select the mobile phone number for the rule.
Add an event. When the value changes, assign it to our variable
and click The + sign in the code area creates a javascript method
and enter the following code
export default async function({
event, data}) {
try {
const data = await $w.cloud.callDataSource({
dataSourceName: "hyxx_u9t5lg8",
methodName: "wedaGetItemV2",
params: {
// 筛选内容，筛选内容推荐使用编辑器数据筛选器生成
filter: {
where: {
$and: [
{
sj: {
$eq: $page.dataset.state.telphone, // 获取单条时，推荐传入_id数据标识进行操作
},
},
],
},
},
select: {
$master: true, // 常见的配置，返回主表
},
},
});
console.log("请求结果", data);
$w.page.dataset.state.memberid = data._id
} catch (e) {
console.log("错误代码", e.code, "错误信息", e.message);
}
}
The logic of the code is to go to the data source to match the data based on the value entered in the search box, and assign the obtained data identifier of the member information to our variables.
To do this, we need to create another variable to save the member's data identification.
Bind our variable to the selected value of our member.
Finally, configure the click event for our query button. After selecting our custom code
, add it to the form. The container adds an event to return to the previous page
final effect
We click Member Open Card in the navigation menu to jump to the Member Card Opening page. First enter your mobile phone number, click Query, fill in the member information, and then enter the recharge amount and card opening date.
Summarize
This article introduces how to develop business functions on the mobile terminal, mainly introducing the usage of two components: grid navigation and form container. It also introduces the definition and assignment of variables, the creation and invocation of custom methods, and other operations. In the code part, we involve calling the data source method of Weibo, mainly calling the query single item.
Low-code development still requires writing part of the code, and you need to be proficient in JavaScript. Once you learn the language, you will become more comfortable writing code. If you are interested, open your editor and practice it.