首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >1小时速建官网,企业品牌即刻上线

1小时速建官网,企业品牌即刻上线

原创
作者头像
腾讯云开发TCB
修改2025-08-27 16:22:48
修改2025-08-27 16:22:48
20700
代码可运行
举报
文章被收录于专栏:云开发云开发
运行总次数:0
代码可运行

业务背景

适用于所有需要建立品牌形象和与外界沟通的领域。适合资源有限、希望快速上线官网,并专注于业务本身的中小企业。让你用最小的成本,获得一个专业级的线上门户。

点击“安装模板”下载
点击“安装模板”下载

1 模板简介

企业官网适用于企业快速完成官网搭建,展示企业业务范围、行业影响、企业文化、合作案例等,方便客户全方位了解企业信息。主要包括:

  • 基本信息
  • 合作伙伴
  • 最新动态
  • 解决方案
  • 应用场景

云模板内置了c端应用、后台管理系统和api接口,开发者可以根据自己的需要选择对应的开发模式。

1.1开发模式

基于c端应用+后台管理系统的敏捷开发

开发者可以基于模板中已有的c端应用和b端管理系统进行二次开发,快速迭代项目,实现自己的业务需求,适用于定制化不强的业务,便于快速上线。

基于api+后台管理系统的自定义开发

当现有的c端应用模板不满足业务需求时,开发者可以使用原生微信开发实现自己的c端应用,编写自定义UI和业务逻辑,使用模板提供的api和后台管理系统持久化数据,适合有高度自定义需求的开发者。

基于c端应用+后台管理系统的开发方式可直接参阅基于c端应用+后台管理系统开发指南,基于api+后台管理系统的开发方式可直接参阅基于api+后台管理系统自定义开发指南,无论使用哪种开发方式,安装指南是不可缺少的环节。

提示: 在项目开始前,预先调研自己的项目适合哪种开发模式,是一种不错的做法

2 快速开始

2.1 安装企业官网云模板

(1)从微信IDE创建项目入口安装

在微信IDE创建项目入口找到 企业官网 云模板,点击 确定 按钮,等待安装完成。

安装
安装

(2)从模版中心安装

在云模板中心找到 企业官网 云模板,点击右上角 安装模板 按钮,等待安装完成。

注:在创建项目之后,可通过微信开发者工具右上角的云开发->云模板->模板中心进入

2.2 相关资源说明

无论从哪一种入口安装模板,安装完成后,您将获得以下资源,他们的作用和位置分别为

  • 云数据库集合:本质为云开发数据库表,用于存储数据
  • 管理后台:云模板提供的管理后台,可直接访问,或在云后台查看
  • c端应用:使用基于c端应用+后台管理系统的敏捷开发模式时,c端应用直接嵌入到小程序中,预览区在微信开发者工具左侧,开发者点击页面设计可以在微搭低代码平台,通过可视化界面来编辑c端应用的各个页面,完成二次开发。
  • api(工作流):本质为工作流,提供对数据模型的增删改查能力,使用基于api+后台管理系统的自定义开发时,api(工作流)是开发者在原生微信开发中和数据模型交互的桥梁。

2.3 基于c端应用+后台管理系统开发指南

开发者从微信IDE创建项目入口完成安装步骤后,微信开发者IDE左侧会展示c端应用预览,右侧包括云数据库集合,管理后台,api(工作流)等各种资源。

开发者可在此基础上进行二次开发,云模板致力于在简洁和灵活性上做平衡,值得庆幸的是,大部分的资源,如c端页面、api(工作流)、后台管理系统等,开发者都可自行修改。

(1)界面编辑

c端应用编辑,可以在服务管理中点击页面设计,跳转到微搭web编辑器编辑应用。

b端管理后台,可以在服务管理的管理后台点击编辑,跳转到微搭web编辑器编辑应用。

编辑完成后,重新编译项目或者重启项目,将会看到最新的更改。

(2)发布

发布方式有两种,直接使用微信IDE的上传功能发布小程序(推荐),另一种是使用微搭低代码的发布功能,绑定小程序ID后发布。

2.4 基于api+后台管理系统自定义开发指南

从模板中心完成安装步骤后,在我的应用列表中点击查看详情会展示模板相关资源。

模板中的c端应用并不是必须的,开发者可以编写原生代码,在前端调用api来实现业务逻辑,接口的说明和调用示例在 接口展示 中做了详尽说明。

(1)api(工作流)具体使用方式如下

  • 配置云开发环境 ID

修改app.js,在 ApponLaunch 生命周期方法中添加云能力初始化代码,参数传入当前小程序的云开发环境ID。

代码语言:javascript
代码运行次数:0
运行
复制
App({
  onLaunch: function () {
    wx.cloud.init({
      // env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
      env: '***',
      // 是否在将用户访问记录到用户管理中,在控制台中可见,默认为false
      traceUser: false,
    });
  },
});
  • 调用api与数据库表交互
代码语言:javascript
代码运行次数:0
运行
复制
wx.cloud.callFunction({
  name: 'cloudbase_module',
  data: {
    name: 'business_website_get_news',
    data: {
      "filter": {
          "where": {
              "_id": {
                  "$nempty": 1
              }
          }
      },
      "select": {
          "$master": true
      },
      "pageNumber": 1,
      "pageSize": 10,
      "getCount": true
    },
  },
  success: (res) => {
    
  },
});

(2)发布

与普通小程序发布一致

3 数据模型架构设计

数据模型包含四张表,字段和关联关系如下

4 api(工作流)设计

4.1 api总览

模板一共包含7个api(工作流),名称和作用如下:

  • business_website_get_info: 获取企业官网基础信息
  • business_website_get_scene: 获取企业官网应用场景列表
  • business_website_get_scene_detail: 获取企业官网应用场景详情
  • business_website_get_news: 获取企业官网最新动态列表
  • business_website_get_news_detail: 获取企业官网最新动态详情
  • business_website_get_solution: 获取企业官网解决方案列表
  • business_website_get_solution_detail: 获取企业官网解决方案详情

对于基础信息、应用场景、最新动态、解决方案只提供了查询api,创建、编辑和删除可在云后台进行操作。

4.2 调用方式

在调用之前需要初始化云开发sdk,初始化方式可参照快速开始章节中配置云开发环境 ID

4.3 参数说明

对于查询api,查询参数不仅限于api接口文档提供的示例,开发者可根据实际业务需求,组合不同的查询条件,获取数据。

对于删除api,为了提供最大限度的兼容性,接口的删除条件均为数组,意味着该接口既可以删除单条记录,也可删除多条记录。

4.4 返回值

接口返回值结构如下

代码语言:javascript
代码运行次数:0
运行
复制
{
    "errMsg": "cloud.callFunction:ok",
    "result": {
        "Response": {
            "Data": {
                "records": [
                    {
                        "date": 1716220800000,
                        "owner": "1783070746496802818",
                        "createdAt": 1716367361763,
                        "createBy": "1783070746496802818",
                        "updateBy": "1783070746496802818",
                        "_openid": "1783070746496802818",
                        "_id": "324d3339664db001015a631557175861",
                        "title": "功能更新要点:新增流程引擎功能,新增编辑器实现预览模式...",
                        "content": "<p><span style=\"font-family: PingFangSC-Regular, 苹方, sans-serif\"><span style=\"font-size: 14px\"><span style=\"background-color: #ffffff\"><span style=\"color: #000000\">腾讯云微搭低代码 WeDa 是高效、高性能的拖拽式低代码开发平台,向上连接前端的行业业务,向下连接云计算的海量能力,助力企业垂直上云。微搭将繁琐的底层架构和基础设施抽象化为图形界面,通过行业化模板、拖放式组件和可视化配置快速构建多端应用(小程序、H5应用、Web 应用等),免去了代码编写工作,让您能够完全专注于业务场景。微搭以云开发作为底层支撑,云原生能力将应用搭建的全链路打通,提供高度开放的开发环境,且时刻为您的应用保驾护航</span></span></span></span></p><p></p><p><span style=\"font-family: PingFangSC-Regular, 苹方, sans-serif\"><span style=\"font-size: 16px\"><span style=\"background-color: #ffffff\"><strong><span style=\"color: #000000\">拖拽开发</span></strong></span></span></span></p><p><span style=\"font-family: PingFangSC-Regular, 苹方, sans-serif\"><span style=\"font-size: 14px\"><span style=\"background-color: #ffffff\"><span style=\"color: #000000\">页面可视化拖拽搭建和布局,上手门槛低。</span></span></span></span></p><ul data-list-style-type=\"circle\" style=\"--ul-list-style-type: '\\25EF';\" class=\"nonUnicode-list-style-type\"><li><p><span style=\"font-family: PingFangSC-Regular, 苹方, sans-serif\"><span style=\"font-size: 14px\"><span style=\"background-color: #ffffff\"><span style=\"color: #000000\">表单组件拖拽布局,配置属性丰富,自由度高。</span></span></span></span></p></li><li><p><span style=\"font-family: PingFangSC-Regular, 苹方, sans-serif\"><span style=\"font-size: 14px\"><span style=\"background-color: #ffffff\"><span style=\"color: #000000\">极简开发流程,小白也能3分钟极速实现应用的开发、发布和运维。</span></span></span></span></p></li></ul><p></p>",
                        "picture": "cloud://wx-env01-3gf49vue58112f19.7778-wx-env01-3gf49vue58112f19-1257473911/weda-uploader/7783ba574b2c5f1077d9875651fa5ac6-d33eff8124507051de9170ea09b64100.png",
                        "updatedAt": 1716367361763
                    }
                ],
                "total": 1
            }
        }
    },
    "requestID": "b531ebc5-9bc4-475e-9b1c-a4d2075ff3c0"
}

不同接口result内的值可能不同,但是对于同一个接口,返回值是稳定的,开发者可自行进行容错处理。

5 QA

Q:api(工作流)的查询参数如何编写?

A:查询参数与orm框架的编写方式类似,采用对象的形式描述,具体可以参照

Q:如何将cloud://开头的图片转为

A:云开发针对图片做了防盗链处理,如需将cloud://的地址转为](

代码语言:javascript
代码运行次数:0
运行
复制
wx.cloud
 .getTempFileURL( // 支持数组类型参数,同时处理多张图片
   "cloud://tcb-demo-10cf5b.7463-tcb-demo-10cf5b-1302484483/images/pic_netbian_com/001714-162653863412dd.jpg"
 )
 .then((url) => console.log("请求结果", url));

Q:云存储图片不显示

A:检查云存储是否为公有读写,非公有读写会导致模版页面预览看不到云存储的图片/文件内容。如您的环境是免费环境,此处需要切换为付费才能将云存储设置为公有读。

点击云模版链接,快速安装

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 业务背景
  • 1 模板简介
    • 1.1开发模式
  • 2 快速开始
    • 2.1 安装企业官网云模板
    • 2.2 相关资源说明
    • 2.3 基于c端应用+后台管理系统开发指南
    • 2.4 基于api+后台管理系统自定义开发指南
  • 3 数据模型架构设计
  • 4 api(工作流)设计
    • 4.1 api总览
    • 4.2 调用方式
    • 4.3 参数说明
    • 4.4 返回值
  • 5 QA
  • 点击云模版链接,快速安装
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档