介绍
如何新建自定义 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) // 打印入参dataconsole.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 || $w.auth.currentUser.openId;console.log("get userinfo openid: ", openid);// 提前定义一个全局变量`userInfo`,用于存储获取到的用户信息,方便其他地方引用$app.dataset.state.userInfo = await $w.cloud.callDataSource({dataSourceName: 'diy_user_xxxx', // 数据源标识,请自行新建一个用户表`diy_user`,之后可在数据源列表中看到该标识methodName: 'wedaGetItemV2',params: {filter: {where: {$and: [{openid: {$eq: openid, // 获取单条时,推荐传入_id数据标识进行操作},},],},},select: {$master: true, // 常见的配置,返回主表}},});console.log("getuserinfo: ", $app.dataset.state.userInfo);}
2. 然后,在编辑器按钮组件绑定点击事件,在之后打开的事件面板中选择 JavaScript 代码节点,配置对应方法,即可点击按钮时完成上述自定义 JS 方法的调用,参考步骤如下:
选择需要的执行动作后保存。
3. 完成上述配置之后,可刷新页面,打开编辑器右下角的开发调试工具,即看到打印日志。
此处没有预先设置测试 openid,所以返回数据为空。自定义 Javascript 方法响应机制
说明:
目前自定义 Javascript 方法暂时没有超时事件机制,例如方法里是死循环,就会一直执行。
如果在自定义 Javascript 方法里涉及到异步请求或者后端服务,才会有响应超时的情况,最长响应时间目前没有统一的标准,最长响应时间是60s,例如在方法里调用数据模型,数据模型的最长响应时间是20s。