小程序组件封装

前端的一枚菜鸡 在微信小程序开发的过程中自己手写了几个组件，仅此记录自己的学习。
小程序的component组件思路主要是在 外部将组件的css，js写好然后在需要的页面引用路径就可以了

---

小程序弹框

image

wxml中

这里绑定的是用户点击成功和取消的方法
  

引用的json页面

  "dialog": "/components/dialog/dialog"

在js页面初始化弹框

/**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    this.dialog = this.selectComponent('#dialog');
  },

可以动态输入标题等来保证组件的多样性

//弹框组件
  tapDialog: function() {
    this.dialog.setData({
      title: '验证手机号码',
      cancelText: '取消',
      okText: '确认'
    });
    this.dialog.show();
  },
  cancelEvent: function() {
    //取消执行函数
    this.dialog.close();
  },
  okEvent: function() {
    //确认执行函数
    this.dialog.close();
  },

小程序mask

使用后可以阻止用户点击mask后的界面

mask.wxml

mask.wxss

.Maskcontainer{
  background-color: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  opacity: 0.6;
  width: 100%;
  height: 100%;
  z-index: 99
}

在其他页面引用时

"usingComponents": {
    "mask": "/components/mask/mask"
  } 
  在wxml中可以直接使用 

前端搜索组件

image

image

• 引入模块分别引入 wxSearch 下的 wxss

js 中引入

var WxSearch = require('../../wxSearch/wxSearch.js')

wxml中引入

wxss 中引入

@import "/wxSearch/wxSearch.wxss";

• 编写前端界面 及相关 js
  需要调用的前端页面