用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2021-1-18 14:11

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

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

web-view

这个是首当其冲的组件了,业务部分场景中是使用的 H5 页面,尤其是活动页面是变化最频繁的,所以查看小程序文档

(opens new window),有这个组件真是让人欣喜;不过高兴太早了。

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

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

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


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

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

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

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


中间页面 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,
        });
      }
    );
  }

目标页面获取消息

由于通过 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
        });
      }
    })
  }
我们可以看到实际效果:


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);
    })
  })
 }
实际效果如下:


总结

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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏