腾讯微搭 - 小程序开发入门实践

腾讯微搭让小程序开发变得简单易上手。作为产品经理,我发现它的功能模块和操作界面都非常熟悉,就像搭积木一样可视化。虽然需要一些开发基础知识,但已大大降低了入门门槛。

手把手教你"手搓"小汽车

这次分享的项目是"小汽车嘟嘟",将通过4个章节分享如何"手搓"一辆小汽车。当然，这只是一个比喻形式,目的是让大家更好地理解微搭的功能和快速上手使用。

第一章节 - 手搓汽车零件：页面搭建

页面布局设计

学会如何搭建页面,进行布局涉及，每个页面就是业务需求中的一个零件。

组件样式调整

将发动机、车身、车尾、前轮、后轮等零件用5个页面进行比喻，并学习如何调整组件的样式

快速创建应用

按行业模板创建

官方提供了非常丰富的行业模板，通过行业模板创建应用可以更快速的开发出你的小程序

创建空白应用

我们这次项目将从空白应用创建，逐步演示开发过程

“小汽车嘟嘟”

我们给新创建的应用命名为小汽车嘟嘟， 它包含五个子页面，分别为发动机，车身，车尾，前车轮，后车轮。一辆车由此五个部分组成，这个小程序将支持你分别修改这五个部件，以改变车的整体外观

一、创建车身页面

页面结构包含三个区域，分别为：

1.下拉区域，可以在下拉列表中选择任意一款车身

2.操作区域，用于取消和保存用户的操作

3.展示区域， 展示用户选择的车身的图

1）页面布局

给页面添加三个普通容器

tips：微搭有很多的布局容器，作为新手，最好理解的是普通容器，可以用普通容器做页面的布局设计

2）添加组件到容器内

在第一个容器里面添加下拉单选组件

在第二个容器里面添加两个按钮，分别为“取消”和“确定”

在第三个容器里面添加图片展示组件

你会发现这些组件都紧挨在一起，特别的丑，所以接下来，要修改容器和组件的样式，以调整它们在页面上的位置

3）调整容器的样式

这里以第二个容器为例

首先设置其宽度为 100%，以撑满屏幕；

然后设置它的内边距，这样，就可以让容器里面所有组件内缩，更加美观；

然后布局改成平分，这样两个紧挨在一起的按钮就平分居中显示了；

最后给容器上一个背景色。

tips： 容器的样子调整会影响到容器里面所有的组件

4）调整组件样式

当完成了容器的样式调整后，我们还可以对容器里面的组件做单独的样式调整，以实现更加复杂的布局

5）给组件添加素材

a）我们从网络上找到一些车辆素材，并裁剪出它们的车尾、车身、前轮、后轮、发动机

b）把素材上传到微搭的应用的素材库中

c）选择下拉组件，在属性面板中的【选项栏】添加选项值，选项名称输入“黄色车身”，选项值复制粘贴【素材库】中对应的黄色车身的链接，这样下拉列表中就有了黄色车身的选项。

d）接下来，选择图片组件，在属性面板中的【地址】区域，点击fx，切换到表达式页面，并输入“$w.select1.value”，它表示图片将加载下拉单选组件所选择的项对应的值。

tips：这里涉及到了表达式的语法，需要具备一些基本的对象访问的代码知识

e）我们把素材全部添加后，就能在页面上通过下拉单选的方式，选择不同的车身，不同的车身图片也会显示出来。

实战练习与总结

通过本章节的学习,相信大家已经对如何使用容器和组件来搭建微信小程序页面有了初步的认知。接下来,我们将进入实战操作的环节,让理论知识和实践技能相结合。

首先,我们可以选择一个自己喜欢的App,然后挑选其中的某个页面作为参考目标。在微搭中添加所需的组件,通过调整各个组件的样式属性,尝试还原出与参考页面一致的效果。这种"拆解-复刻"的练习方式,不仅能帮助我们熟悉微搭的使用,也能培养对页面布局和交互设计的理解能力。

通过这样的实践操作,大家可以不断积累经验,逐步提升自己的页面设计技能。同时,也要主动思考和总结页面设计中的一些普遍规律,如合理的组件搭配、响应式布局的实现等。只有把理论知识和实践经验结合起来,我们才能够真正掌握微信小程序开发的核心技能,为未来的作品创作打下坚实的基础。腾讯微搭 - 小程序开发入门实践

第二章节 - 汽车零件调试：页面数据加载和逻辑处理

给页面注入逻辑

学会如何通过代码表达式控制页面中的各种逻辑。

给页面注入数据

将静态页面变成动态页面,注入数据实现动态展示。

让页面拥有“灵魂”的两大要素

数据

逻辑

一、数据模型

上一章节，我们看到的页面都是动态的，但现实中，我们用的各种 app，里面的页面都是动态的，不同的人，看到不同的内容。若要让你的微搭小程序也动态的显示内容，则需要使用“数据模型”来实现。

1）创建数据模型

在微搭左侧菜单栏中，进入【数据库】面板，选择当前应用，点击“+”号，新建数据模型“发动机”，输入对应的名称和描述

2）添加字段

添加数据字段，分别为“发动机名称”、“发动机图片”。

3）添加数据

可以把我们提前准备好的数据手动添加到数据模型中，方便后续使用

二、页面逻辑

通过逻辑控制页面加载数据，显示数据，修改数据等等，让页面按照我们期望的方式运行。

本节将实现“发动机”页面的逻辑，可以在“发动机”页面加载数据模型的数据，按照下拉选择框的选择实时查看数据。

1）加载数据模型

a）点击代码区域的当前页面的“+”号，在弹窗中，选择“新建微搭数据表查询”

b）从数据表中选择“发动机”，点击运行，可以看到查询出的数据列表。

c）点击页面，在右下方出现事件列表；点击页面加载（load），在弹窗中选择【调用数据查询】，然后选择上一步创建的query。这样当此页面加载的时候，会触发 query 执行，以获得数据模型的数据。

2）下拉单选组件绑定数据

a）在下拉单选组件的属性面板，点击【选项】旁边的数据库图标，切换到数据绑定，然后点击变量旁边的 fx进入表达式编辑弹窗。

b）通过“$w.query_chaxun_chewei_ziliao.data.records.”获取到数据表里面的数据。然后通过“map((item) => ({ label: item.fdjmc, value: item.fdjtp }))”循环便利这些数据记录，并返回[label，value]格式的数组数据。

3）实现数据加载和展示

这样，页面就能加载数据表中的数据，并拥有了简单的逻辑处理能力。

tips： 在这个章节里面只使用了一些最基本的事件方法和表单式，仅作为入门理解，更深入的理解，还是需要多练习和查看官方的文档：https://cloud.tencent.com/document/product/1301/67121

第三章节 - 汽车零件组装：多个页面组合协作

前面两个章节学习了页面的搭建以及如何给页面注入数据和逻辑，但在实际的业务场景当中是无法通过一个页面逻辑来完成的，一定是多个页面进行组合才能实现具体的业务需求，比如一个下单的需求就包含了商品列表页面、商品详情页、订单确认页、支付页、订单详情页；

业务流程图

以“小汽车嘟嘟”的项目为例，我们需要先画一个流程图来梳理业务，这样才能明确的知道，要想实现“小汽车嘟嘟”的汽车组装需求需要哪些页面做哪些事情

一、搭建首页

使用前面学习的知识，搭建“小汽车嘟嘟”的首页，在首页中，有一个汽车展示区域，和一个操作区域，在操作区域，有 5 个按钮，分别可以编辑发动机，车身、车尾、前轮和后轮。

二、创建汽车数据模型

使用前面学习的知识，创建汽车数据模型，其包含了汽车各个部件的图片字段

三、给首页注入数据

1）加载数据

使用前面学习的知识，先创建一个 query，查询出车辆各个部件的图片。在首页的 load 方法中，调用这个 query，以确保其在页面加载的时候被执行

2）显示数据

使用前面学习的知识，车身图片的地址，切换到 fx，通过表达式调用数据表中的车身图片。

tips：这里表达式的判断逻辑是如果数据模型中没有车身图片，就用默认图片，这样可以保证页面在没有数据的时候，不会出现空白的情况

四、给页面注入逻辑

这个业务场景中的主要逻辑就是点击世界用户点击车身的修改按钮，则会跳转到车上修改的页面

1）给首页按钮添加页面跳转逻辑

点击按钮组件，在右下角的事件列表中，选择【点击】事件，然后选择“打开页面”，再选择打开“车身”页面，这样点击按钮后，会跳转到车身的编辑页面

tips：大部分的业务都会涉及到页面与页面之间传递参数，关于页面与页面之间如何传递数据，有三种方式，第一种是通过页面参数传递；第二种是通过全局变量传递；第三种是通过数据表传递；

2）给“车身”页面的取消按钮添加逻辑

点击取消时，不做任何操作，并返回首页，所以给【取消】按钮添加跳转到首页的逻辑即可

3）给“车身”页面的确定按钮添加逻辑

点击【确定】时，要把用户当前选择的“车身图片”保存到“车”的数据表中。

在左下角把对“车”的新建和修改操作提前准备好，然后给【确定】按钮添加如图的代码，意思为：先查询“车”数据表，然后判断是否有车辆信息，如果没有，就先创建一辆，然后修改“车”的车身图片；

最后

按照如上操作，完善所有页面（首页、车身、车尾、发动机、前轮、后轮），预览小程序的运行效果

章节回顾

通过三个章节分别学习了如何搭建页面？如何在页面中添加动态数据和逻辑？如何实现多个页面的组合来满足业务的需求？

更多的还是需要多去做一些小的项目实践，以及在过程当中多参考官方文档，这样才能够加深对腾讯微搭的产品的理解，这里给大家推荐官方的操作文档非常有帮助：https://docs.cloudbase.net/lowcode/introduce