本文将介绍如何通过微搭应用编辑器搭建企业官网小程序。
操作步骤
步骤1:创建小程序应用
1. 登录 微搭控制台,进入应用页面,选择新建自定义应用。
![](https://qcloudimg.tencent-cloud.cn/image/document/46ff2c4cad4f5b9d80663a16365a3475.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/46ff2c4cad4f5b9d80663a16365a3475.png)
2. 录入应用名称后单击确定,跳转后单击空白页完成应用创建。
![](https://qcloudimg.tencent-cloud.cn/image/document/4a15ad4d04659057154d045a28d3119b.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/4a15ad4d04659057154d045a28d3119b.png)
步骤2:搭建首页
1. 进入首页 > 单击页面首页 > 选择样式 > 将页面背景色调为 ![](https://qcloudimg.tencent-cloud.cn/image/document/f9f3c477c74519ddca6ee97dcda63f3b.png)
linear-gradient(180deg, #FFFFFF 9%, #F2F4F8 30%)
。
![](https://qcloudimg.tencent-cloud.cn/image/document/f9f3c477c74519ddca6ee97dcda63f3b.png)
2. 添加数据详情获取企业信息数据源内容。
![](https://qcloudimg.tencent-cloud.cn/image/document/1fe7f17691194d487a8b2a14b6f55c76.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/1fe7f17691194d487a8b2a14b6f55c76.png)
3. 新增轮播容器组件使用循环展示组件+图片组件并绑定首页展示图片信息数据。
![](https://qcloudimg.tencent-cloud.cn/image/document/a31d5e978023eb3a353309115d4af5ac.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/a31d5e978023eb3a353309115d4af5ac.png)
4. 新增宫格导航组件绑定功能展示数据。
![](https://qcloudimg.tencent-cloud.cn/image/document/e61e7182c403cd9b9da234ba7650e1be.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/e61e7182c403cd9b9da234ba7650e1be.png)
5. 搭建应用场景展示并绑定数据。
![](https://qcloudimg.tencent-cloud.cn/image/document/5734562569cf6a8b42013deeef1631be.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/5734562569cf6a8b42013deeef1631be.png)
6. 搭建最新动态并绑定数据。
![](https://qcloudimg.tencent-cloud.cn/image/document/ff0f0646ea6d24019e2b0d316a0fe3cf.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/ff0f0646ea6d24019e2b0d316a0fe3cf.png)
7. 为最新动态绑定跳转点击事件。
![](https://qcloudimg.tencent-cloud.cn/image/document/becc943c73edf7d4dad960a57cfcf7f1.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/becc943c73edf7d4dad960a57cfcf7f1.png)
8. 搭建合作伙伴并绑定数据。
![](https://qcloudimg.tencent-cloud.cn/image/document/73ecc26eb3b570055c334c749245a8fc.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/73ecc26eb3b570055c334c749245a8fc.png)
9. 增加页脚文字说明。
![](https://qcloudimg.tencent-cloud.cn/image/document/83e3f02b8e45f1cc3058e16118b0954a.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/83e3f02b8e45f1cc3058e16118b0954a.png)
10. 增加 Tab 栏并设置信息。
![](https://qcloudimg.tencent-cloud.cn/image/document/6a1017d081daf60ed64c68e98e838fce.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/6a1017d081daf60ed64c68e98e838fce.png)
步骤3:搭建解决方案界面
1. 添加数据列表获取解决方案数据源数据。
![](https://qcloudimg.tencent-cloud.cn/image/document/7e5f9c197e244154d47ade6901990b9f.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/7e5f9c197e244154d47ade6901990b9f.png)
2. 搭建展示卡片并绑定信息。
![](https://qcloudimg.tencent-cloud.cn/image/document/e911bf11f63233d3336e4717e76e25be.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/e911bf11f63233d3336e4717e76e25be.png)
3. 添加点击跳转事件。
![](https://qcloudimg.tencent-cloud.cn/image/document/cd68a4374b7cece1c7cdd2bd66668562.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/cd68a4374b7cece1c7cdd2bd66668562.png)
4. 添加 Tab 栏组件并设置信息。
![](https://qcloudimg.tencent-cloud.cn/image/document/9596ff7d2e6551249f10f0c265aa273c.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/9596ff7d2e6551249f10f0c265aa273c.png)
步骤4:搭建关于我们界面
1. 使用数据详情组件获取关于我们信息。
![](https://qcloudimg.tencent-cloud.cn/image/document/1f19aebdf0f4a64d2954ebfeba280ca3.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/1f19aebdf0f4a64d2954ebfeba280ca3.png)
2. 搭建页面并绑定信息。
![](https://qcloudimg.tencent-cloud.cn/image/document/f216f1d36251a36dacf011691fc1aa61.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/f216f1d36251a36dacf011691fc1aa61.png)
3. 设置 Tab 栏。
![](https://qcloudimg.tencent-cloud.cn/image/document/2cffcbcc9d1c9277c401253e07f34dee.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/2cffcbcc9d1c9277c401253e07f34dee.png)
步骤5:搭建最新动态界面
1. 使用数据详情获取动态列表。
![](https://qcloudimg.tencent-cloud.cn/image/document/d64bf54d1dfbf1a402fc87bd3c805511.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/d64bf54d1dfbf1a402fc87bd3c805511.png)
2. 使用循环组件绑定数据并展示。
![](https://qcloudimg.tencent-cloud.cn/image/document/9b126cf28cf4ec534a6a10a3fccf7e65.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/9b126cf28cf4ec534a6a10a3fccf7e65.png)
3. 添加底部公司信息。
![](https://qcloudimg.tencent-cloud.cn/image/document/2afbe24a7116739265e28d3bde73be4b.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/2afbe24a7116739265e28d3bde73be4b.png)
步骤6:搭建动态详情界面
1. 新建页面 URL 参数 data。
![](https://qcloudimg.tencent-cloud.cn/image/document/82b18a32da71e2ff8114778afc89ce37.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/82b18a32da71e2ff8114778afc89ce37.png)
2. 将获取到的 URL 参数 data 解析后绑定。
![](https://qcloudimg.tencent-cloud.cn/image/document/a42fdaab9c7406a6945f22b202a9a409.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/a42fdaab9c7406a6945f22b202a9a409.png)
至此,我们已经完成了企业官网的搭建,可以根据自己的业务特性,灵活调整各功能模块流程。