微信小程序笔记(四)Wepy使用记录—使用组件

Wepy使用记录—使用组件

  在wepy中可已使用原生小程序自定义组件,也可已使用wepy组件,使用上稍有区别。

1.使用原生方式的自定义组件

  这里引用的是vant小程序组件(这里不用纠结第三方还是自定义,因为这种组件库都是按照小程序自定义组件标准去写的),用vant不用iview原因是,iview编译有报错看着不舒服,但是不影响使用。
微信小程序笔记(四)Wepy使用记录—使用组件_第1张图片
  因为引用的是自定义标题栏,所以会看着不太明显。所以这里对界面简单的修改了一下。
微信小程序笔记(四)Wepy使用记录—使用组件_第2张图片
  该界面具体代码如下:

<style lang="stylus">
  @import "../css/base.styl"

  page
    width match_parent
    height match_parent

  .topBar
    background-color theme-color
  .topBar .titleGroup
    background-color theme-color
  .topBar .title
    color white

  .center
    display flex
    width match_parent
    height match_parent
    justify-content center
    align-items center
    background-color #3f71ed
    color white
    font-weight bold
    font-size size(50)

style>

<template>
  <view class="topBar" style="padding-top: {{statusBarHeight}}rpx">
    <van-nav-bar title="测试页" custom-class="titleGroup" title-class="title"/>
  view>

  <view class="center">
      使用小程序原生组件
  view>
template>

<script>
  import wepy from 'wepy';
  export default class Index extends wepy.page {
    config = {
      navigationStyle: 'custom',
      navigationBarTextStyle: 'white',
      usingComponents: {
        'van-nav-bar': '../component/vant/nav-bar/index'
      }
    };
    data = {
      statusBarHeight : 0
    };
    onLoad() {
      wx.getSystemInfo({ success: e => this.statusBarHeight = e.statusBarHeight});
    }
  }
script>

  base.styl样式文件中的代码如下:

theme-color = #6caac1
match_parent = 100%

size(value){
  return unit(value,rpx)
}

2.使用wepy组件

  wepy组件的创建和引用还是非常简单的。首先先创建一个组件如:test.wpy。代码如下:

<template>
    <view>自定义wepy组件view>
template>
<script>
  import wepy from 'wepy';

  export default class Test extends wepy.component {
    props = {};
    data = {};
    methods = {};
  }
script>

<style lang="stylus">

style>

  这样就定义完一个组件。随后在要使用这个组件的界面中去进行配置。(图中“key相当于组件的id”请参考wepy官方文档组件说明)
微信小程序笔记(四)Wepy使用记录—使用组件_第3张图片
  使用组件时,直接将components对象中的key当标签使用即可。
微信小程序笔记(四)Wepy使用记录—使用组件_第4张图片
  运行效果如下图:
微信小程序笔记(四)Wepy使用记录—使用组件_第5张图片

3.使用wepy属性传值——传值

  属性传值使用props,其实使用起来跟原生小程序组件属性传值差别不大(跟vue的props传值相比,说实话只是长的很像而已)。接下来修改下test组件,还是看图比较直观。
微信小程序笔记(四)Wepy使用记录—使用组件_第6张图片
  回到index.wpy中,设置属性值。其实这里这样写这样写没啥缺别,因为都是设死的。
微信小程序笔记(四)Wepy使用记录—使用组件_第7张图片

4.使用wepy属性传值——动态修改属性值

  为什么说这两种写法没有区别。因为当testText变量发生改变后,界面不会刷新。接下来修改下index.wpy界面,在界面中添加一个按钮,当点击按钮后修改testText变量的值。代码截图如下所示:
微信小程序笔记(四)Wepy使用记录—使用组件_第8张图片
  耳听为虚眼见为实,下图完美的展示了之前所描述的问题。
微信小程序笔记(四)Wepy使用记录—使用组件_第9张图片
  其实这并不是什么问题,只需要在属性后面加上.sync就可以了。也就是这个样子(官方文档都有说明,只不过就是没有效果,都得自己实验一下才能理解)。
微信小程序笔记(四)Wepy使用记录—使用组件_第10张图片

5.使用wepy组件通信——父向子传值

  父组件向子组件传值目前有两种方式:$broadcast$invoke。(组件通信与交互官方文档说明)

$broadcast

  简单点说就是群发。只不过是给当前父组件中每个子组件发。方正就是发了,接不接就看子组件的需求了。这里为了看效果先改写一下test组件。
微信小程序笔记(四)Wepy使用记录—使用组件_第11张图片
  然后再到index界面里修改一下。再添加一个test组件,在点击按钮的时候发起传参的事件。代码截图如下所示:
微信小程序笔记(四)Wepy使用记录—使用组件_第12张图片
  运行效果如下所示:

微信小程序笔记(四)Wepy使用记录—使用组件_第13张图片

$invoke

  继续改写一下test组件,向组件中添加方法。
微信小程序笔记(四)Wepy使用记录—使用组件_第14张图片
  改写index界面中的按钮点击事件。
微信小程序笔记(四)Wepy使用记录—使用组件_第15张图片
  运行效果如下所示:
微信小程序笔记(四)Wepy使用记录—使用组件_第16张图片

6.使用wepy组件通信——子向父传值

  子组件向父组件传值就一个方式$emit,这玩意也就是在接收的时候有点说道。所以这里先改造一下test组件。
微信小程序笔记(四)Wepy使用记录—使用组件_第17张图片

events接收

  在组件中设置events对象,添加testTap接收方法,方法名与test组件中$emit()方法的第一个参数对应。
微信小程序笔记(四)Wepy使用记录—使用组件_第18张图片
  运行效果如下所示:

微信小程序笔记(四)Wepy使用记录—使用组件_第19张图片

.user接收

  ,使用这种方式去接收子组件传来的事件。index中的代码截图如下所示:
微信小程序笔记(四)Wepy使用记录—使用组件_第20张图片
  运行效果如下所示:
微信小程序笔记(四)Wepy使用记录—使用组件_第21张图片

总结

  虽然使用起来比较简单,但最好还是使用状态管理来替代一些复杂的传值。还有就是最好拿体验版测试,开发板测试挺坑的。

  • 微信小程序笔记(五)Wepy使用记录—Wepy-Redux基本使用

你可能感兴趣的:(前端练习)