腾讯云微搭低代码 代码编辑器

什么是代码编辑器？

代码编辑器顾名思义是 Code 编辑器，可进行 JavaScript 和 CSS 的原生代码开发。结合可视化开发和传统代码开发，增强了扩展性。如下图单击代码编辑器入口：

适用场景

使用代码编辑要求开发者有一定的 JavaScript 基础，它能帮助开发者在使用微搭低代码进行拖拽式开发时，根据业务需求完善应用的逻辑丰富度和复杂度。

基本功能模块介绍

代码编辑器可以分为全局配置区、页面配置区和编译区，在页面配置区中包含了对应应用中每个单独的页面的文件夹。

全局配置区页面配置区编译区模块功能handlerHandler 是页面的方法集合，若您需要在某页面下调用，则在该页面 Handler 下新建方法，即能够在页面中调用组件、变量和平台方法等，请参见 Handler 方法使用介绍。commonCommon 是公共的方法集合，用于多个页面间的方法复用，详情请参见 Common 全局方法复用说明。style全局配置区和每个页面都有 style 模块，在全局配置区的设置会作用到整个应用，单个页面的 style 只对页面内有效，详情请参见 Style 用法示例。lifecycle应用和每个页面都有自己的 lifecycle，全局配置区的 lifecycle 在应用使用的时候会生效，而只有当某个页面在页面堆栈最上层时，才会触发该页面的 lifecycle，详情请参见 应用生命周期介绍。

Style 用法示例

进入 style 页面，定义样式参数。添加一个组件，选中该组件后进行 classname 参数选择。

LifeCycle 生命周期介绍

微搭支持应用、页面级别的生命周期函数，当对应的生命周期函数触发时，便会自动执行函数下已配置的自定义方法。

应用生命周期

在代码编辑器中，选择全局文件夹下的 lifecycle 文件，即可对应用的生命周期进行管理。

函数名说明onAppLaunch当应用初始化完成时触发（全局只触发一次）onAppShow监听小程序切前台事件。该事件与 App.onShow 的回调参数一致onAppHide监听小程序切后台事件。该事件与 App.onHide 的回调时机一致onAppError小程序发生脚本错误或 API 调用报错时触发onAppPageNotFound小程序要打开的页面不存在时触发onAppUnhandledRejection小程序有未处理的 Promise 拒绝时触发页面生命周期

在代码编辑器中，选择对应页面文件夹下的 lifecycle 文件，即可对该页面的生命周期进行管理。

函数名说明onPageLoad页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数onPageShow页面显示/切入前台时触发onPageReady页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互onPageHide页面隐藏/切入后台时触发。 如 app.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等onPageUnload页面卸载时触发。例如 app.redirectTo 或 app.navigateBack 到其他页面时触发

Common 全局方法使用介绍

在应用编辑器中打开代码编辑器，在全局 common 方法集合下我们可以添加一个可为全局调用的名称为 getTime 的方法。

全局方法的调用介绍

在代码中调用前面定义的全局函数，打开代码编辑器，在首页 lifecycle 中我们调用 getTime 方法来作为示例，把获取到的当前日期给变量（调用方法放到 lifecycle 的 onPageLoad 中，可以在页面加载时触发执行方法调用和变量赋值操作）。

Handler 方法使用介绍

在代码编辑器-页面的 handler 中可以新增方法 method1，我们可以调用 数据源相关接口 cloud.dataSources，通过 create 新增数据源记录。

注意

数据源新建及相关介绍请参见 数据源与数据管理。

返回应用编辑器页面，页面中新增一个按钮，按钮行为可配置点击时调用自定义方法。自定义方法可选择已建好页面 handler 方法 method1。