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

一、适用场景

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

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

·全局配置区：

·页面配置区：

·编译区：

模块	功能
handler	Handler 是页面的方法集合，若你需要在某页面下调用，则在该页面 Handler 下新建方法，即能够在页面中调用组件、变量和平台方法等，请参见 Handler 方法使用介绍。
common	Common 是公共的方法集合，用于多个页面间的方法复用，详情请参见 Common 全局方法复用说明。同时，针对小程序端全局配置文件（app.json）的修改，也在 common 目录下，对应文件名为 mp_config。
style	全局配置区和每个页面都有 style 模块，在全局配置区的设置会作用到整个应用，单个页面的 style 只对页面内有效，详情请参见 Style 用法示例。
lifecycle	应用和每个页面都有自己的 lifecycle，全局配置区的 lifecycle 在应用使用的时候会生效，而只有当某个页面在页面堆栈最上层时，才会触发该页面的 lifecycle，详情请参见应用生命周期介绍。

进入 style 页面，定义自定义样式 text-style。

添加一个数据列表组件，选中该组件中的文本进行style绑定，className 输入我们在上面新建的自定义样式text-style。

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

在代码编辑器中，选择全局文件夹下的 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 方法集合下我们可以添加一个可为全局调用的名称为 sayHello 的方法。

注意：说明：

注意：如上图 common 目录结构所示，如果有针对小程序 app.json 等全局配置的修改，则可在代码编辑器 common 目录下的 mp_config 配置文件进行相应的修改。例如，按需配置小程序接口权限、请求超时配置等。

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

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

返回应用编辑器页面，按如下步骤可配置。

自定义方法界面选择执行配置。

选择 method1方法 > 绑定变量 getNowTime > 单击右上角保存。

输入框获取焦点，触发事件，页面效果展示。