收藏
回答

全局引用自定义组件遇坑

问题模块 框架类型 问题类型 提审时间 AppID
审核 小程序 需求 2018-12-20 111111111111111111111

1. 新建自定义组件



2.1 组件.wxml中只写了一个图片

<view class='modle_top' hidden='{{isHide}}'>
  <image class='modle_toast' src='/images/WechatIMG6.gif'></image>
</view>


2.2 组件.js,构造

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   * 用于组件自定义设置
   */
  properties: {
  },
  data: {
    isHide: false,
  },
  methods: {
    showToast: function () {
      // display需要先设置为block之后,才能执行动画
      this.setData({
        isHide: false,
      });
    },
    hideToast: function () {
      this.setData({
        isHide: true,
      })
    }
  }
})


2.3 组建.json

{
  "component"true,
  "usingComponents": {}
}


2.4 wxss就不粘了


3.0 因为现在全局中引用, 所以在app.json中添加

"usingComponents": {
    "toast""component/modleToast/modleToast"
  },



3.1 我在index.wxml中开头插入组件



3.2 index.js中使用  在单独页面中使用是有用的



4.1 但是在在全局中引用就报错,在app.js



前两种导入都下面这个错


selectCompnent()方法则报没有定义该方法


代码写到这一步就卡住了~

我想实现在app.js中能调用自定义组件中的  showToast和hideToast方法 ,或者实现在util.js公共js中调用自定义组件的方法


请问怎么能解决?


最后一次编辑于  2018-12-20  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

2 个回答

  • June
    June
    2018-12-21

    你这样 require 组件的 js 相当于重新执行一遍组件构造器,并不是获取组件的实例,自然会报错。如果想在 app 实例里拿到组件实例,那就要页面用某种方法将组件实例传过去才行。


    至于要用什么方法,比如页面将组件实例放到某个全局量让 app 实例自己去拿或者页面主动调 app 实例的某个方法将组件实例送过去等方式都行,看个人的选择了。

    2018-12-21
    赞同
    回复 2
    • DY
      DY
      2018-12-24

      嗯,这样的话我就需要在每个页面上获取组件实例了。我就是觉得太过于麻烦,想在util.js里获取组件实例,然后控制该组件的显隐。

      2018-12-24
      回复
    • June
      June
      2018-12-24回复DY

      自定义组件不一定是单例,在页面上获取反而是最稳妥的。

      2018-12-24
      回复
  • DY
    DY
    2018-12-20

    提问模块只有点审核才能有用,其他问题模块点击没法应。。。

    2018-12-20
    赞同
    回复 5
    • Ltt
      Ltt
      2018-12-20

      可以复现一下吗。换个浏览器试试,录一个视频?

      2018-12-20
      回复
    • DY
      DY
      2018-12-20回复Ltt

      util.js中调用自定义组件模块最终用template解决了。

      这种构造器的方式还是不知道该如何做,自定义组件写好了,

      在index.wxml中添加组件

      然后在app.json中配置组件也没问题。

      "usingComponents": {
          "toast": "component/modleToast/modleToast"
        },

      然后

      import { ToastPannel } from "./component/modleToast/modleToast"

      在util.js或者app.js中想要引用组件的js,不知道该怎么引用。用import的话就会报文中截图的错。(暂时录不了)

      2018-12-20
      回复
    • 娇华
      娇华
      2018-12-20回复DY

      麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

      2018-12-20
      回复
    • DY
      DY
      2018-12-20回复娇华

      代码片段:https://developers.weixin.qq.com/s/qIZdbNm67W4I

      我在util.js中 import了组件报错。

      2018-12-20
      回复
    • 娇华
      娇华
      2018-12-21回复DY

      收到,我们看下

      2018-12-21
      回复