小程序里面组件和页面之间的相互调用

第一种:通过组件去调用页面里面的方法

执行过程:已mine.wxml页面和minelogot.wxml页面为例

1、在mine.json中引入该组件:

{
  "usingComponents": {
    "minelogot":"/components/minelogot/minelogot"
  },
  "navigationBarTitleText": "我的"
}

2、在mine.wxml中使用minelogot组件:

<view>
 <minelogot id="minelogot" logot="{{flaglogot}}" bind:canclemine="canclemine"></minelogot>
</view>

3、在minelogot.js里面接收传递过来的参数,定义方法

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    logot:{
      type:Boolean,
      value:false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    evaluCancle() {
      this.triggerEvent('canclemine',{logot: false})
    },
    goOut(){
      wx.reLaunch({
        url: '../login/login',
      })
    },
  }
})

4、在组件minelogot.wxml中定一个方法evaluCancle

<view class="popEvalu" wx:if="{{logot}}">
    <view class="popEvaluContent">
      <view class="evaluBtn">
         <view class="evaluMain">
           <!-- <view class="evalurow">拍照</view> -->
           <view class="evalurow"  bindtap="goOut">退出登录</view>
         </view>
         <view class="evaluBtn-btn bb2" bindtap="evaluCancle">取消</view>
      </view>
    </view>
  </view>

5、触发方法以后通过this.triggerEvent()向mine页面传递方法

6、mine页面接收参数,触发方法:

 canclemine(e){
    console.log(e.detail.logot)
  },

第二种:通过页面调用组件里面的方法

 通过mine页面,调用minelogot组件:
  1.在mine页面中使用minelogot组件,给他起一个ID
  2.在mine.js中,获取到这个组件(实例化)
  3.通过实例化的对象,即可调用组件中的方法

mine.js逻辑

 onReady: function(options) {
    this.minelogot = this.selectComponent("#minelogot"); //这里是实例化了minelogot,通过minelogot,我们就能调用minelogot组建中的方法
  },
  useComponentFn(){
    this.minelogot.componentFn();//调用了组建中的componentFn方法  
  }

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序与H5实时交互是指小程序与H5页面之间能够实现数据通信和交互的功能。小程序是一种在App内嵌的轻量级应用,而H5页面是在浏览器中运行的网页。他们之间的实时交互可以为用户提供更加强大和丰富的功能和用户体验。 小程序与H5实时交互的实现方式主要有两种:跳转和通信。 首先,跳转是指小程序内的某个功能或页面需要调用H5页面来完成,或者H5页面中的某个功能需要跳转到小程序来实现。这主要通过使用小程序提供的跳转接口和自定义链接来实现。通过在小程序调用打开H5页面的接口,传递相应的参数,即可将用户带到指定的H5页面。同样地,在H5页面中通过使用小程序提供的自定义链接,用户点击后即可跳转到指定小程序的对应页面。 其次,通信是指小程序与H5页面之间能够实现数据的传递和交互。这主要通过使用小程序提供的Webview组件和JavaScript Bridge技术来实现。小程序内的Webview组件可以加载H5页面,通过JavaScript Bridge可以实现小程序与H5页面之间相互调用和数据传递。通过在小程序调用JavaScript Bridge提供的API,可以将小程序内的数据传递给H5页面,在H5页面中可以获取到相关数据进行处理,然后再将处理结果返回给小程序。 综上所述,小程序与H5实时交互能够为用户提供更加强大和丰富的功能和用户体验,通过跳转和通信的方式可以实现小程序和H5页面之间的数据传递和交互。这为开发者提供了更多的选择和灵活性,能够根据具体需求选择合适的方式来实现小程序与H5页面的实时交互。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值