# 让人无奈的微信小程序组件

本文相关代码地址:github (opens new window)


最近开发微信小程序碰到了蛮多问题,尤其是小程序里面的一些组件,实在是让人感觉即满心欢喜又无奈无语。

# web-view

这个是首当其冲的组件了,业务部分场景中是使用的 H5 页面,尤其是活动页面是变化最频繁的,所以查看小程序文档 (opens new window),有这个组件真是让人欣喜;不过高兴太早了。

其通信机制真是让人无可奈何:

image.png可以看到组件限制有三点:

  • 自动铺满整个小程序页面
  • 导航栏不可以自定义
  • 两边通信需要特定的场景


小程序给 H5 发送消息容易实现,可以直接在访问链接上带上我们需要的参数消息

<web-view src="test.html?id=2"></web-view>
1

但是H5给小程序发送消息则需要在特定的场景:后退、销毁、分享三个场景页面才能与小程序通信。意思就是没有发生上面三个场景的情况下,小程序是无法通过 bindmessage 这个事件获取到页面消息。

我们大部分场景下是需要实时通信,这里使用后退这个场景来实现实时通信,但是这个其实是牺牲了用户体验:

image.png

# 中间页面 middle


利用中间页面 onLoad 中接收参数 options ,再根据 getCurrentPages 获取到需要返回到页面,设置需要的消息

  onLoad(options) {

    const pages = getCurrentPages();
    console.log(`middle消息:`, options)

    const webviewPage = pages[pages.length - 2];

    webviewPage.setData(
      {
        options: options
      },
      () => {
        wx.navigateBack({
          delta: 0,
        });
      }
    );
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 目标页面获取消息

由于通过 middle 页面设置了 data 数据 options 所以可以在程序内访问到实时的通信消息

  onShow() {
    this.setData({
      src: 'https://imondo.cn/files/web.html'
    }, () => {
      console.log(`web页:`, this.data.options)
      if (this.data.options) {
        wx.showModal({
          title: this.data.options.msg
        });
      }
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12

我们可以看到实际效果:
view.gif

# scroll-view

这个滚动区域组件,应该是我们真常用的组件,但是它竖向滚动的时候,一定要给它设一个固定高度值,这也是一个奇葩的设定。
幸好小程序有 wx.createSelectorQuery (opens new window) 这个 API 来动态解决它的高度:

// view
<view>
  <view class="head">Head</view>
  <scroll-view scroll-y="true" style="height: {{scollHeight}}px">
    <block wx:for="{{20}}" wx:key="index">
      <view class="scroll-item">item</view>
    </block>
  </scroll-view>
</view>

// js
onShow() {
  const system = wx.getSystemInfoSync(); // 系统高度
  const height = system.windowHeight;
  this.queryEl(['.head']).then(rect => {
    const [{ height: ht }] = rect
    this.setData({
      scollHeight: (height - ht).toFixed(0)
    })
  })
},
queryEl(selector) {
  return new Promise(resolve => {
    const query = wx.createSelectorQuery(); // 如果是在 component 内需要使用 .in(this)
    if (Array.isArray(selector)) {
      selector.forEach(el => {
        query.select(el).boundingClientRect();
      })
    } else {
      query.select(selector).boundingClientRect();
    }
    query.exec(res => {
      resolve(res);
    })
  })
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

实际效果如下:
scroll.gif

# 总结

小程序的组件使用过程中其实文档中都提到了相关的注意地方,但是我们的业务需求实在是多变,对于部分组件的不确定性需要好好的调研总结,希望小程序组件越来越完善吧~ 🤣

更新于: 8/26/2020, 7:47:12 AM