【微信小程序】如何不点击，使用方法触发按钮的点击事件？

前言

• 需求：想要使用方法来触发Button元素中的onClick事件，而不是人为点击触发。

• 环境：

   "@tarojs/react": "3.5.12",
   "react": "^18.0.0"
  

实现

 function autoClick(clickId) {
   const e = document.createEvent("MouseEvents");
   //将元素的事件类型改为tap
   e.type = "tap";
   document.getElementById(clickId).dispatchEvent(e);
 }

• 参数：clickId<string> ：点击按钮id标记

• 示例：

   const component=()=>{
     useEffect(()=>{
       autoClick('test-autoClick');
       //=>test
     },[])
     
     function autoClick(clickId) {
       const e = document.createEvent("MouseEvents");
       e.type = "tap";
       document.getElementById(clickId).dispatchEvent(e);
     }  
     
     return (
       <Button 
         id='test-autoClick'
         onClick={()=>console.log('test')}
       >
         按钮
       </Button>
      )
   }
  

思考过程

• 通过对比点击事件属性值来找到实现方法

  

  • 左：方法中createEvent出来的事件对象。
  • 右：点击按钮输出的点击事件对象。

疑问

以下是本人对改内容的一些疑问？恳请读者能为我指点迷津，十分感谢🙏

Q：若想自动触发微信点击事件（如获取手机号、联系客服等），会出现如下报错（即必须用户点击才可触发），该场景如何实现自动触发？

• 复现：将上述示例按钮中的onClick事件替换成联系客服

   <Button
     id='test'
     onClick={() => {
       Taro.openCustomerServiceChat({
         extInfo: { url: globalThis.config.serviceUrl },
         corpId: globalThis.config.corpId,
       })
     }}
   >
     按钮
   </Button>
  

• 报错