The code address of this article is github

Recently the development of micro channel small program encountered a lot of problems, especially some of the components of the small program, it is really let a person feel full of joy and helpless.

web-view

This is the first component, the business part of the scenario is used in the H5 page, especially the active page is the most frequent change, so checkApplets documentIt’s a joy to have this component; But it’s too early to rejoice.



The communication mechanism is really frustrating:

You can see that there are three component constraints:

  • Automatically spread the entire applet page
  • The navigation bar cannot be customized
  • Communication between the two sides requires specific scenarios

Small program to send messages to H5 is easy to implement, we can directly on the access link with the parameter message we need

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

However, H5 sends a message to the applet and needs to communicate with the applet in three specific scenarios: back, Destroy, and share. This means that without the above three scenarios, the applet cannot get the page message through the bindMessage event.

Most of our scenarios require real-time communication, which is used herebackThis scenario enables real-time communication, but this actually sacrifices the user experience:

Middle page middle

Use the middle page onLoad to receive the parameter options, and then according to getCurrentPages to get back to the page, set the required message

  onLoad(options) {

    const pages = getCurrentPages();
    console.log('Middle message:', options)

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

    webviewPage.setData(
      {
        options: options
      },
      () = > {
        wx.navigateBack({
          delta: 0}); }); }Copy the code

The target page gets the message

As data data options are set through the MIDDLE page, real-time communication messages can be accessed in the program

  onShow() {
    this.setData({
      src: 'https://imondo.cn/files/web.html'
    }, () = > {
      console.log(` web page: `.this.data.options)
      if (this.data.options) {
        wx.showModal({
          title: this.data.options.msg }); }})}Copy the code

We can see this in action:

scroll-view

This scroll area component is probably a common component, but when it scrolls vertically, it must be set to a fixed height, which is also a weird setting. Fortunately, the applet has the Wx. createSelectorQuery API to dynamically resolve its height:

// 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(); // System height
  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(); // Use.in(this) if it is in component.
    if (Array.isArray(selector)) {
      selector.forEach(el= >{ query.select(el).boundingClientRect(); })}else {
      query.select(selector).boundingClientRect();
    }
    query.exec(res= >{ resolve(res); })})}Copy the code

The actual effect is as follows:

conclusion

In fact, the use of small program components in the document has mentioned the relevant attention, but our business needs are really changeable, for some of the components of the uncertainty needs a good investigation summary, I hope small program components more and more perfect it ~ 🤣