微信小程序笔记（四）Wepy使用记录—使用组件

Wepy使用记录—使用组件

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

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

  这里引用的是vant小程序组件（这里不用纠结第三方还是自定义，因为这种组件库都是按照小程序自定义组件标准去写的），用vant不用iview原因是，iview编译有报错看着不舒服，但是不影响使用。

  因为引用的是自定义标题栏，所以会看着不太明显。所以这里对界面简单的修改了一下。

  该界面具体代码如下：

<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官方文档组件说明）

  使用组件时，直接将components对象中的key当标签使用即可。

  运行效果如下图：

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

  属性传值使用props，其实使用起来跟原生小程序组件属性传值差别不大（跟vue的props传值相比，说实话只是长的很像而已）。接下来修改下test组件，还是看图比较直观。

  回到index.wpy中，设置属性值。其实这里这样写和这样写没啥缺别，因为都是设死的。

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

  为什么说和这两种写法没有区别。因为当testText变量发生改变后，界面不会刷新。接下来修改下index.wpy界面，在界面中添加一个按钮，当点击按钮后修改testText变量的值。代码截图如下所示：

  耳听为虚眼见为实，下图完美的展示了之前所描述的问题。

  其实这并不是什么问题，只需要在属性后面加上.sync就可以了。也就是这个样子（官方文档都有说明，只不过就是没有效果，都得自己实验一下才能理解）。

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

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

$broadcast

  简单点说就是群发。只不过是给当前父组件中每个子组件发。方正就是发了，接不接就看子组件的需求了。这里为了看效果先改写一下test组件。

  然后再到index界面里修改一下。再添加一个test组件，在点击按钮的时候发起传参的事件。代码截图如下所示：

  运行效果如下所示：

$invoke

  继续改写一下test组件，向组件中添加方法。

  改写index界面中的按钮点击事件。

  运行效果如下所示：

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

  子组件向父组件传值就一个方式$emit，这玩意也就是在接收的时候有点说道。所以这里先改造一下test组件。

events接收

  在组件中设置events对象，添加testTap接收方法，方法名与test组件中$emit()方法的第一个参数对应。

  运行效果如下所示：

.user接收

  ，使用这种方式去接收子组件传来的事件。index中的代码截图如下所示：

  运行效果如下所示：

总结

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

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