自定义 JavaScript 方法

最近更新时间：2024-03-05 14:10:51
我的收藏
本页目录：

介绍
运行在前端的 JavaScript 代码块，遵循标准的 JS 语言规范。可通过自定义 JavaScript 方法实现自定义的业务逻辑，或者调用微搭官方的 前端 API 以及外部 JSSDK 等。
如何新建自定义 JavaScript 方法
建议通过编辑器左下角代码区，单击 + 直接新建自定义 JavaScript 方法。
﻿
﻿
﻿
编辑 JavaScript 方法。
﻿
﻿
﻿
说明：
自定义 JS 方法的作用域分为页面作用域和应用全局作用域，可以按需声明。默认情况下，使用页面作用域即可。
也可在代码编辑器中直接新建自定义 JavaScript 方法，具体请参见 代码编辑器。
如何调用自定义 JavaScript 方法
在内部自定义 JS 代码之间进行调用。
例如：定义了一个全局 JS 方法 getBalance()，则在代码中的调用路径为 $app.common.getBalance({...})。若定义了一个页面作用域的 JS 方法 getChatList()，则调用路径为 $page.handler.getChatList({...})。
说明：
自定义 JavaScript 方法以及自定义变量和 Query 对象等的引用路径都可以在编辑器左下角代码区 > 单击 ··· > 复制调用路径快捷获取，如下所示：
﻿
﻿
﻿
在表达式中调用 JS 方法的传参方式。
﻿
﻿
﻿
在事件面板的 JavaScript 代码方法节点中进行调用，例如：
﻿
﻿
﻿
说明：
如果在事件动作中调用了自定义 JS 方法，方法正常执行完成默认会触发成功时节点，如需触发失败时节点，可在自定义 JS 方法中通过  throw new Error('message') 或 return Promise.reject('message')  来达到预期效果，详情请参见 事件系统。
应用场景示例
示例1：通过自定义 JS 代码打印当前登录用户信息
该示例以单击某个按钮时，触发一个自定义 JS 方法，来打印当前登录用户的详细信息。
1. 首先，在编辑器左下角代码区单击 + 新建一个 JavaScript 方法，例如命名为 user_login 并保存，函数体示例代码如下。
export default function({event, data}) {
  console.log('data',  data) // 打印入参data
  console.log('event', event) //打印event对象
  if(data){
    return 'success'
  }else{
    throw 'error'
  }
}
说明：
在多个事件动作节点的执行过程中，某个节点执行完成后默认进入执行成功的分支，如果需要在节点执行之后触发动作执行失败的分支，则可在自定义 JS 方法中添加抛出异常代码，如上述的 throw Error 即可。
﻿
﻿
﻿
2. 然后，可在编辑区拖入一个按钮组件，选中按钮组件后，在右侧组件属性面板的右下角为其配置点击事件，选择执行动作 Javascript 代码。
﻿
﻿
﻿
3. 在事件面板中，为选择的自定义 JS 方法 user_login配置方法入参，例如根据表达式提示选择入参为 $w.auth.currentUser（currentUser 为微搭 内置系统变量，表示当前登录用户），完成配置后单击保存。
﻿
﻿
﻿
4. 确认上述配置后，回到编辑区单击按钮即可触发事件对应的自定义 JS 方法，打开编辑器右下角开发调试工具，即可查看单击时的打印日志，如下所示：
﻿
﻿
﻿
说明：
如果在事件调用自定义 JS 方法时，需要传入多个参数，例如传入 user 和 age 两个参数，则传参表达式可写作 {"user": $w.auth.currentUser, "age": 21}，如下图所示。
﻿
﻿
﻿
则在自定义 JS 代码的函数体中，可以通过 data.target.user 以及 data.target.age 来分别引用传入参数的值。
示例2：实现通过用户 openid 来查询用户表中的详细信息
该示例在页面加载时，通过一个自定义 JS 方法，实现通过已知的小程序 openid 来从数据表中查询当前用户的更多详细信息为例，具体操作过程如下。
1. 首先，在编辑器左下角代码区单击 + 新建一个 JavaScript 方法，例如命名为 getUserInfo，函数体示例代码如下。
export default async function({event, data}) {
﻿
 var wxa = await app.utils.getWXContext();
 const openid = wxa.OPENID || wxa.FROM_OPENID || app.auth.currentUser.openId;
 console.log("get userinfo openid: ", openid);
﻿
 // 提前定义一个全局变量`userInfo`，用于存储获取到的用户信息，方便其他地方引用
 $app.dataset.state.userInfo = await app.cloud.callModel({
     name: 'diy_user_xxxx', // 数据源标识，请自行新建一个用户表`diy_user`，之后可在数据源列表中看到该标识 
     methodName: 'wedaGetItem', 
     params: {
       where: [{
           key: "openid",
           rel: "eq",
           val: openid,
       }],
     },
 });
﻿
 console.log("getuserinfo: ", $app.dataset.state.userInfo);
﻿
}
2. 然后，在编辑器按钮组件绑定点击事件，在之后打开的事件面板中选择 JavaScript 代码节点，配置对应方法，即可点击按钮时完成上述自定义 JS 方法的调用，参考步骤如下：
﻿
﻿
﻿
选择需要的执行动作后保存。
﻿
﻿
﻿
3. 完成上述配置之后，可刷新页面，打开编辑器右下角的开发调试工具，即看到打印日志。
﻿
﻿
此处没有预先设置测试 openid，所以返回数据为空。
自定义 Javascript 方法响应机制
说明：
目前自定义 Javascript 方法暂时没有超时事件机制，例如方法里是死循环，就会一直执行。
如果在自定义 Javascript 方法里涉及到异步请求或者后端服务，才会有响应超时的情况，最长响应时间目前没有统一的标准，最长响应时间是60s，例如在方法里调用数据模型，数据模型的最长响应时间是20s。
上一篇: 自定义变量下一篇: Query 数据查询介绍