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中调用自定义组件的方法
请问怎么能解决？
你这样 require 组件的 js 相当于重新执行一遍组件构造器，并不是获取组件的实例，自然会报错。如果想在 app 实例里拿到组件实例，那就要页面用某种方法将组件实例传过去才行。
至于要用什么方法，比如页面将组件实例放到某个全局量让 app 实例自己去拿或者页面主动调 app 实例的某个方法将组件实例送过去等方式都行，看个人的选择了。
嗯，这样的话我就需要在每个页面上获取组件实例了。我就是觉得太过于麻烦，想在util.js里获取组件实例，然后控制该组件的显隐。
自定义组件不一定是单例，在页面上获取反而是最稳妥的。
提问模块只有点审核才能有用，其他问题模块点击没法应。。。
可以复现一下吗。换个浏览器试试，录一个视频？
util.js中调用自定义组件模块最终用template解决了。
这种构造器的方式还是不知道该如何做，自定义组件写好了，
在index.wxml中添加组件
然后在app.json中配置组件也没问题。
"usingComponents": {"toast":"component/modleToast/modleToast"},然后
import { ToastPannel } from"./component/modleToast/modleToast"在util.js或者app.js中想要引用组件的js，不知道该怎么引用。用import的话就会报文中截图的错。（暂时录不了）
麻烦给个相关的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）
代码片段：https://developers.weixin.qq.com/s/qIZdbNm67W4I
我在util.js中 import了组件报错。
收到，我们看下