小程序组件封装-白红宇

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

小程序弹框

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中可以直接使用 
    复制代码

前端搜索组件

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

js 中引入

var WxSearch = require('../../wxSearch/wxSearch.js')复制代码

wxml中引入


    复制代码

wxss 中引入

@import "/wxSearch/wxSearch.wxss";复制代码

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

在小程序初始化过程中配置初始数据

/**   * 生命周期函数--监听页面加载   */  onLoad: function(options) {    var that = this    //初始化的时候渲染wxSearchdata    WxSearch.init(that, 43, ['wxSearch']);  },复制代码

在js的初始data值中进行配置

/**   * 页面的初始数据   */  data: {    searchType: true, //搜索取消状态    searchNull: true, //是否notfound    wxSearchData: {}复制代码

js中对搜索方法进行引用

// ------search 组件------------  Closetap: function() {    var that = this    WxSearch.Closetap(that);  },  wxReset: function() {    var that = this    // var wxSearchData = this.data.wxSearchData    WxSearch.wxReset(that);  },  getLength: function() {    console.log('在getH外')    WxSearch.getHisKeyLength();  },  // ---------------------------  wxSearchFn: function(e) {    var that = this    WxSearch.wxSearchAddHisKey(that, e);  },  wxSearchInput: function(e) {    var that = this    WxSearch.wxSearchInput(e, that);  },  wxSerchFocus: function(e) {    var that = this    WxSearch.wxSearchFocus(e, that);    this.setData({      searchType: true    })  },  // wxSearchBlur: function(e) {  //   var that = this  //   WxSearch.wxSearchBlur(e, that);  // },  wxSearchKeyTap: function(e) {    var that = this    WxSearch.wxSearchKeyTAP(e, that);    that.getvalue()  },  wxSearchDeleteKey: function(e) {    var that = this    WxSearch.wxSearchDeleteKey(e, that);  },  wxSearchDeleteAll: function(e) {    var that = this;    WxSearch.wxSearchDeleteAll(that);  },  wxSearchTap: function(e) {    //获取点击点位置    // console.log(e.detail.y)    let detailY = e.detail.y + 140    var that = this    WxSearch.wxSearchHiddenPancel(that, detailY);    // console.log('外部调用页面关闭')  },复制代码