小程序组件封装

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

---

小程序弹框

wxml中

这里绑定的是用户点击成功和取消的方法
  <dialog id="dialog" bind:cancelEvent="cancelEvent" bind:okEvent="okEvent"></dialog>
复制代码

引用的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

<view class="Maskcontainer"></view>
复制代码

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

前端搜索组件

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

js 中引入

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

wxml中引入

<import src="/wxSearch/wxSearch.wxml" />
复制代码

wxss 中引入

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

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

   <view class='search_top'>
      <view class="search_bar">
        <view class='search_input_class'>
          <!-- {{wxSearchData.value}} -->
          <image class='search_background' src='/img/index/search_bar.png'></image>
          <input class='search_input' bindinput="wxSearchInput" bindfocus="wxSerchFocus" value="{{wxSearchData.value}}" placeholder="请输入关键字查询" placeholder-class='placeholder' />
        </view>
        <view hidden='{{!searchType}}' class='search_btn' bindtap='getvalue'>
          <view bindtap="wxSearchFn">
            <image class='search_icon' src='/img/index/search.png'></image>
            <view class='search_info' plain="true">搜索</view>
          </view>
        </view>
        <view hidden='{{searchType}}' class='search_btn' bindtap='resetvalue'>
          <image class='search_icon' src='/img/index/reset.png'></image>
          <view class='search_info'>取消</view>
        </view>
      </view>
    </view>
    <template is="wxSearch" data="{{wxSearchData}}" />
  </view>
复制代码

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

  /**
   * 生命周期函数--监听页面加载
   */
  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('外部调用页面关闭')
  },
复制代码

转载于:https://juejin.im/post/5cb40206f265da039b0860e0