微搭腾讯低代码平台「微搭创建小程序操作教程」

康尼 • 2022年 12月 25日下午4:40 • 软件百科 • 阅读 340

微搭是谁

2018年，腾讯云联合微信推出了“小程序·云开发”产品，让开发者无需考虑服务器运维等后端问题。该系列产品在过去几年间不断迭代，陆续推出了基于容器架构的云托管、低代码开发工具微搭等，进一步降低了底层运维和应用开发的复杂性。腾讯云微搭给开发者提供了丰富的模板，通过拖拉拽的方式就能搭建应用，可以将应用开发效率提升3到5倍。

腾讯高级产品经理、微信云开发产品负责人董娜利介绍，目前，微信生态中有超过100万的应用接入云开发，包括电商、零售、游戏、城市健康服务等多个行业的应用。比如，某健康服务借助云托管产品，2天完成了2个版本的上线迭代，并且支撑起客户支撑10万QPS （每秒查询率）量级的需求，同时支持多区高可用部署。相比自建，云开发的方式为客户节省了大量技术投入成本和时间，实现快速上线。

腾讯云微搭功能升级，为服务商提供更多能力

为了进一步提升开发效率、降低开发门槛，腾讯还推出了低代码开发工具微搭，让开发者像搭积木一样搭建应用。自发布以来，微搭平台上搭建的应用超过30万个，软件定制成本整体下降了80%。

微信原生低代码开发平台“微搭” 图/受访者供图

过去一年里，微搭围绕拉新获客、留存转化这两大突出客户需求完善产品功能，推出了一码多端引擎生成小程序和Web（网页）、企业名片搜索直达、浏览器一键调起小程序等丰富套件，帮助小程序拉新获客。此外，微搭还发布了订阅消息推送、客服和支付插件等开箱即用组件，高效提升小程序的留存和转化。针对企业微信场景，微搭支持一键发布应用到企微工作台，打通企微通讯录、日程管理、会议管理等功能，方便企业将应用与企业微信集成，打通工作流，提升企业办公协同效率。

值得一提的是，微搭是国内首家推出低代码小租户独享模式的低代码平台。该模式可以为每个开发者或SaaS（软件即服务）服务商分配一套数据隔离的多租户环境，SaaS厂商也可以为服务的客户提供独立环境，让数据更安全、更好地帮助客户构建定制化应用、沉淀数字资产。

微搭创建小程序案例

模型应用创建好之后，接着需要创建小程序，点击应用，点击新建自定义应用

输入应用的名称，选择小程序完成创建

过程中还需要再点击一下创建空白页

首页开发

我们首页提供一个宫格导航来引导功能，先将宫格导航组件添加到页面里

修改导航设置属性，将菜单调整成检测点、受检人、在线预约三个菜单

点击图标需要进行页面跳转，我们需要新建三个页面，点击左上角的页面旁边的+号，输入页面名称进行添加。分别添加检测点、受检人、在线预约页面

页面添加后将宫格导航的菜单配置到对应页面即可

除了顶部导航外，我们还需添加一个底部导航，用来切换首页和我的页面。添加一个tab栏组件

将tab栏组件的布局模式改成文字模式，标签列表更改为首页和我的，选中页面设置成首页

按照前述创建页面的方法再创建一个我的页面

然后将菜单项的跳转修改为对应的页面

检测点页面开发

往检测点页面添加一个数据列表组件

修改数据模型为检测点

选中简单列表标题，将文本内容绑定为检测点名称

选中这是简单列表内容，将字段绑定为详细地址

受检人列表页面开发

检测点页面我们只需要展示信息就可以，数据是在PC端录入的。受检人信息需要用户自己录入。那录数据的时候就需要标识是谁录入的数据，这个标识在小程序里就是openid。

如果是新手可能涉及到权限的一上来就要自己实现，比如要求用户输入用户名和密码进行登录。这一般是因为思维定势导致的，你用传统开发思维去套用互联网应用难免会走弯路。

一般我们的小程序用户打开时其实已经是匿名登录了，如果不登录是不能去操作和访问数据库的。那就需要在小程序一打开的时候就获取登录信息，也就是拿到用户的openid。

要怎么做呢？一般是在全局生命周期的启动方法里取获取。点击左上角的六个点，点击低代码编辑器

在打开的界面点击lifecycle就可以编写获取openid的代码

获取到openid如果需要其他页面使用的，我们需要将值放到全局变量里存储，为此我们先需要在变量里创建一个全局变量，openid

在低码编辑器的lifecycle里输入如下代码进行获取用户的openid

export default {
  async onAppLaunch(launchOpts) {
    //console.log('---------> LifeCycle onAppLaunch', launchOpts)
    const { OPENID, FROM_OPENID } = await app.utils.getWXContext()
    let userId = FROM_OPENID || OPENID
    if (!userId) {
      const { wedaId } = await app.cloud.getUserInfo()
      userId = wedaId
    }
    app.dataset.state.openid = userId
    console.log("openid",app.dataset.state.openid)
  },
  onAppShow(appShowOpts) {
    //console.log('---------> LifeCycle onAppShow', appShowOpts)
  },
  onAppHide() {
    //console.log('---------> LifeCycle onAppHide')
  },
  onAppError(options) {
    //console.log('---------> LifeCycle onAppError', options)
  },
  onAppPageNotFound(options) {
    //console.log('---------> LifeCycle onAppPageNotFound', options)
  },
  onAppUnhandledRejection(options) {
    //console.log('---------> LifeCycle onAppUnhandledRejection', options)
  }
}
12345678910111213141516171819202122232425262728