Taro转微信小程序，无法调用微信小程序自动化测试api page.callMethod

[iSung]

问题描述

Taro转微信小程序，无法调用微信小程序自动化测试api page.callMethod，但原生微信小程序可以调用。

复现步骤

1. taro init 生成一个最简的demo，在这我们称它为Taro demo。
2. 在Taro demo index.jsx文件中添加相关方法，完整代码如下。

import Taro, { Component } from '@tarojs/taro'
import { Button } from '@tarojs/components'
import './index.scss'

class Index extends Taro.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '按钮'
    }
  }

  submit = () => {
    this.setState({
      text: '提交中...'
    });
    console.log('submit');
  }

  componentDidMount() {
    console.log(Taro.getCurrentPages(), 'getCurrentPages')
  }

  render () {
    return (
      <Button onClick={this.submit}>{this.state.text}</Button>
    )
  }
}

3. 打开微信开发者工具，选择Taro demo dist文件夹，打开项目。在工具栏找到设置 -> 安全设置 -> 安全，开启服务端口。
4. 在Taro demo中安装miniprogram-automator，npm i --save miniprogram-automator。
5. 在Taro demo项目中新建test.js，添加以下代码，部分配置需要根据你本机配置修改，完整代码如下：

const automator = require('miniprogram-automator')

const miniProgram = automator.launch({
  // cliPath: 'path/to/cli', // 工具 cli 位置，如果你没有更改过默认安装位置，可以忽略此项
  projectPath: '/Users/isung/Desktop/Taro demo/dist', // 项目文件地址，pwd查看完整路径
}).then(async miniProgram => {
  const page = await miniProgram.currentPage();
  await page.callMethod('submit');
  await miniProgram.close();
})

6. 执行test.js，node test.js，抛出以下错误。

系统信息

• 操作系统: macOS
• Taro 版本 1.3.14
• Node.js版本 v10.11.0
• 报错平台 weapp

补充信息

初步排查可能跟Taro转微信小程序component方法挂载有关系，Taro小程序component绑定方法全部挂载在page__proto__上，未绑定方法未挂载。原生小程序则是全部挂载在page上，具体参照以下截图。

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[shenghanqin]

虽然我目前没完全确认，但我已知的是Taro的抖音小程序的Page对应Page，Taro的微信小程序是Page对应Component isPage上。所以我是给Page上加了装饰类（高阶函数）

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[iSung]

虽然我目前没完全确认，但我已知的是Taro的抖音小程序的Page对应Page，Taro的微信小程序是Page对应Component isPage上。所以我是给Page上加了装饰类（高阶函数）

不是很理解，方便贴下代码吗？

[shenghanqin]

虽然我目前没完全确认，但我已知的是Taro的抖音小程序的Page对应Page，Taro的微信小程序是Page对应Component isPage上。所以我是给Page上加了装饰类（高阶函数）

不是很理解，方便贴下代码吗？

在dist/pages/index里面的最后一行代码示意：

// 微信小程序
Component(require('../../npm/@tarojs/taro-weapp/index.js').default.createComponent(Index, true));
});

// 抖音小程序
Page(require('../../npm/@tarojs/taro-tt/index.js').default.createComponent(Index, true));

而在taro-weapp源码中有一些判断代码，我觉得帮助你理解

// packages/taro-weapp/src/create-component.js
if (isPage) {
    weappComponentConf.methods = weappComponentConf.methods || {}
    weappComponentConf.methods['onLoad'] = function (options = {}) {
      if (this.$component.__isReady) return
      Object.assign(this.$component.$router.params, options)
      initComponent.apply(this, [ComponentClass, isPage])
    }
    weappComponentConf.methods['onReady'] = function () {
      this.$component.__mounted = true
      componentTrigger(this.$component, 'componentDidMount')
    }
    weappComponentConf.methods['onShow'] = function () {
      componentTrigger(this.$component, 'componentDidShow')
    }
    weappComponentConf.methods['onHide'] = function () {
      componentTrigger(this.$component, 'componentDidHide')
    }
    pageExtraFns.forEach(fn => {
      if (componentInstance[fn] && typeof componentInstance[fn] === 'function') {
        weappComponentConf.methods[fn] = function () {
          const component = this.$component
          if (component[fn] && typeof component[fn] === 'function') {
            // eslint-disable-next-line no-useless-call
            return component[fn].call(component, ...arguments)
          }
        }
      }
    })
    __wxRoute && cacheDataSet(__wxRoute, ComponentClass)
  } else {
    weappComponentConf.pageLifetimes = weappComponentConf.pageLifetimes || {}

    weappComponentConf.pageLifetimes['show'] = function () {
      componentTrigger(this.$component, 'componentDidShow')
    }

    weappComponentConf.pageLifetimes['hide'] = function () {
      componentTrigger(this.$component, 'componentDidHide')
    }

    weappComponentConf.pageLifetimes['resize'] = function () {
      componentTrigger(this.$component, 'onResize')
    }
  }

[iSung]

虽然我目前没完全确认，但我已知的是Taro的抖音小程序的Page对应Page，Taro的微信小程序是Page对应Component isPage上。所以我是给Page上加了装饰类（高阶函数）

不是很理解，方便贴下代码吗？

在dist/pages/index里面的最后一行代码示意：

// 微信小程序
Component(require('../../npm/@tarojs/taro-weapp/index.js').default.createComponent(Index, true));
});

// 抖音小程序
Page(require('../../npm/@tarojs/taro-tt/index.js').default.createComponent(Index, true));

而在taro-weapp源码中有一些判断代码，我觉得帮助你理解

// packages/taro-weapp/src/create-component.js
if (isPage) {
    weappComponentConf.methods = weappComponentConf.methods || {}
    weappComponentConf.methods['onLoad'] = function (options = {}) {
      if (this.$component.__isReady) return
      Object.assign(this.$component.$router.params, options)
      initComponent.apply(this, [ComponentClass, isPage])
    }
    weappComponentConf.methods['onReady'] = function () {
      this.$component.__mounted = true
      componentTrigger(this.$component, 'componentDidMount')
    }
    weappComponentConf.methods['onShow'] = function () {
      componentTrigger(this.$component, 'componentDidShow')
    }
    weappComponentConf.methods['onHide'] = function () {
      componentTrigger(this.$component, 'componentDidHide')
    }
    pageExtraFns.forEach(fn => {
      if (componentInstance[fn] && typeof componentInstance[fn] === 'function') {
        weappComponentConf.methods[fn] = function () {
          const component = this.$component
          if (component[fn] && typeof component[fn] === 'function') {
            // eslint-disable-next-line no-useless-call
            return component[fn].call(component, ...arguments)
          }
        }
      }
    })
    __wxRoute && cacheDataSet(__wxRoute, ComponentClass)
  } else {
    weappComponentConf.pageLifetimes = weappComponentConf.pageLifetimes || {}

    weappComponentConf.pageLifetimes['show'] = function () {
      componentTrigger(this.$component, 'componentDidShow')
    }

    weappComponentConf.pageLifetimes['hide'] = function () {
      componentTrigger(this.$component, 'componentDidHide')
    }

    weappComponentConf.pageLifetimes['resize'] = function () {
      componentTrigger(this.$component, 'onResize')
    }
  }

感谢，这也是一种思路。

[shenghanqin]

@iSung
这是我的高阶函数的写法，希望能给你帮助。

// page.js
import Taro from '@tarojs/taro'

/**
 * 为 page 级别组件添加公共方法，向被装饰组件塞入 props
 * @param {ReactComponentLike} TaroComponent
 */
export default function WithPage(TaroComponent) {
  class CorePage extends TaroComponent {
    static options = {
      addGlobalClass: true
    }
    componentDidShow() {
      wx.bisdk && wx.bisdk.onPageShow && wx.bisdk.onPageShow()
      if (super.componentDidShow) {
        super.componentDidShow()
      }
    }
  }

  CorePage.displayName = TaroComponent.displayName
    || TaroComponent.name
    || 'CorePage'

  return CorePage
}

// pages/index/index.js
import CorePage from '../../page'
@CorePage
export default class Index extends Component {
  render(){
  }
}