小程序相信大家都不陌生了，扫码即用，麻雀虽小，五脏俱全。

微信小程序简介

小程序的宿主环境是webview，学起来上手比较快，微信封装了一些API供js调用原生app，足矣满足大部分需求了

举个例子: 安卓端js调用java

java代码

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代码

wx.showToast("你好啊");

回归主题

最近在做微信小程序，发现里面的弹窗用的比较多，小程序自带的弹窗功能很少只能显示简单的文字所以简单封装了下

主要知识点 ：

• 小程序自定义组件
• 弹窗遮罩
• 弹窗内容
• 取消和确定事件传递

实现步骤

1.一个半透明的遮罩层

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

2.居中的弹窗

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

3.点击取消和确认事件

    // 取消事件
    cancel: function () {
      this.setData({
        show: false
      });

      this.triggerEvent('cancel');
    },
    // 确定事件
    ok: function () {
      this.setData({
        show: false
      });
      this.triggerEvent('ok');
    }

说明:引用的地方通过bind***接收 ***对应triggerEvent的参数

<dialog show="{{show}}" title="这是标题" footer="{{true}}" bindok="ok" bindcancel="cancel">
</dialog>

效果图

image.png

代码

wxml代码

<button bindtap="show">显示弹窗</button>
<dialog show="{{show}}" title="这是标题" footer="{{true}}" bindok="ok" bindcancel="cancel">

    <view>
        <view>这是中间的内容</view>
        <view>这是中间的内容</view>
        <view>这是中间的内容</view>

    </view>
</dialog>

js代码

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

  /**
   * 页面的初始数据
   */
  data: {
    show: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  show: function () {
    this.setData({
      show: true
    })
  },
  // 确定按钮
  ok: function () {
    console.log("点击了确定")
  },
  // 取消
  cancel: function () {
    console.log("点击了取消")
  }
})

json 代码

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

组件

wxml 代码

<!--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">取消</view>
        <view class="btn-ok" bindtap="ok">确定</view>
    </view>
</view>

js 代码

// components/dialog/index.js
var app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 弹窗宽度
    width: {
      type: String,
      value: "600",
    },
    // 弹窗高度
    height: {
      type: String,
      value: "300",
    },
    // 标题
    title: {
      type: String
    },
    show: {
      type: Boolean,
      value: false,
    },
    // 是否显示底部按钮
    footer: {
      type: Boolean,
      value: false,
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    IMG_URL: app.globalData.IMGURL,
    show: false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 关闭弹窗
    close: function () {
      this.setData({
        show: false
      })
    },
    // 取消事件
    cancel: function () {
      this.setData({
        show: false
      });

      this.triggerEvent('cancel');
    },
    // 取消事件
    ok: function () {
      this.setData({
        show: false
      });
      this.triggerEvent('ok');
    }
  },

})

css 代码

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

/* 遮罩层 */
.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;
}

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

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

/* 内容 */

.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;
}

人的一生有很多第一次，第一次写简书，大家多多关照