I believe that everyone is familiar with the small program. It can be used as soon as you scan the code. Although the sparrow is small, it has all five internal organs.

Introduction to wechat applet

The host environment of the applet is webview, which is relatively fast to learn. Wechat encapsulates some API s for js to call the native app, which is enough to meet most of the requirements

For example: Android js calls java

java code

webView.addJavascriptInterface(new myJavaScriptInterface(), "wx");

 public class myJavaScriptInterface{
        @SuppressLint("JavascriptInterface")
        @JavascriptInterface
        public void showToast(String text){
   Toast.makeText(MainActivity.this, text, Toast.LENGTH_LONG).show();
        }
    }

js code

wx.showToast("How do you do");

Return theme

Recently, I was working on a wechat applet. I found that there are many pop ups in it. The pop-up function of the applet is rarely able to display simple text, so it's easy to encapsulate

Main knowledge points:

• Applet custom components
• Window mask
• Pop-up content
• Cancel and determine event delivery

Implementation steps

1. A translucent mask layer

    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: black;
    opacity: 0.5;

2. Pop up window in the middle

    position: fixed;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 999;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 10rpx;

3. Click Cancel and confirm event

    // Cancellation event
    cancel: function () {
      this.setData({
        show: false
      });

      this.triggerEvent('cancel');
    },
    // Identify events
    ok: function () {
      this.setData({
        show: false
      });
      this.triggerEvent('ok');
    }

Note: the referenced place receives the parameter of trigger event corresponding to * * * through bind * * *

<dialog show="{{show}}" title="This is the title." footer="{{true}}" bindok="ok" bindcancel="cancel">
</dialog>

Design sketch

image.png

Code

wxml code

< button bindtap = "show" > show pop up window < / button >
< dialog show = "{{show}}" title = "this is the title" footer = "{{true}" bindok = "OK" bindcancel ">

    <view>
        < View > this is the middle content < / View >
        < View > this is the middle content < / View >
        < View > this is the middle content < / View >

    </view>
</dialog>

js code

// pages/test/test.js
Page({

  /**
   * Initial data of the page
   */
  data: {
    show: false
  },

  /**
   * Life cycle function -- listening to page loading
   */
  onLoad: function (options) {

  },
  show: function () {
    this.setData({
      show: true
    })
  },
  // Confirm button
  ok: function () {
    console.log("Click OK")
  },
  // cancel
  cancel: function () {
    console.log("Click Cancel")
  }
})

json code

{
  "usingComponents": {
    "dialog": "/components/vector/dialog/index"
  }
}

assembly

wxml code

<!--components/dialog/index.wxml-->

<view class="dialog-bg" wx:if="{{show}}">
</view>

<view class="dialog" style="width:{{width}}rpx;" wx:if="{{show}}">

    <view class="title">
        <view>{{title}}</view>
        <view>
            <image class="close-icon" src="{{IMG_URL}}/imgs/icon/close.png" bindtap="close">

            </image>

        </view>
    </view>
    <view class="content" style="height: {{height}}rpx;">
        <slot></slot>
    </view>
    <view class="footer" wx:if="{{footer}}">
        <view class="btn-cancel" bindtap="cancel">cancel</view>
        <view class="btn-ok" bindtap="ok">Determine</view>
    </view>
</view>

js code

// components/dialog/index.js
var app = getApp()
Component({
  /**
   * Property list of component
   */
  properties: {
    // Window width
    width: {
      type: String,
      value: "600",
    },
    // Pop-up height
    height: {
      type: String,
      value: "300",
    },
    // Title
    title: {
      type: String
    },
    show: {
      type: Boolean,
      value: false,
    },
    // Show bottom button or not
    footer: {
      type: Boolean,
      value: false,
    }
  },

  /**
   * Initial data of components
   */
  data: {
    IMG_URL: app.globalData.IMGURL,
    show: false
  },

  /**
   * Method list for component
   */
  methods: {
    // Close the window
    close: function () {
      this.setData({
        show: false
      })
    },
    // Cancellation event
    cancel: function () {
      this.setData({
        show: false
      });

      this.triggerEvent('cancel');
    },
    // Cancellation event
    ok: function () {
      this.setData({
        show: false
      });
      this.triggerEvent('ok');
    }
  },

})

css code

/* components/dialog/index.wxss */
page {
    font-size: 30rpx;
}

/* mask */
.dialog-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: black;
    opacity: 0.5;
}

.dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 999;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 10rpx;
}

/* Title Bar */
.dialog .title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20rpx;
    height: 80rpx;
    border-bottom: 1px solid #f0f0f0;
}

/* close button */
.dialog .close-icon {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    right: 20rpx;
    top: 20rpx;
}

/* content */

.dialog .content {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: scroll;
}

.dialog .footer {
    width: 100%;
    height: 80rpx;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-bottom-left-radius: 10rpx;
    border-bottom-right-radius: 10rpx;

}

.dialog .footer>view {

    /* padding: 20rpx; */
    height: 80rpx;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;


}

.dialog .footer .btn-cancel {
    flex-grow: 1;
    border-bottom-left-radius: 10rpx;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
}

.dialog .footer .btn-ok {
    flex-grow: 1;
    color: #3385ff;
    border-bottom-right-radius: 10rpx;
    border: 1px solid #f0f0f0;
}

There are many firsts in a person's life, the first time to write a simple book, everyone take care of it